// ==UserScript== // @name Picrew Random Section // @namespace tweeks.io // @version 1.2.0 // @description Adds a "Random Picks" category to the Picrew main page showing 6 random picrews, refreshed on every page load. Also handles /search?s=3 as a full random picks page with persistence across back/forward navigation. // @author Tweeks // @match https://picrew.me/en // @match https://picrew.me/en/ // @match https://picrew.me/en/search* // @match https://picrew.me/ja // @match https://picrew.me/ja/ // @match https://picrew.me/ja/search* // @match https://picrew.me/ko // @match https://picrew.me/ko/ // @match https://picrew.me/ko/search* // @grant none // ==/UserScript== (function () { 'use strict'; const RANDOM_COUNT = 6; const SEARCH_PAGE_COUNT = 20; const API_URL_BASE = 'https://api.picrew.me/player/api/search/random?l='; const SESSION_KEY = 'picrew_random_s3_makers'; // Detect current locale from URL function getLocale() { var m = location.pathname.match(/^\/(en|ja|ko)/); return m ? m[1] : 'en'; } // Check if we are on the ?s=3 search page function isRandomSearchPage() { var params = new URLSearchParams(location.search); return location.pathname.includes('/search') && params.get('s') === '3'; } // Check if we are on the main home page function isHomePage() { var path = location.pathname.replace(/\/$/, ''); return path === '/en' || path === '/ja' || path === '/ko'; } // Normalize icon URL - API sometimes returns relative paths function normalizeIconUrl(url) { if (!url) return ''; if (/^https?:\/\//i.test(url)) return url; if (url.charAt(0) === '/') return 'https://cdn.picrew.me' + url; return url; } function escapeHtml(str) { return String(str) .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"'); } function escapeAttr(str) { return String(str).replace(/'/g, '%27').replace(/"/g, '%22'); } // Build a single picrew list item matching the existing page structure function buildListItem(maker) { var locale = getLocale(); var id = maker.id; var iconUrl = normalizeIconUrl(maker.icon_url || ''); var title = maker.title || ''; var creatorName = maker.creator_name || ''; var href = '/' + locale + '/image_maker/' + id; var sizeClass = (parseInt(maker.canvas_size_id) === 100) ? 'rectangleSize' : 'squareSize'; var li = document.createElement('li'); li.innerHTML = '

' + '

' + '' + '

' + escapeHtml(title) + '

' + '

' + escapeHtml(creatorName) + '

' + '

' + '' + '

