HMR/Watch with content-scripts that are injected via scripting

[max-arias]

Has anyone gotten HMR, or even just a full page reload, working with content scripts?

This is my vite config:

...
 webExtension({
        browser: process.env.VITE_APP_TARGET || 'chrome',
        manifest: () => generateManifest(pkg.version, isMobile),
        // This watch file paths doesn't seem to work
        watchFilePaths: process.env.DISABLE_WATCH ? undefined : ['package.json', './js', './src'],
        additionalInputs: ['src/content-scripts/main.ts'],
        skipManifestValidation: true,
        disableAutoLaunch: true,
      }),
...

I've tried running both vite dev and vite build in watch mode, no luck. Any ideas?

[aklinker1]

Edit: oh, you've disabled auto-launch. The response below assumes you're letting the plugin open the browser, which is what enables the automatic reloads on save, causing the runtime ID to be null, and thus making the hack work.

With auto-launch disabled, the plugin is unable to tell the extension to reload.

---

HMR won't work with content scripts since they are bundled into a single file in dev mode, just like they are in production. Also, content scripts don't support ES Modules, which HMR is built around.

There's a potential work around to the lack of ESM support, but it has downsides (like not being able to access the extension APIs, and ignoring a content scripts run_at option), so I haven't invested any time looking into it.

As for reloading the page, you have to reload it yourself on Chrome after you save a file and the extension reloads. If you develop against Firefox, Firefox will reload the page for you automatically.

That said, if you want a simple hack to enable this for Chrome, you can add the following code to your content script:

if (import.meta.env.DEV) {
  setInterval(() => {
    // or chrome.runtime.id if you're not using webextension-polyfill
    if (browser.runtime.id == null) location.reload()
  }, 1000)
}

This checks if the runtime ID is null every second and, if so, reloads the page. The runtime ID becomes null after the extension reloads and the content scripts context is invalidated. You could improve this hack by adding a page visibility listener and only reloading the tab you're looking at. That would prevent tabs you're not looking at from reloading after every save.

[aklinker1]

It is technically possible to implement reloading when auto-launch is disabled, but vite-plugin-web-extension does not implement this feature. I don't plan on adding this feature to the plugin either.

I have released a spiritual successor to this plugin that supports reloading the extension on save when auto-launch is disabled, WXT. It will also automatically reload the content script on save without the hack mentioned above.

You could give WXT a go if you'd like.

[max-arias]

Hey, I appreciate the answer. 🙏 I'll see if it makes sense to refactor to use WXT.