// ==UserScript== // @name Tweeks.io - Retro UI Overlay // @namespace tweeks.io // @version 5.0.0 // @description Transforms tweeks.io into a usable 2004-era interface with XP-style UI and forum community widgets. Covers homepage and onboarding flow. // @author Tweeks // @match https://www.tweeks.io/* // @grant GM_registerMenuCommand // @grant GM_unregisterMenuCommand // @run-at document-start // ==/UserScript== (function () { 'use strict'; // ----------------------------------------------------------------------- // State // ----------------------------------------------------------------------- let overlayActive = true; let hostEl = null; let shadowRoot = null; let toggleMenuId = null; let observer = null; // For onboarding direct-CSS mode let onboardingStyleEl = null; let onboardingBannerEl = null; // ----------------------------------------------------------------------- // Page detection // ----------------------------------------------------------------------- function isOnboardingPage() { return /\/onboarding/.test(window.location.pathname); } // ----------------------------------------------------------------------- // Helpers // ----------------------------------------------------------------------- function escHtml(str) { if (!str) return ''; return String(str) .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"'); } // Collect nav links from topbar function getNavLinks() { const links = []; document.querySelectorAll('.topnav a, nav a').forEach(a => { const text = a.textContent.trim(); if (text && !links.find(l => l.text === text)) { links.push({ text, href: a.href }); } }); if (!links.length) { links.push( { text: 'Home', href: '/' }, { text: 'Discover', href: '/#browse' }, { text: 'Blog', href: '/changelog' }, { text: 'Docs', href: '/docs' }, { text: 'Get Extension', href: '/get-extension' } ); } return links; } // Collect featured cards function getFeaturedCards() { const cards = []; document.querySelectorAll('.library-card.is-featured-slot').forEach(card => { const title = card.querySelector('.library-card-title'); const desc = card.querySelector('.library-card-desc'); const site = card.querySelector('.library-card-site'); const img = card.querySelector('img'); cards.push({ title: title ? title.textContent.trim() : '', desc: desc ? desc.textContent.trim() : '', site: site ? site.textContent.trim() : '', href: card.href || '#', img: img ? img.src : '' }); }); return cards; } // Collect stats function getStats() { const stats = []; document.querySelectorAll('.stat').forEach(s => { const val = s.querySelector('.stat-val'); const lbl = s.querySelector('.stat-lbl'); if (val && lbl) stats.push({ val: val.textContent.trim(), lbl: lbl.textContent.trim() }); }); return stats; } // Collect leaderboard function getLeaderboard() { const rows = []; document.querySelectorAll('.mod-leaderboard-row').forEach(row => { const rank = row.querySelector('.mod-leaderboard-rank'); const title = row.querySelector('.mod-leaderboard-title'); const site = row.querySelector('.mod-leaderboard-site'); const count = row.querySelector('.mod-leaderboard-count'); rows.push({ rank: rank ? rank.textContent.trim() : '', title: title ? title.textContent.trim() : '', site: site ? site.textContent.trim() : '', count: count ? count.textContent.trim() : '', href: row.href || '#' }); }); return rows.slice(0, 10); } // ----------------------------------------------------------------------- // Community / forum helpers // ----------------------------------------------------------------------- const COMMUNITY_MEMBERS = [ 'xX_PixelWizard_Xx', 'CSSNinja2005', 'webmaster_dan', 'l33t_coder', 'FirefoxFan99', 'TabHoarder', 'BrowserMod_Gal', 'HackerNewsReader', 'TweeksPowerUser', 'SilentBrowse', 'NightOwlDev', 'RetroWebFan', 'ScriptKiddie404', 'DOMWhisperer', 'StyleSheetSam' ]; const FORUM_POSTS = [ { user: 'CSSNinja2005', topic: 'How do I hide YouTube Shorts?', replies: 14, views: 312 }, { user: 'webmaster_dan', topic: 'Amazon price tracker tweek not working', replies: 7, views: 88 }, { user: 'l33t_coder', topic: 'Share your best productivity tweeks!', replies: 31, views: 740 }, { user: 'FirefoxFan99', topic: 'Firefox support - any issues?', replies: 5, views: 61 }, { user: 'TabHoarder', topic: 'Can tweeks run on mobile browsers?', replies: 9, views: 203 }, { user: 'BrowserMod_Gal', topic: 'My top 5 tweeks for LinkedIn', replies: 22, views: 519 }, ]; const ONLINE_USERS = [ 'xX_PixelWizard_Xx', 'CSSNinja2005', 'TabHoarder', 'NightOwlDev', 'ScriptKiddie404' ]; function getCurrentMonth() { return ['January','February','March','April','May','June', 'July','August','September','October','November','December'][new Date().getMonth()]; } function getBannerDesigner() { return COMMUNITY_MEMBERS[new Date().getMonth() % COMMUNITY_MEMBERS.length]; } function buildForumSidebarHTML() { const month = getCurrentMonth(); const designer = getBannerDesigner(); const onlineList = ONLINE_USERS.map(u => `${escHtml(u)}`).join('
'); return ` `; } // ----------------------------------------------------------------------- // Shared retro CSS (for shadow DOM / homepage overlay) // ----------------------------------------------------------------------- function buildRetroCSS() { return ` `; } // ----------------------------------------------------------------------- // Shared chrome (topbar, banner, ticker, navbar, sidebar, footer) // ----------------------------------------------------------------------- function buildChrome(mainColHTML, sidebarExtra) { const navLinks = getNavLinks(); const navHTML = navLinks.map(l => `${escHtml(l.text)}` ).join(' | '); const forumSidebarHTML = buildForumSidebarHTML(); return `

