1<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="/blackBg128.png" type="image/png"><link rel="canonical" href="https://suprswitch.xyz/"><meta name="robots" content="index, follow, max-image-preview:large"><meta name="theme-color" content="#000000"><title>suprswitch â switch google accounts with a keystroke</title><meta name="description" content="stop clicking the avatar. hold a key, press a number, and you're in your other google account â same tab, no menu, under a second. a free, private extension for chrome & chromium browsers."><meta property="og:type" content="website"><meta property="og:url" content="https://suprswitch.xyz/"><meta property="og:title" content="suprswitch â switch google accounts with a keystroke"><meta property="og:description" content="stop clicking the avatar. hold a key, press a number, and you're in your other google account â same tab, no menu, under a second. a free, private extension for chrome & chromium browsers."><meta property="og:image" content="https://suprswitch.xyz/banner.webp"><meta property="og:image:type" content="image/webp"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:image:alt" content="suprswitch â switch google accounts with a keystroke"><meta property="og:site_name" content="suprswitch"><meta property="og:locale" content="en_US"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="suprswitch â switch google accounts with a keystroke"><meta name="twitter:description" content="stop clicking the avatar. hold a key, press a number, and you're in your other google account â same tab, no menu, under a second. a free, private extension for chrome & chromium browsers."><meta name="twitter:image" content="https://suprswitch.xyz/banner.webp"><meta name="twitter:image:alt" content="suprswitch â switch google accounts with a keystroke"><link rel="preload" href="/fonts/DepartureMono-Regular.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/fonts/inter-latin-wght-normal.woff2" as="font" type="font/woff2" crossorigin>
1<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://suprswitch.xyz/#organization","name":"suprswitch","url":"https://suprswitch.xyz","logo":{"@type":"ImageObject","url":"https://suprswitch.xyz/blackBg128.png"},"founder":{"@type":"Person","name":"Hamza"},"sameAs":["https://chromewebstore.google.com/detail/suprswitch-account-switch/mmnnelfhickmgpdienobikocjopndjeg","https://addons.mozilla.org/firefox/addon/suprswitch-account-switcher/"]},{"@type":["SoftwareApplication","WebApplication"],"@id":"https://suprswitch.xyz/#software","name":"suprswitch","description":"stop clicking the avatar. hold a key, press a number, and you're in your other google account â same tab, no menu, under a second. a free, private extension for chrome & chromium browsers.","applicationCategory":"BrowserApplication","operatingSystem":"Chrome, ChromeOS, Windows, macOS, Linux","browserRequirements":"Requires Google Chrome or a Chromium-based browser","url":"https://suprswitch.xyz","image":"https://suprswitch.xyz/banner.webp","installUrl":"https://chromewebstore.google.com/detail/suprswitch-account-switch/mmnnelfhickmgpdienobikocjopndjeg","downloadUrl":"https://chromewebstore.google.com/detail/suprswitch-account-switch/mmnnelfhickmgpdienobikocjopndjeg","featureList":["Switch Google accounts with a keyboard shortcut (Alt/Option, Control, or Shift + 0â9)","On-screen account switcher â cycle through your accounts by name and photo, app-switcher style","Works across every google.com app â Gmail, Drive, Docs, Sheets, Calendar, Meet, Gemini, and more","Switches the account in the current tab in under a second â no avatar menu, no new tab","Set a default account so typed or bookmarked Google links always open the right one","Configurable modifier key and starting account number","Private by design â the extension has no tracking or analytics; account names and photos are read on-device and never sent anywhere","Free, with no sign-up"],"isAccessibleForFree":true,"publisher":{"@id":"https://suprswitch.xyz/#organization"},"offers":{"@type":"Offer","price":"0","priceCurrency":"USD","availability":"https://schema.org/InStock"}},{"@type":"FAQPage","@id":"https://suprswitch.xyz/#faq","mainEntity":[{"@type":"Question","name":"does it cost anything?","acceptedA
1nswer":{"@type":"Answer","text":"no â it's free, with no account and no sign-up."}},{"@type":"Question","name":"is my data safe?","acceptedAnswer":{"@type":"Answer","text":"yes. the extension reads your account names and photos on your device and sends them nowhere â it has no tracking or analytics at all. (this website uses a cookieless, privacy-friendly analytics tool â no cookies, no personal data about you.)"}},{"@type":"Question","name":"which key do i press?","acceptedAnswer":{"@type":"Answer","text":"your pick â alt/option, control or shift â then a number 0â9. change it anytime in the popup."}},{"@type":"Question","name":"can i pick an account from a list?","acceptedAnswer":{"@type":"Answer","text":"yes. hold your shortcut key and tap the backtick ` (the key above tab) to pop up a switcher, then cycle through your accounts â hold, tap, release â like your os app switcher. or just press a number to jump."}},{"@type":"Question","name":"does it work in every google app?","acceptedAnswer":{"@type":"Answer","text":"if it lives on google.com, yes. it switches the account in the url, so new google apps work without an update."}},{"@type":"Question","name":"which browsers does it work in?","acceptedA
1nswer":{"@type":"Answer","text":"chrome and chromium browsers (edge, brave, opera, arc, vivaldi, comet) from the chrome web store, and firefox and firefox-based browsers (zen, librewolf, waterfox) from firefox add-ons. the install button picks the right store for your browser."}},{"@type":"Question","name":"how is it different from chrome's avatar menu?","acceptedAnswer":{"@type":"Answer","text":"the avatar menu takes several clicks and opens a new tab. suprswitch jumps to the account in the same tab, from the keyboard, in under a second."}}]}]}</script>
1<!-- Analytics -->
1<script defer src="https://assets.onedollarstats.com/stonks.js"></script>
1<script> 2 // UTM cleanup. OneDollarStats captures UTM params only on the first 3 // pageview of a session and tags every later event in that session from 4 // them â so once that pageview has fired, the params have done their job. 5 // A few seconds later we strip them from the URL for a clean address bar, 6 // clean shares, and a clean canonical, WITHOUT a reload: replaceState 7 // fires no new pageview, so it can't create a duplicate hit or re-trigger 8 // capture. We wait until stonks.js has loaded (window.stonks) before 9 // clearing, so a slow connection can't wipe the params before the pageview 10 // that reads them; if analytics never loads there's nothing to capture, so 11 // we clean up anyway after a short cap. 12 (function () { 13 try { 14 var hasUtm = function () { 15 var has = false; 16 new URL(window.location.href).searchParams.forEach(function (_, k) { 17 if (k.toLowerCase().indexOf("utm_") === 0) has = true; 18 }); 19 return has; 20 }; 21 if (!hasUtm()) return; 22 23 function strip() { 24 var u = new URL(window.location.href); 25 var keys = []; 26 u.searchParams.forEach(function (_, k) { 27 if (k.toLowerCase().indexOf("utm_") === 0) keys.push(k); 28 }); 29 for (var i = 0; i < keys.length; i++) u.searchParams.delete(keys[i]); 30 var qs = u.searchParams.toString(); 31 history.replaceState( 32 history.state, 33 "", 34 u.pathname + (qs ? "?" + qs : "") + u.hash, 35 ); 36 } 37 38 // ~3.5s after load, once analytics is present. Poll a few more seconds 39 // if it's still loading, then give up waiting and clean up regardless. 40 var waited = 0; 41 function tick() { 42 if (window.stonks || waited >= 24) strip(); 43 else { 44 waited++; 45 setTimeout(tick, 250); 46 } 47 } 48 setTimeout(tick, 3500); 49 } catch (e) {} 50 })(); 51 </script>
51<script> 52 // Apply the saved theme before first paint (no flash). Default: follow OS. 53 (function () { 54 try { 55 var t = localStorage.getItem("theme") || "system"; 56 var dark = 57 t === "dark" || 58 (t === "system" && 59 matchMedia("(prefers-color-scheme: dark)").matches); 60 document.documentElement.classList.toggle("dark", dark); 61 } catch (e) {} 62 })(); 63 </script>
63<script> 64 // Flag macOS before first paint so ModKey can show "option" not "alt". 65 (function () { 66 try { 67 var p = 68 (navigator.userAgentData && navigator.userAgentData.platform) || 69 navigator.platform || 70 navigator.userAgent || 71 ""; 72 if (/mac/i.test(p)) document.documentElement.classList.add("is-mac"); 73 } catch (e) {} 74 })(); 75 </script>
75<script> 76 // The demo (a React island) broadcasts whichever modifier the visitor 77 // picks; mirror it into every <ModKey> on the page. 78 window.addEventListener("suprswitch:mod", function (e) { 79 // Persist the pick so a late-hydrating island (the switcher demo, below 80 // the fold) can replay it on mount and match the rest of the page. 81 window.__ssMod = e.detail; 82 var els = document.querySelectorAll(".mod-pick"); 83 for (var i = 0; i < els.length; i++) els[i].textContent = e.detail; 84 document.documentElement.classList.add("mod-picked"); 85 }); 86 </script>
86<link rel="stylesheet" href="/_astro/index.CqTripge.css">
86<script type="module" src="/_astro/page.DSgOZ_si.js"></script>
vendor: 1 bytes, line 86
86
87<script> 88 const style = document.createElement('style'); 89 style.textContent = `html.lenis, 90html.lenis body { 91 height: auto; 92} 93 94.lenis.lenis-smooth { 95 scroll-behavior: auto !important; 96} 97 98.lenis.lenis-smooth [data-lenis-prevent] { 99 overscroll-behavior: contain; 100} 101 102.lenis.lenis-stopped { 103 overflow: hidden; 104} 105 106.lenis.lenis-scrolling iframe { 107 pointer-events: none; 108}`; 109 document.head.appendChild(style); 110 </script>
110</head> <body class="min-h-dvh bg-bg font-sans text-fg-strong antialiased"> <header class="sticky top-0 z-50 border-b border-border bg-bg/70 backdrop-blur"> <nav class="mx-auto flex h-16 max-w-6xl items-center justify-between px-5 sm:px-8"> <a href="/" class="group flex items-center gap-2"> <img alt="suprswitch" class="size-6 transition-transform duration-500 group-hover:rotate-180" height="24px" loading="eager" src="/iconWhite256.png" title="suprswitch" width="24px"> <span class="font-sans text-lg text-fg">suprswitch</span> </a> <!-- The store link + browser name default to Chrome (SSG) and are tailored to the 111visitor's browser client-side by the script in Layout.astro (data-cta hooks). --><a href="https://chromewebstore.google.com/detail/suprswitch-account-switch/mmnnelfhickmgpdienobikocjopndjeg" data-cta data-cta-firefox="https://addons.mozilla.org/firefox/addon/suprswitch-account-switcher/" data-s-event="Install Click" data-s-event-props="location=nav" target="_blank" rel="noopener" class="inline-flex items-center justify-center rounded-lg bg-accent px-5 py-2.5 font-sans text-sm font-medium text-accent-fg transition-all hover:scale-[1.02] hover:opacity-90 active:scale-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fg px-4 py-2"> <span data-cta-label>+ add to chrome</span> </a> </nav> </header> <main> <section class="mx-auto max-w-6xl px-5 pt-14 pb-20 sm:px-8 sm:pt-20 sm:pb-28"> <div class="mx-auto flex max-w-3xl flex-col items-center text-center"> <p class="font-sans text-xs tracking-wider text-fg-muted"> 112free · chrome, firefox & more · zero data leaves your device 113</p> <h1 class="mt-5 font-human text-4xl leading-[1.05] font-semibold tracking-tight text-fg sm:text-6xl"> 114stop clicking the avatar to switch google accounts. 115</h1> <p class="mt-6 max-w-xl font-human text-lg text-fg-muted sm:text-xl"> 116hold <span class="text-fg-strong"><span class="mod-win">alt</span><span class="mod-mac">option</span><span class="mod-pick"></span></span>, press a number, and 117 you're in 118 your other account â same tab, no menu, under a second. 119</p> <div class="mt-8 flex flex-col items-center gap-3"> <!-- The store link + browser name default to Chrome (SSG) and are tailored to the 120visitor's browser client-side by the script in Layout.astro (data-cta hooks). --><a href="https://chromewebstore.google.com/detail/suprswitch-account-switch/mmnnelfhickmgpdienobikocjopndjeg" data-cta data-cta-firefox="https://addons.mozilla.org/firefox/addon/suprswitch-account-switcher/" data-s-event="Install Click" data-s-event-props="location=hero" target="_blank" rel="noopener" class="inline-flex items-center justify-center rounded-lg bg-accent px-5 py-2.5 font-sans text-sm font-medium text-accent-fg transition-all hover:scale-[1.02] hover:opacity-90 active:scale-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fg px-6 py-3 text-base"> <span data-cta-label>+ add to chrome</span> </a> <span class="font-sans text-xs text-fg-muted"> 121no sign-up · works in every google app 122</span> </div> </div> <div class="mt-14 flex flex-col items-center sm:mt-16"> <p class="mb-5 flex flex-wrap items-center justify-center gap-2 font-sans text-sm text-fg-muted"> <span>â go on â press</span> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] h-7 px-2 text-xs"><span class="mod-win">alt</span><span class="mod-mac">option</span><span class="mod-pick"></span></span> <span class="text-fg-faint">+</span> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] size-7 text-xs">1</span> <span>right now</span> </p> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style>
122<script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();</script>
122<script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script>
122<astro-island uid="10BfNO" prefix="r2" component-url="/_astro/InteractiveDemo.B9hWLUJL.js" component-export="default" renderer-url="/_astro/client.Bz692-Ao.js" props="{}" ssr client="load" opts="{"name":"InteractiveDemo","value":true}" await-children><div class="w-full max-w-xl overflow-hidden rounded-xl border border-border-strong bg-surface font-sans shadow-[0_24px_60px_-20px_#000000]"><div class="flex h-10 items-center gap-3 border-b border-border-strong bg-surface-2/80 px-3"><div class="flex items-center gap-1.5"><span class="size-2.5 rounded-full bg-surface-4"></span><span class="size-2.5 rounded-full bg-surface-4"></span><span class="size-2.5 rounded-full bg-surface-4"></span></div><div class="flex h-6 flex-1 items-center gap-2 truncate rounded-md border border-border-strong bg-bg/50 px-2 text-xs text-fg-muted"><span class="text-fg-faint">â</span><span class="truncate">mail.google.com/mail/u/<span class="text-fg">0</span>/</span></div><span class="grid size-6 shrink-0 place-items-center rounded bg-surface-3 text-xs text-fg-strong">M</span></div><div class="flex items-center gap-4 px-5 pt-5 sm:px-6"><span class="grid size-14 shrink-0 place-items-center rounded-full border border-border-strong-2 bg-surface-3 font-human text-lg text-fg transition-all duration-300">JL</span><div class="min-w-0 flex-1"><p class="text-[11px] tracking-wider text-fg-muted uppercase">signed in as</p><p class="truncate font-human text-lg leading-tight text-fg">Jordan Lee</p><p class="truncate text-xs text-fg-muted">[email protected]</p></div><span class="shrink-0 self-start rounded-full border border-border-strong-2 px-2 py-0.5 text-[11px] text-fg-muted">work</span></div><hr class="mx-5 my-5 border-border-strong sm:mx-6"/><div class="px-5 pb-5 sm:px-6"><p class="mb-3 text-[11px] tracking-wider text-fg-muted uppercase">press to switch<span class="ml-0.5 inline-block w-1.5 animate-blink text-fg-subtle">â</span></p><div class="flex flex-nowrap items-center gap-1.5 overflow-x-auto py-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"><button type="button" class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] outline-none transition-[transform,box-shadow,background-color,color] duration-100 focus-visible:outline focus-visible:outline-fg focus-visible:outline-offset-2 hover:bg-surface-4 hover:text-fg active:translate-y-px active:shadow-[inset_0_1px_0_0_#ffffff1f,0_1px_2px_0_#0000008c] h-9 shrink-0 px-2.5 text-[11px]">control</button><button type="button" class="select-none rounded-lg border font-sans leading-none border-accent bg-accent text-accent-fg shadow-[inset_0_1px_0_0_#ffffffcc,0_1px_0_0_#71717a,0_2px_4px_0_#0000008c] outline-none transition-[transform,box-shadow,background-color,color] duration-100 focus-visible:outline focus-visible:outline-fg focus-visible:outline-offset-2 h-9 shrink-0 px-2.5 text-[11px]">alt</button><button type="button" class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] outline-none transition-[transform,box-shadow,background-color,color] duration-100 focus-visible:outline focus-visible:outline-fg focus-visible:outline-offset-2 hover:bg-surface-4 hover:text-fg active:translate-y-px active:shadow-[inset_0_1px_0_0_#ffffff1f,0_1px_2px_0_#0000008c] h-9 shrink-0 px-2.5 text-[11px]">shift</button><span class="shrink-0 px-0.5 text-fg-faint">+</span><button type="button" class="select-none rounded-lg border font-sans leading-none border-accent bg-accent text-accent-fg shadow-[inset_0_1px_0_0_#ffffffcc,0_1px_0_0_#71717a,0_2px_4px_0_#0000008c] outline-none transition-[transform,box-shadow,background-color,color] duration-100 focus-visible:outline focus-visible:outline-fg focus-visible:outline-offset-2 size-9 shrink-0 text-sm" aria-label="account 0: work">0</button><button type="button" class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] outline-none transition-[transform,box-shadow,background-color,color] duration-100 focus-visible:outline focus-visible:outline-fg focus-visible:outline-offset-2 hover:bg-surface-4 hover:text-fg active:translate-y-
122px active:shadow-[inset_0_1px_0_0_#ffffff1f,0_1px_2px_0_#0000008c] size-9 shrink-0 text-sm" aria-label="account 1: personal">1</button><button type="button" class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] outline-none transition-[transform,box-shadow,background-color,color] duration-100 focus-visible:outline focus-visible:outline-fg focus-visible:outline-offset-2 hover:bg-surface-4 hover:text-fg active:translate-y-px active:shadow-[inset_0_1px_0_0_#ffffff1f,0_1px_2px_0_#0000008c] size-9 shrink-0 text-sm" aria-label="account 2: side project">2</button><button type="button" class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] outline-none transition-[transform,box-shadow,background-color,color] duration-100 focus-visible:outline focus-visible:outline-fg focus-visible:outline-offset-2 hover:bg-surface-4 hover:text-fg active:translate-y-px active:shadow-[inset_0_1px_0_0_#ffffff1f,0_1px_2px_0_#0000008c] size-9 shrink-0 text-sm" aria-label="account 3: client">3</button></div><p class="mt-4 text-[11px] text-fg-muted">â this demo obeys your keyboard â hold<!-- --> <span class="text-fg-muted">alt</span> and press a number.</p></div></div><!--astro:end--></astro-island> <div class="mt-5 flex flex-col items-center gap-1 text-fg-subtle"> <svg viewBox="0 0 48 56" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" class="h-11 w-9 animate-[arrow-bob_1.8s_ease-in-out_infinite]" aria-hidden="true"> <path d="M24 53 C 11 41, 13 22, 25 7"></path> <path d="M15 16 L 25 5 L 35 15"></path> </svg> <p class="font-sans text-xs text-fg-muted italic">give it a try</p> </div> </div> </section> <section class="border-t border-border"> <div class="reveal mx-auto max-w-6xl px-5 py-20 sm:px-8 sm:py-28"> <p class="font-sans text-xs tracking-wider text-fg-muted uppercase"> 123the avatar dance 124</p> <h2 class="mt-4 max-w-2xl font-human text-3xl leading-tight font-semibold tracking-tight text-fg sm:text-4xl"> 125four clicks and a new tab. every single switch. 126</h2> <p class="mt-4 max-w-xl font-human text-lg text-fg-muted"> 127you do it more than you think â and never noticed the tax. 128</p> <div class="mt-10 grid gap-4 sm:grid-cols-2"> <div class="rounded-xl border border-border-strong bg-surface p-6 transition-colors duration-200 hover:border-border-strong-2"> <p class="font-sans text-xs tracking-wider text-fg-muted uppercase"> 129the old way 130</p> <ol class="mt-4 space-y-2 font-sans text-sm text-fg-muted"> <li>1 · click your avatar</li> <li>2 · wait for the menu</li> <li>3 · hunt for the account</li> <li>4 · click it</li> <li>5 · wait for a new tab</li> <li class="text-fg-muted">â¦lose your place</li> </ol> <p class="mt-5 font-human text-sm text-fg-muted"> 131~4 clicks · a new tab · every time 132</p> </div> <div class="rounded-xl border border-border-strong-2 bg-surface-2 p-6 transition-colors duration-200 hover:border-border-strong-2"> <p class="font-sans text-xs tracking-wider text-fg-muted uppercase"> 133suprswitch 134</p> <div class="mt-4 flex flex-wrap items-center gap-2"> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] h-9 px-3 text-sm"><span class="mod-win">alt</span><span class="mod-mac">option</span><span class="mod-pick"></span></span> <span class="text-fg-faint">+</span> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] size-9 text-sm">1</span> <span class="ml-1 text-fg-faint">â</span> <span class="font-human text-sm text-fg">you're there.</span> </div> <p class="mt-5 font-human text-sm text-fg-muted"> 135two keys · same tab · under a second 136</p> <p class="mt-12 font-sans text-xs text-fg-muted"> 137now do it 20 times a day. that adds up. 138</p> </div> </div> </div> </section> <section class="border-t border-border"> <div class="reveal mx-auto max-w-6xl px-5 py-20 sm:px-8 sm:py-28"> <div class="grid items-center gap-12 sm:grid-cols-2 sm:gap-16"> <div> <p class="font-sans text-xs tracking-wider text-fg-muted uppercase"> 139learn it once 140</p> <h2 class="mt-4 font-human text-3xl leading-tight font-semibold tracking-tight text-fg sm:text-4xl"> 141then never think about it again. 142</h2> <p class="mt-4 max-w-md font-human text-lg text-fg-muted"> 143your fingers pick it up in an afternoon, and switching stops being a 144 task. one modifier, one number â that's the whole thing. 145</p> </div> <div class="flex flex-col gap-3"> <div class="flex items-center gap-3 rounded-xl border border-border-strong bg-surface px-5 py-4 transition-colors duration-200 hover:border-border-strong-2"> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] h-9 px-3 text-sm"><span class="mod-win">alt</span><span class="mod-mac">option</span><span class="mod-pick"></span></span> <span class="text-fg-faint">+</span> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] size-9 text-sm">1</span> <span class="ml-2 text-fg-faint">â</span> <span class="font-human text-base text-fg">work</span> </div><div class="flex items-center gap-3 rounded-xl border border-border-strong bg-surface px-5 py-4 transition-colors duration-200 hover:border-border-strong-2"> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] h-9 px-3 text-sm"><span class="mod-win">alt</span><span class="mod-mac">option</span><span class="mod-pick"></span></span> <span class="text-fg-faint">+</span> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] size-9 text-sm">2</span> <span class="ml-2 text-fg-faint">â</span> <span class="font-human text-base text-fg">personal</span> </div><div class="flex items-center gap-3 rounded-xl border border-border-strong bg-surface px-5 py-4 transition-colors duration-200 hover:border-border-strong-2"> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] h-9 px-3 text-sm"><span class="mod-win">alt</span><span class="mod-mac">option</span><span class="mod-pick"></span></span> <span class="text-fg-faint">+</span> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] size-9 text-sm">3</span> <span class="ml-2 text-fg-faint">â</span> <span class="font-human text-base text-fg">the side project</span> </div> </div> </div> </div> </section> <section class="border-t border-border"> <div class="reveal mx-auto max-w-6xl px-5 py-20 sm:px-8 sm:py-28"> <div class="grid items-center gap-12 sm:grid-cols-2 sm:gap-16"> <div> <p class="font-sans text-xs tracking-wider text-fg-muted uppercase"> 146switch by who, not what 147</p> <h2 class="mt-4 font-human text-3xl leading-tight font-semibold tracking-tight text-fg sm:text-4xl"> 148you don't have a <span class="font-sans text-fg-subtle">/u/2</span>. 149 you have a life. 150</h2> <p class="mt-4 max-w-md font-human text-lg text-fg-muted"> 151every other switcher makes you memorize indexes. suprswitch reads each 152 account's name and photo from google â on your device â and shows you 153<span class="text-fg-strong">people</span>. 154</p> <p class="mt-4 max-w-md font-human text-lg text-fg-muted"> 155pop the switcher with your shortcut key and backtick (`), then cycle 156 through your accounts like your os app switcher â hold, tap, release. 157<span class="text-fg-strong">try it â</span> </p> </div>
157<script>(()=>{var a=(s,i,o)=>{let r=async()=>{await(await s())()},t=typeof i.value=="object"?i.value:void 0,c={rootMargin:t==null?void 0:t.rootMargin},n=new IntersectionObserver(e=>{for(let l of e)if(l.isIntersecting){n.disconnect(),r();break}},c);for(let e of o.children)n.observe(e)};(self.Astro||(self.Astro={})).visible=a;window.dispatchEvent(new Event("astro:visible"));})();</script>
157<astro-island uid="Z2gRKXx" prefix="r3" component-url="/_astro/SwitcherDemo.W8j_NsFn.js" component-export="default" renderer-url="/_astro/client.Bz692-Ao.js" props="{}" ssr client="visible" opts="{"name":"SwitcherDemo","value":true}" await-children><div class="w-full overflow-hidden rounded-xl border bg-surface p-2 transition-colors border-border-strong"><div class="flex items-center justify-between px-3 py-2.5"><span class="font-sans text-[10px] tracking-widest text-fg-subtle uppercase">switch account</span><div class="flex items-center gap-1"><span class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] inline-flex items-center justify-center h-5 px-1.5 text-[9px]">alt</span><span class="font-sans text-[10px] text-fg-faint">+</span><span class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] inline-flex items-center justify-center size-5 text-[9px]">`</span></div></div><button type="button" aria-pressed="true" class="flex w-full items-center gap-3 rounded-lg px-3 py-3 text-left transition-colors bg-surface-3"><span class="grid size-9 shrink-0 place-items-center rounded-full border border-border-strong-2 bg-surface-3 font-human text-xs text-fg">JL</span><div class="min-w-0 flex-1"><p class="truncate font-human text-sm text-fg">work</p><p class="truncate font-sans text-xs text-fg-muted">[email protected]</p></div><span class="size-1.5 shrink-0 rounded-full bg-accent"></span><span class="select-none rounded-lg border font-sans leading-none border-accent bg-accent text-accent-fg shadow-[inset_0_1px_0_0_#ffffffcc,0_1px_0_0_#71717a,0_2px_4px_0_#0000008c] inline-flex items-center justify-center size-7 text-xs">0</span></button><button type="button" aria-pressed="false" class="flex w-full items-center gap-3 rounded-lg px-3 py-3 text-left transition-colors hover:bg-surface-2"><span class="grid size-9 shrink-0 place-items-center rounded-full border border-border-strong-2 bg-surface-3 font-human text-xs text-fg">JL</span><div class="min-w-0 flex-1"><p class="truncate font-human text-sm text-fg">personal</p><p class="truncate font-sans text-xs text-fg-muted">[email protected]</p></div><span class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] inline-flex items-center justify-center size-7 text-xs">1</span></button><button type="button" aria-pressed="false" class="flex w-full items-center gap-3 rounded-lg px-3 py-3 text-left transition-colors hover:bg-surface-2"><span class="grid size-9 shrink-0 place-items-center rounded-full border border-border-strong-2 bg-surface-3 font-human text-xs text-fg">JI</span><div class="min-w-0 flex-1"><p class="truncate font-human text-sm text-fg">side project</p><p class="truncate font-sans text-xs text-fg-muted">[email protected]</p></div><span class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] inline-flex items-center justify-center size-7 text-xs">2</span></button><button type="button" aria-pressed="false" class="flex w-full items-center gap-3 rounded-lg px-3 py-3 text-left transition-colors hover:bg-surface-2"><span class="grid size-9 shrink-0 place-items-center rounded-full border border-border-strong-2 bg-surface-3 font-human text-xs text-fg">JL</span><div class="min-w-0 flex-1"><p class="truncate font-human text-sm text-fg">client</p><p class="truncate font-sans text-xs text-fg-muted">[email protected]</p></div><span class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] inline-flex items-center justify-center size-7 text-xs">3</span></button><p class="px-3 pt-2.5 pb-1 font-sans text-[11px] text-fg-faint">hold <span class="text-fg-muted">alt</span>, tap ` to cycle · release to switch</p></div><!--astro:end--></astro-island> </div> </div> </section> <section class="border-t border-border"> <div class="reveal mx-auto max-w-6xl px-5 py-20 sm:px-8 sm:py-28"> <div class="grid gap-4 sm:grid-cols-2"> <div class="rounded-xl border border-border-strong bg-surface p-6 transition duration-200 hover:-translate-y-0.5 hover:border-border-strong-2 hover:bg-surface-2"> <h3 class="font-sans text-base text-fg">every google app, automatically</h3> <p class="mt-3 font-human text-[15px] leading-relaxed text-fg-muted"> gmail, drive, docs, calendar, meet, gemini, messages, maps⦠it switches the account right in the page's url, so even apps it's never seen just work. nothing to maintain. </p> </div><div class="rounded-xl border border-border-strong bg-surface p-6 transition duration-200 hover:-translate-y-0.5 hover:border-border-strong-2 hover:bg-surface-2"> <h3 class="font-sans text-base text-fg">always the right account</h3> <p class="mt-3 font-human text-[15px] leading-relaxed text-fg-muted"> set a default, and every google link opens the account you actually meant. no more âugh, wrong accountâ the moment a page loads. </p> </div><div class="rounded-xl border border-border-strong bg-surface p-6 transition duration-200 hover:-translate-y-0.5 hover:border-border-strong-2 hover:bg-surface-2"> <h3 class="font-sans text-base text-fg">private, full stop</h3> <p class="mt-3 font-human text-[15px] leading-relaxed text-fg-muted"> no account, no sign-up, no ad networks. your account names and photos are read locally and sent nowhere â the extension tracks nothing and phones home to no one. </p> </div><div class="rounded-xl border border-border-strong bg-surface p-6 transition duration-200 hover:-translate-y-0.5 hover:border-border-strong-2 hover:bg-surface-2"> <h3 class="font-sans text-base text-fg">one second, same tab</h3> <p class="mt-3 font-human text-[15px] leading-relaxed text-fg-muted"> it switches the tab you're already on. no fresh window, no lost draft, no waiting for a page you didn't want. </p> </div> </div> <div class="mt-12 text-center"> <p class="font-sans text-xs tracking-wider text-fg-muted uppercase"> 158works everywhere you're signed in 159</p> <div class="mt-5 flex flex-wrap justify-center gap-2"> <span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> gmail </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> drive </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> docs </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> sheets </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> slides </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> calendar </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> meet </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> gemini </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> messages </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> maps </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> keep </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> photos </span> </div> <p class="mt-5 font-sans text-xs text-fg-muted"> 160if it's a google.com app, it works â no per-app setup. 161</p> </div> </div> </section> <section class="border-t border-border"> <div class="reveal mx-auto max-w-3xl px-5 py-20 sm:px-8 sm:py-28"> <h2 class="font-human text-3xl leading-tight font-semibold tracking-tight text-fg sm:text-4xl"> 162questions, answered. 163</h2> <div class="mt-8 divide-y divide-border border-y border-border">
163 <details class="group" data-faq-q="does it cost anything?"> <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-5 font-sans text-base text-fg-strong transition-colors hover:text-fg"> does it cost anything? <span class="text-fg-faint transition-transform group-open:rotate-45"> 164+ 165</span> </summary> <p class="pb-5 font-human text-[15px] leading-relaxed text-fg-muted"> no â it's free, with no account and no sign-up. </p> </details><details class="group" data-faq-q="is my data safe?"> <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-5 font-sans text-base text-fg-strong transition-colors hover:text-fg"> is my data safe? <span class="text-fg-faint transition-transform group-open:rotate-45"> 166+ 167</span> </summary> <p class="pb-5 font-human text-[15px] leading-relaxed text-fg-muted"> yes. the extension reads your account names and photos on your device and sends them nowhere â it has no tracking or analytics at all. (this website uses a cookieless, privacy-friendly analytics tool â no cookies, no personal data about you.) </p> </details><details class="group" data-faq-q="which key do i press?"> <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-5 font-sans text-base text-fg-strong transition-colors hover:text-fg"> which key do i press? <span class="text-fg-faint transition-transform group-open:rotate-45"> 168+ 169</span> </summary> <p class="pb-5 font-human text-[15px] leading-relaxed text-fg-muted"> your pick â alt/option, control or shift â then a number 0â9. change it anytime in the popup. </p> </details><details class="group" data-faq-q="can i pick an account from a list?"> <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-5 font-sans text-base text-fg-strong transition-colors hover:text-fg"> can i pick an account from a list? <span class="text-fg-faint transition-transform group-open:rotate-45"> 170+ 171</span> </summary> <p class="pb-5 font-human text-[15px] leading-relaxed text-fg-muted"> yes. hold your shortcut key and tap the backtick ` (the key above tab) to pop up a switcher, then cycle through your accounts â hold, tap, release â like your os app switcher. or just press a number to jump. </p> </details><details class="group" data-faq-q="does it work in every google app?"> <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-5 font-sans text-base text-fg-strong transition-colors hover:text-fg"> does it work in every google app? <span class="text-fg-faint transition-transform group-open:rotate-45"> 172+ 173</span> </summary> <p class="pb-5 font-human text-[15px] leading-relaxed text-fg-muted"> if it lives on google.com, yes. it switches the account in the url, so new google apps work without an update. </p> </details><details class="group" data-faq-q="which browsers does it work in?"> <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-5 font-sans text-base text-fg-strong transition-colors hover:text-fg"> which browsers does it work in? <span class="text-fg-faint transition-transform group-open:rotate-45"> 174+ 175</span> </summary> <p class="pb-5 font-human text-[15px] leading-relaxed text-fg-muted">
175 chrome and chromium browsers (edge, brave, opera, arc, vivaldi, comet) from the chrome web store, and firefox and firefox-based browsers (zen, librewolf, waterfox) from firefox add-ons. the install button picks the right store for your browser. </p> </details><details class="group" data-faq-q="how is it different from chrome's avatar menu?"> <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-5 font-sans text-base text-fg-strong transition-colors hover:text-fg"> how is it different from chrome's avatar menu? <span class="text-fg-faint transition-transform group-open:rotate-45"> 176+ 177</span> </summary> <p class="pb-5 font-human text-[15px] leading-relaxed text-fg-muted"> the avatar menu takes several clicks and opens a new tab. suprswitch jumps to the account in the same tab, from the keyboard, in under a second. </p> </details> </div> </div> </section>
177<script type="module">for(const e of document.querySelectorAll("[data-faq-q]"))e.addEventListener("toggle",()=>{e.open&&window.stonks?.event("FAQ Opened",{question:e.dataset.faqQ??""})});</script>
177 <section class="border-t border-border"> <div class="reveal mx-auto flex max-w-3xl flex-col items-center px-5 py-24 text-center sm:px-8 sm:py-32"> <h2 class="font-human text-3xl leading-tight font-semibold tracking-tight text-fg sm:text-5xl"> 178the avatar menu had a good run. 179</h2> <p class="mt-5 max-w-md font-human text-lg text-fg-muted"> 180install it, hold a key, press a number â that's the entire onboarding. 181</p> <div class="mt-8 flex flex-col items-center gap-3"> <!-- The store link + browser name default to Chrome (SSG) and are tailored to the 182visitor's browser client-side by the script in Layout.astro (data-cta hooks). --><a href="https://chromewebstore.google.com/detail/suprswitch-account-switch/mmnnelfhickmgpdienobikocjopndjeg" data-cta data-cta-firefox="https://addons.mozilla.org/firefox/addon/suprswitch-account-switcher/" data-s-event="Install Click" data-s-event-props="location=cta" target="_blank" rel="noopener" class="inline-flex items-center justify-center rounded-lg bg-accent px-5 py-2.5 font-sans text-sm font-medium text-accent-fg transition-all hover:scale-[1.02] hover:opacity-90 active:scale-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fg px-6 py-3 text-base"> <span data-cta-label>+ add to chrome</span> </a> <span class="font-sans text-xs text-fg-muted"> 183then press <span class="mod-win">alt</span><span class="mod-mac">option</span><span class="mod-pick"></span> + a number on any google page 184</span> </div> </div> </section> </main> <footer class="border-t border-border"> <div class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-5 py-8 sm:flex-row sm:px-8"> <div class="flex items-center gap-2"> <img src="/iconWhite256.png" alt="suprswitch" class="size-5" width="20px" height="20px" title="suprswitch" loading="lazy"> <span class="font-sans text-sm text-fg">suprswitch</span> <span class="font-sans text-sm text-fg-muted"> 185· a tiny tool by 186<a href="https://emaitchess.com/?utm_source=suprswitch&utm_medium=referral&utm_campaign=product-credit" target="_blank" rel="noopener" class="text-fg-muted underline underline-offset-2 hover:text-fg">emaitchess</a> </span> </div> <div class="flex items-center gap-5 font-sans text-sm text-fg-muted"> <a href="mailto:[email protected]" class="hover:text-fg">help & feedback</a> <a href="/privacy" class="hover:text-fg">privacy</a> <span class="text-fg-muted">© 2026</span> <div class="flex items-center gap-1" role="group" aria-label="theme"> <button type="button" data-theme-option="system" aria-pressed="true" class="rounded-md border border-border px-2 py-1 font-sans text-[11px] lowercase text-fg-muted transition-colors hover:text-fg aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:text-accent-fg"> system </button><button type="button" data-theme-option="light" aria-pressed="false" class="rounded-md border border-border px-2 py-1 font-sans text-[11px] lowercase text-fg-muted transition-colors hover:text-fg aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:text-accent-fg"> light </button><button type="button" data-theme-option="dark" aria-pressed="false" class="rounded-md border border-border px-2 py-1 font-sans text-[11px] lowercase text-fg-muted transition-colors hover:text-fg aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:text-accent-fg"> dark </button> </div> </div> </div> </footer>
186<script> 187 // Tailor every install CTA (the [data-cta] links) to the visitor's browser. 188 // The engine decides the store link â Firefox-family â its AMO URL (the 189 // link's data-cta-firefox), otherwise the default Chrome Web Store href 190 // (every Chromium browser installs from it). The name is best-effort: many 191 // forks (Zen, Arc, Comet, Atlas) ship a stock UA and can't be named, so they 192 // fall back to "firefox" / "chrome". 193 (function () { 194 var ua = navigator.userAgent; 195 var brands = 196 (navigator.userAgentData && navigator.userAgentData.brands) || []; 197 var has = function (n) { 198 return brands.some(function (b) { 199 return b.brand.toLowerCase().indexOf(n) !== -1; 200 }); 201 }; 202 var name = "chrome"; 203 var firefox = false; 204 if (/firefox/i.test(ua) && !/seamonkey/i.test(ua)) { 205 firefox = true; 206 name = /librewolf/i.test(ua) 207 ? "librewolf" 208 : /waterfox/i.test(ua) 209 ? "waterfox" 210 : "firefox"; 211 } else if (/edg\//i.test(ua) || has("edge")) name = "edge"; 212 else if (/opr\//i.test(ua) || has("opera")) name = "opera"; 213 else if (/vivaldi/i.test(ua)) name = "vivaldi"; 214 else if (/samsungbrowser/i.test(ua)) name = "samsung internet"; 215 else if (has("brave") || "brave" in navigator) name = "brave"; 216 else { 217 for (var i = 0; i < brands.length; i++) { 218 var b = brands[i].brand; 219 if (/chromium|not.a.brand|google chrome/i.test(b)) continue; 220 name = b.toLowerCase(); 221 break; 222 } 223 } 224 var ctas = document.querySelectorAll("[data-cta]"); 225 for (var j = 0; j < ctas.length; j++) { 226 if (firefox) { 227 var ff = ctas[j].getAttribute("data-cta-firefox"); 228 if (ff) ctas[j].setAttribute("href", ff); 229 } 230 var label = ctas[j].querySelector("[data-cta-label]"); 231 if (label) label.textContent = "+ add to " + name; 232 } 233 })(); 234 </script>
234
234<script> 235 // Footer theme toggle (system / light / dark). Persists to localStorage, 236 // applies .dark, marks the active option, and follows the OS while on system. 237 (function () { 238 var mq = matchMedia("(prefers-color-scheme: dark)"); 239 function get() { 240 try { 241 return localStorage.getItem("theme") || "system"; 242 } catch (e) { 243 return "system"; 244 } 245 } 246 function apply(t) { 247 var dark = t === "dark" || (t === "system" && mq.matches); 248 document.documentElement.classList.toggle("dark", dark); 249 document.querySelectorAll("[data-theme-option]").forEach(function (b) { 250 b.setAttribute( 251 "aria-pressed", 252 b.getAttribute("data-theme-option") === t ? "true" : "false", 253 ); 254 }); 255 } 256 document.querySelectorAll("[data-theme-option]").forEach(function (b) { 257 b.addEventListener("click", function () { 258 var t = b.getAttribute("data-theme-option"); 259 try { 260 localStorage.setItem("theme", t); 261 } catch (e) {} 262 apply(t); 263 }); 264 }); 265 mq.addEventListener("change", function () { 266 if (get() === "system") apply("system"); 267 }); 268 apply(get()); 269 })(); 270 </script>
270 </body> </html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.