How to handle extension upgrade properly in content script?

[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". 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 Plasmo ?

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?