How to handle extension upgrade properly in content script UI with React?

[ming535]

Hi, I am looking for some best practices on handling extension installation and upgrade.
I am building an extension with rich "Content Script UI" with React and Shadow Root. I would like to achieve the following two goals:

1. When user install my extension, I would like to inject the content script into the tab that was opened before my extension is installed.

2. When there is an upgrade in my extension from Chrome Web Store, I would like user to receive upgraded content script for tabs that was already open.

I found some guides on how to do this with the help of chrome.runtime.onInstalled https://stackoverflow.com/questions/10994324/chrome-extension-content-script-re-injection-after-upgrade-or-install/11598753#11598753

// background.js
chrome.runtime.onInstalled.addListener(async () => {
  for (const cs of chrome.runtime.getManifest().content_scripts) {
    for (const tab of await chrome.tabs.query({url: cs.matches})) {
      if (tab.url.match(/(chrome|chrome-extension):\/\//gi)) {
        continue;
      }
      chrome.scripting.executeScript({
        files: cs.js,
        target: {tabId: tab.id, allFrames: cs.all_frames},
        injectImmediately: cs.run_at === 'document_start',
        // world: cs.world, // uncomment if you use it in manifest.json in Chrome 111+
      });
    }
  }
});

The above script works fine when user first install my extension. But I am not sure if it works fine when there is an upgrade on Chrome Web Store. (I am actually not sure how to test the "upgrade").

How do you handle Chrome WebStore "upgrade" for existing open tabs, so that old tabs receives upgraded Content Script UI in wxt with Shadow Root?

One approach I can think of is just store a version number in local storage, and ask user to refresh the page when an old "content script" is used.

Is there a better way to handle this without refresh the page manually?

(I was using Plasmo and asked the same question on their github discussion and no one has replied, so I asked the same question here. I read through all the docs in wxt, and haven't found any related information on this.)

[aklinker1]

It's there, see https://wxt.dev/entrypoints/content-scripts.html#context

Maybe I should add a page to the guide about this instead of hiding it in the entrypoint docs.

The ContentScriptContext class is very simple, and I'd recommend you read through the source code to fully understand how it works.

https://github.com/wxt-dev/wxt/blob/54e5ed0bb47964ddcbc8a5483f8b6ffe42704beb/src/client/content-scripts/content-script-context.ts

---

As for testing upgrade behavior... You'll need to make 2 zips: one of an old release (or just an older commit) with a smaller version number, and the second with your new code and a newer version number.

Before building the ZIPs, you'll need to add a key property to your manifest so both zips end up with the same runtime ID. This means in the steps below, when you install the second zip over the first, it triggers an update instead of installing a separate, second instance of your extension.

So the steps:

1. Checkout an old commit
2. Add a key to manifest in your wxt.config.ts
3. Run wxt zip
4. Stash or reset changes and checkout your latest code.
5. Add the same key to your manifest
6. Make sure the extension's version is higher than the first zip. It can be any version that's higher, since you won't be releasing this
7. Run wxt zip
8. In a fresh chrome profile, go to chrome://extensions, enable dev mode, and drag and drop the first zip onto the page to install it
9. In the extension, play around and setup your test case
10. Back on chrome://extensions, drag and drop your second zip onto the page. If you setup the key correctly, it will cause the extension to update!

To test more changes, you don't need to recreate the first ZIP, just restart the process from the step where you create the second zip.

---

Wow, that was a lot of information, I'll add a dedicated page to the docs around testing update behavior....

[ming535]

Thanks, I will try it out. I think wxt has better and simpler abstraction.