I Built the Chrome Feature Google Never Shipped

#webdev #javascript #productivity #beginners

# I Built the Chrome Feature Google Never Shipped

Tags: chrome productivity javascript webdev
Cover image: [use cover.svg or a screenshot of the extension UI]

There's a moment every developer knows.

You're deep in it. Twelve tabs open. GitHub PR on the left, Stack Overflow thread you've been nursing for an hour, local dev server, three docs pages, a Figma file someone dropped in Slack. You're finally in flow.

Then something pulls you away. A meeting. A call. Another project that's suddenly on fire.

You come back. And it's gone. Not just the tabs the context. The mental thread you'd been holding for the last two hours. You spend the next fifteen minutes just getting back to where you were.

I got tired of losing that time. So I built something.

What I Built

Context Switcher is a Chrome extension that gives your browser a Save Game button.

Freeze — saves every open tab, its scroll position, pinned state, and title into a named workspace snapshot
Thaw — opens a new window and restores everything exactly as you left it, including scroll positions
Rename / Delete — manage your saved workspaces from the popup

All data is stored locally via chrome.storage.local. No server. No account. No cloud.

The Technical Problem That Made This Interesting

The obvious approach doesn't work.

You can't just save URLs and reopen them. The page loads fresh from the top. Scroll position is gone. For documentation pages, GitHub diffs, long Notion docs that matters a lot.

The solution involves injecting a content script before the tab finishes loading, registering the listener first, then restoring scroll after status === 'complete' fires.

// Register listener BEFORE creating any tabs
// This eliminates the race condition
const listener = (tabId, changeInfo) => {
  if (changeInfo.status === 'complete' && tabId === newTab.id) {
    chrome.tabs.onUpdated.removeListener(listener);

    setTimeout(() => {
      chrome.scripting.executeScript({
        target: { tabId },
        func: (x, y) => window.scrollTo(x, y),
        args: [tab.scrollX, tab.scrollY]
      });
    }, 300); // small delay for JS-heavy pages to settle
  }
};

chrome.tabs.onUpdated.addListener(listener);
const newTab = await chrome.tabs.create({ url: tab.url });

The 300ms delay is intentional. Without it, SPAs and JS-heavy pages scroll to the saved position and then immediately reset as their own JS finishes initializing. Found this the hard way.

The Other Problem — Restricted URLs

Chrome throws an error if you try to inject scripts into:

chrome:// pages
chrome-extension:// pages
The Chrome Web Store itself
devtools:// pages

The fix is a simple guard before every script injection:

const RESTRICTED = [
  'chrome://', 'chrome-extension://',
  'devtools://', 'https://chrome.google.com/webstore'
];

function isRestricted(url) {
  return !url || RESTRICTED.some(prefix => url.startsWith(prefix));
}

Restricted tabs are saved as-is (URL + title) but scroll restore is skipped gracefully. No crashes, no error popups.

Architecture in Brief

manifest.json          ← MV3, service worker, permissions
background.js          ← handles FREEZE / THAW / DELETE / RENAME
content/capture.js     ← injected at freeze time, returns scroll + form data
popup/popup.html|js    ← the UI, sends messages to background
utils/storage.js       ← chrome.storage.local CRUD helpers

One thing worth knowing about Manifest V3 service workers: they can be killed by Chrome at any time when idle. If you're holding state in memory and the worker goes to sleep, that state is gone when it wakes up. Everything in this extension is persisted to chrome.storage.local immediately — nothing lives only in memory.

What I Skipped in v1 (and Why)

Form data restoration — capture works, but restoring values into <input> fields on an already-loaded page is unreliable across different frameworks. React-controlled inputs especially fight you. Punted to v1.1.

Tab group preservation — the tabGroups API exists but group IDs are ephemeral. You can't save a group ID and restore it later. Would need to recreate groups by name, which feels fragile. Still thinking about the right approach.

Favicon caching — favIconUrl URLs expire after the browser session. Storing them as base64 data URIs at freeze time would fix this but bloats storage. Left it for now.

What I'd Do Differently

One thing I underestimated: how much time the UX takes compared to the logic. The background script was done in a day. Getting the popup to feel right loading states, rename inline editing, delete confirmation, empty state took three times as long.

If you're building a Chrome extension for the first time, budget more time for the popup than you think you need. It's not just a form. It's the entire user experience.