Auto-reloads for offscreen pages/scripts

[kendallroth]

Is it possible to support automatically reloading the extension upon changes to offscreen pages/scripts? While any changes in scripts referenced via manifest background will cause an extension refresh, any changes to scripts related to a created offscreen document are not automatically applied. Instead, these require a manual build process, which appears to break HMR for the rest of the extension (for content scripts, etc), requiring the Vite server to be restarted.

A large part of our extension's (audio/video recording) is handled in the background, and this means that updating these workflows require a lengthy process: make small changes, run and wait for build, reload extension, test changes, etc. Meanwhile, any smaller UI changes (in content scripts) will also require an entire build process, since the HMR appears to break after running build (must restart Vite server to enable again).

Is there any way to support automatically reloading the extension upon changes to created offscreen pages/scripts? Any way to indicate to Vite that these changes should be picked up by HMR?

manifest.config.ts

defineManifest(() => ({
  ...
  background: {
    service_worker: "src/background/service-worker.ts",
    type: "module",
  }
}));

background/service-worker.ts

// NOTE: Changes to any files imported here will automatically refresh extension (likely since mentioned directly in manifest)

const init = async () => {
  // NOTE: Function simplified for posting
  const existingContexts = await chrome.runtime.getContexts({});
  const offscreenDocument = existingContexts.find((c) => c.contextType === "OFFSCREEN_DOCUMENT");
  if (offscreenDocument) return;

  await chrome.offscreen.createDocument({
    url: "src/background/offscreen/index.html",
    ...
  });
}();

background/offscreen/index.html

<script type="module" src="./offscreen.ts"></script>

background/offscreen/offscreen.ts

// Import other files (this is the main entry point for offscreen stuff)
// TODO: Figure out how to support either HMR or auto-reloads for changes in these files!

const initializeExtension = async () => {
  // Do stuff
}();

chrome.runtime.onMessage.addListener((message, ...args) => {
  // Do stuff
});

P.S. Example output from change to background/service-worker, indicating that Vite is indeed picking up those changes. However, a similar to change to background/offscreen/offscreen.ts does not get picked up by Vite!

[vite] (client) page reload src/background/service-worker.ts

[Toumash]

Maybe it is possible to have the hmr in service-worker trigger a reload on offscreen - like a hook of hot.accept to re-create the offscreen page?

I'm trying to setup a working playground but it does not work for me.
Could you please help me set up the base scenario demo? After that i would see how the plugin-background.ts to see what's possible

https://github.com/Toumash/crxjs-offscreen-test

Not seeing the console.log and chrome://inspect/#other - nothing

[Toumash]

soo everyting works apart from my action button event handler (because there was a popup)?

I would be curious to know if you would expect the offscreen documents to be handled via HMR in the same way as background scripts (they seemingly are in a stripped down case) 🤔?

I didnt yet use offscreen page anywhere and there are no tests in this project for this use case, but this is not HMR that retains state because this is a react thing - just a normal refresh. (interesting read btw https://leapcell.medium.com/beyond-hmr-understanding-reacts-fast-refresh-d6d80ef0fe4e)

In react project i would suggest using https://github.com/ArnaudBarre/eslint-plugin-react-refresh for linting, but here i dont know.

I would like to add the repo without the icons (licenses) to the automatic test suite. Would you like me to add another case for testing if the refresh retains state or to test any specific behavior with related components like the popup in the demo?

[kendallroth]

You are correct that this is not technically HMR, but rather just a refresh. Given that my other project is not refreshing the extension due to off-screen script changes, I am still personally curious about this and going to investigate further. I am probably going to try a closer replication of my setup, with a dockerized Vue project, and will see if that winds up any closer to my experience.

P. S. The icons are from @mdi/js 🤷‍♂️, but I could also easily design some to avoid licensing issues if there are any from there

[Toumash]

Ok. Btw i've found the logs for the offscren page - thanks for the readme update.
In your docker setup first thing i would check is the errors there in websocket connection. Does the HMR work in other places in the same setup - content script or popup?
I'm not talking about the background because it is referenced in the manifest so i guess each filesystem change to this file gets picked up by chrome itself not the HMR vite process.

chrome://inspect/#other

[Toumash]

The common issue was the port config.

After adding the strict port there is no more websocket connection error:

server: {
    cors: {
      origin: [/chrome-extension:\/\//],
    },
    port: 3005,
    strictPort: true,
    hmr: {
      clientPort: 3005,
    },
  },

[kendallroth]

The common issue was the port config.

After adding the strict port there is no more websocket connection error:

Yeah, I ran into that in my other project and fixed there, but wasn't worried about that here 👍

[kendallroth]

In your docker setup first thing i would check is the errors there in websocket connection. Does the HMR work in other places in the same setup - content script or popup?
I'm not talking about the background because it is referenced in the manifest so i guess each filesystem change to this file gets picked up by chrome itself not the HMR vite process.

Yeah, either HMR or auto-reload work automatically in the popup (we have no content scripts) and background. However, I'm curious why the offscreen changes were getting picked up at all by auto-reload, given that they aren't even imported from the background script (but only mentioned in offscreen document creation by public path) 🤔. Maybe it has something to do with the public/ folder changing, which somehow triggers an auto-reload?

The other thing I'm curious about now is whether React might handle auto-refresh differently than Vue. However, since both use Vite, that doesn't seem super likely? But perhaps the React Vite plugin is helping out?