'; return li; } // Build the full random section element for the home page function buildRandomSection(makers) { var locale = getLocale(); var section = document.createElement('section'); section.className = 'sitetop-ImagemakerList'; var h2 = document.createElement('h2'); h2.className = 'sitetop-ImagemakerList_Title'; h2.innerHTML = ' Random Picks'; section.appendChild(h2); var ul = document.createElement('ul'); ul.className = 'sitetop-ImagemakerList_List'; makers.forEach(function (maker) { ul.appendChild(buildListItem(maker)); }); section.appendChild(ul); // "See more" link pointing to the random search page (?s=3) var seeMore = document.createElement('a'); seeMore.href = '/' + locale + '/search?s=3'; seeMore.className = 'c_btn'; seeMore.textContent = 'See more'; section.appendChild(seeMore); return section; } // Fetch random picrews from the API async function fetchRandomMakers(count) { try { var response = await fetch(API_URL_BASE + count, { method: 'GET', credentials: 'include', headers: { 'X-Requested-With': 'XMLHttpRequest' } }); if (!response.ok) return null; var data = await response.json(); if (Array.isArray(data)) return data; if (data && Array.isArray(data.data)) return data.data; return null; } catch (e) { return null; } } // Find the "Updated Image Makers" section and insert after it function findUpdatedSection() { var sections = document.querySelectorAll('section.sitetop-ImagemakerList'); for (var i = 0; i < sections.length; i++) { var h2 = sections[i].querySelector('.sitetop-ImagemakerList_Title'); if (h2 && h2.textContent.trim().toLowerCase().includes('updated image makers')) { return sections[i]; } } return null; } // Main injection function for the home page async function injectRandomSection() { var makers = await fetchRandomMakers(RANDOM_COUNT); // Fallback: if API fails or returns nothing, use picrews already on the page if (!makers || makers.length === 0) { makers = collectPageMakers(); } if (!makers || makers.length === 0) return; // Shuffle and pick 6 if we got more (fallback path) if (makers.length > RANDOM_COUNT) { makers = shuffleArray(makers).slice(0, RANDOM_COUNT); } var updatedSection = findUpdatedSection(); if (!updatedSection) return; var randomSection = buildRandomSection(makers); // Insert after the "Updated Image Makers" section updatedSection.parentNode.insertBefore(randomSection, updatedSection.nextSibling); } // Collect picrews already rendered on the page as a fallback function collectPageMakers() { var results = []; var seen = new Set(); var links = document.querySelectorAll('.sitetop-ImagemakerList_List a[href*="/image_maker/"]'); links.forEach(function (a) { var m = a.href.match(/\/image_maker\/(\d+)/); if (!m) return; var id = m[1]; if (seen.has(id)) return; seen.add(id); var iconEl = a.closest('.squareSize, .rectangleSize'); if (!iconEl) return; var iconDiv = iconEl.querySelector('.sw_imagemaker_icon'); var iconUrl = ''; if (iconDiv) { var dataBg = iconDiv.getAttribute('data-bg'); if (dataBg) { iconUrl = dataBg; } else { var bg = iconDiv.style.backgroundImage; var bgm = bg.match(/url$["']?([^"')]+)["']?$/); if (bgm) iconUrl = bgm[1]; } iconUrl = normalizeIconUrl(iconUrl); } var titleEl = iconEl.querySelector('.sw_imagemaker_title'); var creatorEl = iconEl.querySelector('.sw_imagemaker_creator'); results.push({ id: id, icon_url: iconUrl, title: titleEl ? titleEl.textContent.trim() : '', creator_name: creatorEl ? creatorEl.textContent.trim() : '', canvas_size_id: iconEl.classList.contains('rectangleSize') ? 100 : 1 }); }); return results; } function shuffleArray(arr) { var a = arr.slice(); for (var i = a.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var tmp = a[i]; a[i] = a[j]; a[j] = tmp; } return a; } // ----------------------------------------------------------------------- // SEARCH PAGE (?s=3) - Random Picks full page // ----------------------------------------------------------------------- // Save makers to sessionStorage so back/forward navigation restores them function saveToSession(makers) { try { sessionStorage.setItem(SESSION_KEY, JSON.stringify(makers)); } catch (e) {} } // Load makers from sessionStorage (returns null if not present) function loadFromSession() { try { var raw = sessionStorage.getItem(SESSION_KEY); if (!raw) return null; var parsed = JSON.parse(raw); if (Array.isArray(parsed) && parsed.length > 0) return parsed; } catch (e) {} return null; } // Build the full search-page style layout for random picks function buildSearchPage(makers) { var locale = getLocale(); // Wrapper that mimics the search result page structure var wrapper = document.createElement('div'); wrapper.id = 'picrew-random-search-page'; wrapper.style.cssText = 'max-width:1200px;margin:0 auto;padding:20px;'; // Header var header = document.createElement('div'); header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;'; var title = document.createElement('h1'); title.style.cssText = 'font-size:1.4em;font-weight:bold;display:flex;align-items:center;gap:8px;'; title.innerHTML = ' Random Picks'; var refreshBtn = document.createElement('button'); refreshBtn.className = 'c_btn'; refreshBtn.style.cssText = 'cursor:pointer;'; refreshBtn.innerHTML = ' Shuffle'; refreshBtn.addEventListener('click', function () { sessionStorage.removeItem(SESSION_KEY); location.reload(); }); header.appendChild(title); header.appendChild(refreshBtn); wrapper.appendChild(header); // Subtitle var sub = document.createElement('p'); sub.style.cssText = 'color:#888;font-size:0.9em;margin-bottom:20px;'; sub.textContent = 'A random selection of image makers. Reload the page to discover new ones, or use the Shuffle button above.'; wrapper.appendChild(sub); // Grid list var ul = document.createElement('ul'); ul.className = 'sitetop-ImagemakerList_List'; ul.style.cssText = 'list-style:none;padding:0;margin:0;'; makers.forEach(function (maker) { ul.appendChild(buildListItem(maker)); }); wrapper.appendChild(ul); // Back link var backLink = document.createElement('div'); backLink.style.cssText = 'margin-top:30px;text-align:center;'; var back = document.createElement('a'); back.href = '/' + locale; back.className = 'c_btn'; back.textContent = 'Back to Home'; backLink.appendChild(back); wrapper.appendChild(backLink); return wrapper; } // Find the main content container on the search page function findSearchPageContainer() { // Try common containers used by Picrew's Vue app var candidates = [ document.querySelector('.sitetop-Container'), document.querySelector('.sitetop-Main'), document.querySelector('#__nuxt'), document.querySelector('#__layout'), document.querySelector('main'), document.querySelector('.search-Container'), document.querySelector('[class*="search"]'), ]; for (var i = 0; i < candidates.length; i++) { if (candidates[i]) return candidates[i]; } return document.body; } // Detect if the current page load is a back/forward navigation function isBackForwardNavigation() { // PerformanceNavigationTiming (modern) try { var entries = performance.getEntriesByType('navigation'); if (entries && entries.length > 0) { return entries[0].type === 'back_forward'; } } catch (e) {} // Legacy fallback try { return performance.navigation && performance.navigation.type === 2; } catch (e) {} return false; } // Inject the random search page content async function injectRandomSearchPage() { // Check if already injected if (document.getElementById('picrew-random-search-page')) return; var isBackFwd = isBackForwardNavigation(); // On back/forward: restore from sessionStorage // On fresh load or reload: fetch new makers and overwrite sessionStorage var makers = null; if (isBackFwd) { makers = loadFromSession(); } if (!makers) { // Fresh load or reload - fetch new random makers makers = await fetchRandomMakers(SEARCH_PAGE_COUNT); if (!makers || makers.length === 0) { makers = await fetchRandomMakers(RANDOM_COUNT); } if (!makers || makers.length === 0) return; // Save to session so back/forward navigation restores these exact makers saveToSession(makers); } // Find a good insertion point - look for the main content area var container = findSearchPageContainer(); // Hide the existing page content (which may show "no results" or wrong content) // We'll insert our content at the top var pageContent = buildSearchPage(makers); // Try to find the inner content div to prepend to var innerMain = container.querySelector('.sitetop-Main') || container.querySelector('[class*="Main"]') || container.querySelector('[class*="Content"]') || container; // Insert at the beginning of the container if (innerMain.firstChild) { innerMain.insertBefore(pageContent, innerMain.firstChild); } else { innerMain.appendChild(pageContent); } // Update the page title document.title = 'Random Picks | Picrew'; // Update any h1/heading that might say "Search Results" etc. var existingH1 = document.querySelector('h1:not(#picrew-random-search-page h1)'); if (existingH1 && !existingH1.closest('#picrew-random-search-page')) { existingH1.style.display = 'none'; } } // Wait for a condition to be true, then call callback function waitFor(condition, callback, maxWait) { var waited = 0; var interval = 300; var timer = setInterval(function () { waited += interval; if (condition()) { clearInterval(timer); callback(); } else if (waited >= maxWait) { clearInterval(timer); } }, interval); } // Wait for the page sections to be rendered (Vue.js SPA) function waitForSections(callback, maxWait) { waitFor(function () { return !!findUpdatedSection(); }, callback, maxWait); } // Wait for the search page container to be ready function waitForSearchPage(callback, maxWait) { waitFor(function () { return !!(document.querySelector('.sitetop-Container') || document.querySelector('main') || document.querySelector('#__nuxt')); }, callback, maxWait); } // ----------------------------------------------------------------------- // Entry point // ----------------------------------------------------------------------- function init() { if (isRandomSearchPage()) { // On the ?s=3 page: inject random picks waitForSearchPage(injectRandomSearchPage, 10000); } else if (isHomePage()) { // On the home page: inject the Random Picks section waitForSections(injectRandomSection, 10000); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } // Handle SPA navigation (Vue router pushState) var lastUrl = location.href; var navObserver = new MutationObserver(function () { if (location.href !== lastUrl) { lastUrl = location.href; // Small delay to let Vue render the new page setTimeout(init, 500); } }); navObserver.observe(document.body, { childList: true, subtree: true }); })();