☆ NEW: BrowserMod_Gal posted "My top 5 tweeks for LinkedIn" • HOT: l33t_coder's "Share your best productivity tweeks!" has 31 replies • COMMUNITY: ${escHtml(getBannerDesigner())} designed our ${escHtml(getCurrentMonth())} banner — thanks! • TIP: Did you know you can share tweeks with friends? • ONLINE: ${ONLINE_USERS.length} members browsing right now • NEW TWEEK: "Hide LinkedIn promoted posts" by TabHoarder — 847 installs ☆

${mainColHTML}

`; } // ----------------------------------------------------------------------- // Build homepage HTML // ----------------------------------------------------------------------- function buildHomepageHTML() { const featured = getFeaturedCards(); const stats = getStats(); const leaderboard = getLeaderboard(); const statsHTML = stats.length ? stats.map(s => `

${escHtml(s.val)}${escHtml(s.lbl)}

` ).join('') : `

25k+Users

4k+Tweeks

4M+Pages Modified

`; const leaderboardHTML = leaderboard.length ? leaderboard.map(r => ` ${escHtml(r.rank)} ${escHtml(r.title)} ${escHtml(r.site)} ${escHtml(r.count)} `).join('') : `Loading leaderboard...`; const featuredHTML = featured.length ? featured.map(c => `

${c.img ? `

` : ''}

${escHtml(c.title)}

${escHtml(c.site)}

${escHtml(c.desc)}

View & Install

`).join('') : `

No featured tweeks found.

`; const forumRows = FORUM_POSTS.map((p, i) => ` ${escHtml(p.topic)}
by ${escHtml(p.user)} ${p.replies} ${p.views} `).join(''); const mainColHTML = `

Y Combinator Backed — Tweeks is a YC-funded company. Read our HN launch post »

Make websites work exactly how you want.

A browser extension that rewrites any webpage with plain English. Hide noise, add missing features, automate repeated tasks — and make it stick. No code, no learning curve.

Get the Extension » Get Started

${statsHTML}

FEATURED THIS WEEK

${featuredHTML}

TOP DOWNLOADS

${leaderboardHTML}

Rank	Tweek Name	Site	Downloads

COMMUNITY FORUM

General Discussion Talk about tweeks, browsers, and the web

${forumRows}

Topic	Replies	Views

