<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Muhammad Ali</title>
    <description>The latest articles on DEV Community by Muhammad Ali (@muhammad_ali_e2651e45bed9).</description>
    <link>https://dev.to/muhammad_ali_e2651e45bed9</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3934374%2Fe5c519dd-f09e-4a0f-8715-48a7806c6f69.png</url>
      <title>DEV Community: Muhammad Ali</title>
      <link>https://dev.to/muhammad_ali_e2651e45bed9</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/muhammad_ali_e2651e45bed9"/>
    <language>en</language>
    <item>
      <title>I Built the Chrome Feature Google Never Shipped</title>
      <dc:creator>Muhammad Ali</dc:creator>
      <pubDate>Sat, 16 May 2026 07:24:54 +0000</pubDate>
      <link>https://dev.to/muhammad_ali_e2651e45bed9/i-built-the-chrome-feature-google-never-shipped-oko</link>
      <guid>https://dev.to/muhammad_ali_e2651e45bed9/i-built-the-chrome-feature-google-never-shipped-oko</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvxyihe508fontbed7lhe.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvxyihe508fontbed7lhe.png" alt="From 24 tabs of chaos to a single saved card restored exactly where you left off."&gt;&lt;/a&gt;# I Built the Chrome Feature Google Never Shipped&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Tags:&lt;/strong&gt; &lt;code&gt;chrome&lt;/code&gt; &lt;code&gt;productivity&lt;/code&gt; &lt;code&gt;javascript&lt;/code&gt; &lt;code&gt;webdev&lt;/code&gt;&lt;br&gt;
&lt;strong&gt;Cover image:&lt;/strong&gt; [use cover.svg or a screenshot of the extension UI]&lt;/p&gt;



&lt;p&gt;There's a moment every developer knows.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;Then something pulls you away. A meeting. A call. Another project that's suddenly on fire.&lt;/p&gt;

&lt;p&gt;You come back. And it's gone. Not just the tabs the &lt;em&gt;context&lt;/em&gt;. 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.&lt;/p&gt;

&lt;p&gt;I got tired of losing that time. So I built something.&lt;/p&gt;


&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Context Switcher&lt;/strong&gt; is a Chrome extension that gives your browser a Save Game button.&lt;/p&gt;

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

&lt;p&gt;All data is stored locally via &lt;code&gt;chrome.storage.local&lt;/code&gt;. No server. No account. No cloud.&lt;/p&gt;


&lt;h2&gt;
  
  
  The Technical Problem That Made This Interesting
&lt;/h2&gt;

&lt;p&gt;The obvious approach doesn't work.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;The solution involves injecting a content script &lt;em&gt;before&lt;/em&gt; the tab finishes loading, registering the listener first, then restoring scroll after &lt;code&gt;status === 'complete'&lt;/code&gt; fires.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Register listener BEFORE creating any tabs&lt;/span&gt;
&lt;span class="c1"&gt;// This eliminates the race condition&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;listener&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;tabId&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;changeInfo&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;changeInfo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;status&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;complete&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;tabId&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;newTab&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;chrome&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;tabs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;onUpdated&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;removeListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;listener&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;chrome&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;scripting&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;executeScript&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
        &lt;span class="na"&gt;target&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;tabId&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="na"&gt;func&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;y&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;scrollTo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;y&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="na"&gt;args&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;tab&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;scrollX&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;tab&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;scrollY&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
      &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;300&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// small delay for JS-heavy pages to settle&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nx"&gt;chrome&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;tabs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;onUpdated&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;listener&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;newTab&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;chrome&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;tabs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;tab&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;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.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Other Problem — Restricted URLs
&lt;/h2&gt;

&lt;p&gt;Chrome throws an error if you try to inject scripts into:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;chrome://&lt;/code&gt; pages&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;chrome-extension://&lt;/code&gt; pages&lt;/li&gt;
&lt;li&gt;The Chrome Web Store itself&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;devtools://&lt;/code&gt; pages&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The fix is a simple guard before every script injection:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;RESTRICTED&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
  &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;chrome://&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;chrome-extension://&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;devtools://&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://chrome.google.com/webstore&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;isRestricted&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;RESTRICTED&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;some&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;prefix&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;startsWith&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;prefix&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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




&lt;h2&gt;
  
  
  Architecture in Brief
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;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
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;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 &lt;code&gt;chrome.storage.local&lt;/code&gt; immediately — nothing lives only in memory.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I Skipped in v1 (and Why)
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Form data restoration&lt;/strong&gt; — capture works, but restoring values into &lt;code&gt;&amp;lt;input&amp;gt;&lt;/code&gt; fields on an already-loaded page is unreliable across different frameworks. React-controlled inputs especially fight you. Punted to v1.1.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tab group preservation&lt;/strong&gt; — the &lt;code&gt;tabGroups&lt;/code&gt; 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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Favicon caching&lt;/strong&gt; — &lt;code&gt;favIconUrl&lt;/code&gt; 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.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I'd Do Differently
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;




&lt;h2&gt;
  
  
  Try It
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://chromewebstore.google.com/detail/context-switcher/jhclcpgoodoieodcmklijelcggeknfej" rel="noopener noreferrer"&gt;Context Switcher&lt;/a&gt;&lt;/strong&gt; is free on the Chrome Web Store.&lt;/p&gt;

&lt;p&gt;If you're the type who has seventeen tabs open right now, it might be useful.&lt;/p&gt;

&lt;p&gt;Happy to answer questions about the architecture, the MV3 gotchas, or anything else in the comments.&lt;/p&gt;




&lt;p&gt;Add Context Swither: [&lt;a href="https://chromewebstore.google.com/detail/context-switcher/jhclcpgoodoieodcmklijelcggeknfej" rel="noopener noreferrer"&gt;https://chromewebstore.google.com/detail/context-switcher/jhclcpgoodoieodcmklijelcggeknfej&lt;/a&gt;] &lt;/p&gt;

</description>
      <category>productivity</category>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
