Reload background service worker without reloading entire extension

[aklinker1]

From Chrome's debugging article: https://developer.chrome.com/docs/extensions/mv3/tut_debugging/

Also, if you have made changes to the service worker code, you can use the Update button and skipWaiting to apply the changes immediately.

If there's a way to do this programatically, that would be great. It means extension pages wouldn't have to be closed when changing the background.

Maybe we have access to these ServiceWorker APIs inside the background?

• https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update
• https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting

[aklinker1]

By running the following code in the top-level scope of the background service worker, I was able to access the two functions necessary to update the service worker without reloading the entire extension:

addEventListener('install', (event) => {
  const sw = event.target as ServiceWorkerGlobalScope;
  const { registration, skipWaiting } = sw;
  const update = registration.update;
  console.log({ skipWaiting, update });
  globalThis.reloadBackground = async () => {
    await update();
    await skipWaiting();
  };
});

Extension service workers can listen to the standard web worker install event, from which we're able to access the ServiceWorkerGlobalScope and ServiceWorkerRegistration.

Unfortunately, calling the reloadBackground function from the dev console results in an error:

[aklinker1]

Here's a minimal extension demoing this behavior: minimal-example.zip

[aklinker1]

Conversation on the chrome google groups: https://groups.google.com/a/chromium.org/g/chromium-extensions/c/Z-H3IkRODpQ

[aklinker1]

Alright, working example:

// demo/src/entrypoints/background.ts
export default defineBackground(() => {
  // ...
  
  const serviceWorker = globalThis as unknown as ServiceWorkerGlobalScope;
  globalThis.addEventListener('install', () => {
    void serviceWorker.skipWaiting();
  });
  // @ts-expect-error
  globalThis.updateSelf = async () => {
    await serviceWorker.registration.update();
  };
});

Then you can call updateSelf from the service worker's dev console after making a change to demo/.output/chrome-mv3/background.js

[aklinker1]

And nevermind, will break in Chrome 117...

https://chromiumdash.appspot.com/commit/b8b06b6b8071b96e3f76858d662d8991ba3b3374

[aklinker1]

Can confirm that you can no longer update the service worker to get the latest code.