`; return buildChrome(mainColHTML, ''); } // ----------------------------------------------------------------------- // Build the full retro HTML for homepage // ----------------------------------------------------------------------- function buildRetroHTML() { const css = buildRetroCSS(); const body = buildHomepageHTML(); return css + body; } // ----------------------------------------------------------------------- // ONBOARDING: Direct CSS injection approach // Instead of a shadow DOM clone, inject CSS into the real page so React // keeps full control of the DOM and interactivity works immediately. // ----------------------------------------------------------------------- function buildOnboardingCSS() { return ` /* Tweeks Retro Onboarding Styles */ body { background: #d4d0c8 !important; font-family: "Tahoma", "Verdana", Arial, sans-serif !important; } /* Hide the original header/footer chrome - we inject our own banner */ header.fixed { display: none !important; } footer.fixed { display: none !important; } /* Main content area - give it a retro page feel */ main { background: #fff !important; max-width: 760px !important; margin: 0 auto !important; padding: 16px 20px 80px 20px !important; border: 1px solid #808080 !important; box-shadow: 2px 2px 6px rgba(0,0,0,0.3) !important; min-height: calc(100vh - 120px) !important; padding-top: 16px !important; } /* Step label */ p.text-xs.font-medium.uppercase { font-family: "Tahoma", "Verdana", Arial, sans-serif !important; font-size: 10px !important; color: #666 !important; letter-spacing: 1px !important; background: none !important; -webkit-text-fill-color: #666 !important; animation: none !important; } /* Main headings - override the rainbow animation */ h1, h2, h3, h4 { font-family: "Times New Roman", Times, serif !important; color: #003399 !important; background: none !important; -webkit-text-fill-color: #003399 !important; animation: none !important; background-image: none !important; background-clip: unset !important; -webkit-background-clip: unset !important; } h2.text-3xl, h2.text-4xl { font-size: 22px !important; margin-bottom: 8px !important; color: #003399 !important; -webkit-text-fill-color: #003399 !important; } h3 { font-size: 13px !important; color: #003399 !important; -webkit-text-fill-color: #003399 !important; } h4 { font-size: 12px !important; color: #222 !important; -webkit-text-fill-color: #222 !important; } /* Body text */ p.text-lg, p.text-slate-500 { font-family: "Tahoma", "Verdana", Arial, sans-serif !important; font-size: 12px !important; color: #444 !important; line-height: 1.6 !important; } /* Site group cards (google.com, x.com etc) */ div.group\/site { background: #f0f4ff !important; border: 1px solid #7b9ecc !important; border-radius: 0 !important; padding: 8px !important; } /* Site group header */ div.group\/site > div.flex.items-center.gap-3.px-1 h3 { font-size: 12px !important; font-weight: bold !important; color: #003399 !important; -webkit-text-fill-color: #003399 !important; } /* Individual tweek item cards */ div.relative.flex.cursor-pointer.flex-col.rounded-xl { border-radius: 0 !important; border: 1px solid #bbb !important; background: #fff !important; padding: 6px 8px !important; margin-bottom: 4px !important; box-shadow: none !important; } div.relative.flex.cursor-pointer.flex-col.rounded-xl:hover { background: #e8f0fb !important; border-color: #7b9ecc !important; } /* Selected tweek item (dark ring = selected) */ div.relative.flex.cursor-pointer.flex-col.rounded-xl.ring-1.ring-slate-900\/20 { border: 1px solid #1a6fd4 !important; background: #eef4ff !important; } /* Tweek item title */ div.relative.flex.cursor-pointer.flex-col.rounded-xl h4 { font-family: "Tahoma", "Verdana", Arial, sans-serif !important; font-size: 11px !important; color: #222 !important; -webkit-text-fill-color: #222 !important; } /* Checkmark circle */ div.flex-shrink-0.flex.h-5.w-5.items-center.justify-center.rounded-full { border-radius: 2px !important; width: 16px !important; height: 16px !important; } /* Selected checkmark - XP blue */ div.flex-shrink-0.flex.h-5.w-5.items-center.justify-center.rounded-full.border-slate-900.bg-slate-900 { background: linear-gradient(to bottom, #4a9de8 0%, #1a6fd4 45%, #1560c0 50%, #2278e0 100%) !important; border-color: #1050a0 !important; } /* Unselected checkmark */ div.flex-shrink-0.flex.h-5.w-5.items-center.justify-center.rounded-full.border-slate-200 { background: #fff !important; border-color: #999 !important; } /* Primary action button (Continue with X tweeks) */ button.inline-flex.items-center { background: linear-gradient(to bottom, #4a9de8 0%, #1a6fd4 45%, #1560c0 50%, #2278e0 100%) !important; color: #fff !important; font-family: "Tahoma", "Verdana", Arial, sans-serif !important; font-size: 13px !important; font-weight: bold !important; padding: 7px 20px !important; border: 1px solid #1050a0 !important; border-radius: 3px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 1px 2px rgba(0,0,0,0.3) !important; text-shadow: 0 -1px 0 rgba(0,0,50,0.4) !important; transition: none !important; } button.inline-flex.items-center:hover { background: linear-gradient(to bottom, #5aade8 0%, #2a7fe4 45%, #2070d0 50%, #3288f0 100%) !important; } button.inline-flex.items-center:active { background: linear-gradient(to bottom, #1560c0 0%, #2278e0 50%, #4a9de8 100%) !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.4) !important; } /* Secondary / text button (start from scratch) */ button.cursor-pointer.text-sm { font-family: "Tahoma", "Verdana", Arial, sans-serif !important; font-size: 11px !important; color: #0000cc !important; text-decoration: underline !important; background: none !important; border: none !important; box-shadow: none !important; padding: 2px 0 !important; cursor: pointer !important; } button.cursor-pointer.text-sm:hover { color: #cc0000 !important; } /* Back button */ button.inline-flex.cursor-pointer.items-center.gap-1\\.5 { background: linear-gradient(to bottom, #f8f8f8 0%, #e0e0e0 45%, #d0d0d0 50%, #e8e8e8 100%) !important; color: #003399 !important; font-family: "Tahoma", "Verdana", Arial, sans-serif !important; font-size: 11px !important; font-weight: bold !important; padding: 4px 10px !important; border: 1px solid #999 !important; border-radius: 3px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.15) !important; transition: none !important; } button.inline-flex.cursor-pointer.items-center.gap-1\\.5:hover { background: linear-gradient(to bottom, #fff 0%, #eee 50%, #f5f5f5 100%) !important; } /* Privacy policy link */ footer a.text-xs { font-family: "Tahoma", "Verdana", Arial, sans-serif !important; font-size: 10px !important; color: #0000cc !important; } /* Grid layout for tweek cards */ div.grid.grid-cols-1 { gap: 10px !important; } /* Progress bar in header - hide original, we show our own */ div.h-1.w-full { display: none !important; } /* Retro banner injected at top */ #retro-onboarding-banner { background: #d4d0c8; font-family: "Tahoma", "Verdana", Arial, sans-serif; font-size: 12px; } #retro-onboarding-banner .retro-topbar { background: #003399; color: #fff; padding: 3px 10px; font-size: 11px; display: flex; justify-content: space-between; align-items: center; } #retro-onboarding-banner .retro-topbar a { color: #ffff99; text-decoration: none; } #retro-onboarding-banner .retro-topbar a:hover { text-decoration: underline; } #retro-onboarding-banner .retro-banner { background: linear-gradient(to bottom, #003399 0%, #0055cc 100%); padding: 10px 14px; border-bottom: 3px solid #ffcc00; display: flex; justify-content: space-between; align-items: center; } #retro-onboarding-banner .retro-banner-title { font-family: "Times New Roman", Times, serif; font-size: 22px; font-weight: bold; color: #fff; letter-spacing: 1px; } #retro-onboarding-banner .retro-banner-sub { font-size: 10px; color: #cce; margin-top: 2px; } #retro-onboarding-banner .retro-banner-cta a { display: inline-block; background: linear-gradient(to bottom, #ffe066 0%, #ffcc00 45%, #e6b800 50%, #ffd633 100%); color: #000; text-decoration: none; font-weight: bold; font-size: 11px; padding: 4px 12px; border: 1px solid #b38600; border-radius: 3px; } #retro-onboarding-banner .retro-navbar { background: linear-gradient(to bottom, #e8e8e8 0%, #d0d0d0 100%); border-bottom: 2px solid #999; padding: 3px 10px; font-size: 12px; } #retro-onboarding-banner .retro-navbar a { color: #003399; text-decoration: none; font-weight: bold; margin-right: 4px; } #retro-onboarding-banner .retro-navbar a:hover { text-decoration: underline; color: #cc0000; } #retro-onboarding-banner .retro-ticker { background: #fffbe6; border-top: 1px solid #e0c040; border-bottom: 1px solid #e0c040; padding: 2px 0; font-size: 11px; color: #554400; overflow: hidden; white-space: nowrap; } #retro-onboarding-banner .retro-ticker-inner { display: inline-block; animation: retro-ticker-scroll 28s linear infinite; padding-left: 100%; } @keyframes retro-ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } #retro-onboarding-banner .retro-breadcrumb { background: #f0f0f0; border-bottom: 1px solid #ccc; padding: 3px 10px; font-size: 11px; color: #555; max-width: 760px; margin: 0 auto; } #retro-onboarding-banner .retro-breadcrumb a { color: #003399; text-decoration: none; } #retro-onboarding-banner .retro-breadcrumb a:hover { text-decoration: underline; } #retro-onboarding-banner .retro-section-header { background: linear-gradient(to bottom, #4a9de8 0%, #1a6fd4 45%, #1560c0 50%, #2278e0 100%); color: #fff; font-size: 12px; font-weight: bold; padding: 4px 8px; text-shadow: 0 -1px 0 rgba(0,0,50,0.4); letter-spacing: 0.5px; max-width: 760px; margin: 0 auto; } #retro-onboarding-footer { background: #003399; color: #cce; font-size: 11px; padding: 6px 12px; text-align: center; border-top: 3px solid #ffcc00; line-height: 1.8; font-family: "Tahoma", "Verdana", Arial, sans-serif; } #retro-onboarding-footer a { color: #ffff99; text-decoration: none; } #retro-onboarding-footer a:hover { color: #fff; text-decoration: underline; } `; } function injectOnboardingRetroStyle() { if (onboardingStyleEl) return; onboardingStyleEl = document.createElement('style'); onboardingStyleEl.id = 'retro-onboarding-style'; onboardingStyleEl.textContent = buildOnboardingCSS(); document.head.appendChild(onboardingStyleEl); // Inject the retro banner above the page content injectOnboardingBanner(); } function injectOnboardingBanner() { if (onboardingBannerEl) return; const month = getCurrentMonth(); const designer = getBannerDesigner(); onboardingBannerEl = document.createElement('div'); onboardingBannerEl.id = 'retro-onboarding-banner'; onboardingBannerEl.innerHTML = `

☆ COMMUNITY: ${escHtml(designer)} designed our ${escHtml(month)} banner — thanks! • HOT: l33t_coder's "Share your best productivity tweeks!" has 31 replies • TIP: Did you know you can share tweeks with friends? • ONLINE: ${ONLINE_USERS.length} members browsing right now ☆

SETUP WIZARD — Get Started with Tweeks

`; // Insert before the body's first child document.body.insertBefore(onboardingBannerEl, document.body.firstChild); // Inject footer const footerEl = document.createElement('div'); footerEl.id = 'retro-onboarding-footer'; footerEl.innerHTML = ` Tweeks.io — Browser Modifications & Website Customization
© 2025 NextByte • Docs • Blog • Contact • Chrome Web Store `; document.body.appendChild(footerEl); } function removeOnboardingRetroStyle() { if (onboardingStyleEl) { onboardingStyleEl.remove(); onboardingStyleEl = null; } if (onboardingBannerEl) { onboardingBannerEl.remove(); onboardingBannerEl = null; } const footer = document.getElementById('retro-onboarding-footer'); if (footer) footer.remove(); } // ----------------------------------------------------------------------- // Shadow DOM overlay (homepage only) // ----------------------------------------------------------------------- function createOverlay() { if (hostEl) return; hostEl = document.createElement('div'); hostEl.id = 'retro-overlay-host'; hostEl.style.cssText = [ 'position:fixed', 'top:0', 'left:0', 'width:100vw', 'height:100vh', 'z-index:2147483646', 'overflow-y:auto', 'overflow-x:hidden', 'background:#d4d0c8' ].join(';'); shadowRoot = hostEl.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = buildRetroHTML(); // Handle anchor clicks inside shadow DOM for smooth scrolling shadowRoot.addEventListener('click', function (e) { const a = e.target.closest('a'); if (!a) return; const href = a.getAttribute('href'); if (href && href.startsWith('#')) { e.preventDefault(); const target = shadowRoot.getElementById(href.slice(1)); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } else { hostEl.scrollTo({ top: 0, behavior: 'smooth' }); } } }); document.documentElement.appendChild(hostEl); keepOverlayOnTop(); } function removeOverlay() { if (observer) { observer.disconnect(); observer = null; } if (hostEl) { hostEl.remove(); hostEl = null; shadowRoot = null; } } // Ensure the overlay stays on top and in the DOM function keepOverlayOnTop() { if (observer) observer.disconnect(); observer = new MutationObserver(() => { if (!overlayActive) return; if (!document.documentElement.contains(hostEl)) { document.documentElement.appendChild(hostEl); } if (hostEl.style.zIndex !== '2147483646') { hostEl.style.zIndex = '2147483646'; } }); observer.observe(document.documentElement, { childList: true, subtree: false }); } // ----------------------------------------------------------------------- // Menu command toggle // ----------------------------------------------------------------------- function updateMenuCommand() { if (toggleMenuId !== null) { GM_unregisterMenuCommand(toggleMenuId); } toggleMenuId = GM_registerMenuCommand( overlayActive ? 'Disable Retro Mode' : 'Enable Retro Mode', toggleOverlay ); } function toggleOverlay() { overlayActive = !overlayActive; if (overlayActive) { if (isOnboardingPage()) { injectOnboardingRetroStyle(); } else { createOverlay(); if (document.readyState !== 'loading') { refreshHomepageContent(); } } } else { if (isOnboardingPage()) { removeOnboardingRetroStyle(); } else { removeOverlay(); } } updateMenuCommand(); } // ----------------------------------------------------------------------- // Homepage content refresh // ----------------------------------------------------------------------- function refreshHomepageContent() { if (!shadowRoot) return; shadowRoot.innerHTML = buildRetroHTML(); shadowRoot.addEventListener('click', function (e) { const a = e.target.closest('a'); if (!a) return; const href = a.getAttribute('href'); if (href && href.startsWith('#')) { e.preventDefault(); const target = shadowRoot.getElementById(href.slice(1)); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } else { hostEl.scrollTo({ top: 0, behavior: 'smooth' }); } } }); } // ----------------------------------------------------------------------- // Init // ----------------------------------------------------------------------- function init() { if (isOnboardingPage()) { // For onboarding: inject CSS directly into the real page. // We wait for DOMContentLoaded so body exists, but the CSS // injection is fast and React content is untouched. if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', injectOnboardingRetroStyle); } else { injectOnboardingRetroStyle(); } } else { // For homepage: use shadow DOM overlay createOverlay(); updateMenuCommand(); if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', refreshHomepageContent); } else { refreshHomepageContent(); } } updateMenuCommand(); } init(); // ----------------------------------------------------------------------- // NextByte reporting // ----------------------------------------------------------------------- setTimeout(() => { window.postMessage({ type: 'NEXTBYTE_SCRIPT_EXECUTED', requestId: 'onboarding-generation' }, window.location.origin); window.postMessage({ type: 'NEXTBYTE_SCRIPT_EXECUTED', requestId: 'onboarding-update' }, window.location.origin); console.log('[NextByte Onboarding] Script execution reported (update mode)'); }, 200); })();