Not working for me

[Jorens Merenjanu]

Hello, thanks for creating this plugin, it would be a godsend if I could actually get it to work.

So I have a vanilla Vite app with 2 files - navkeys.js and worker.ts. Worker file just console.logs a message, and navkeys is the file of my chrome extension. I have the NODE_ENV set to development (confirmed with a console.log), and the following is my Vite config:

import hotReloadExtension from 'hot-reload-extension-vite';
import { defineConfig } from 'vite';

export default defineConfig({
    build: {
        rollupOptions: {
            input: './src/navkeys.js',
            output: {
                assetFileNames: '[name].[ext]',
                entryFileNames: '[name].js'
            }
        }
    },
    plugins: [
        hotReloadExtension({
        log: true,
          backgroundPath: 'src/worker.ts' // src/pages/background/index.ts
        })
    ]
});

Thank you very much! If there's more info you need let me know!

[capi1O]

Same for me, the changes of my content script are correctly watched (dist dir is rebuilt), however those changes are not reflected in the UI on the web page (my extension adds DOM elements on the page, from content script).
The web page needs to be reloaded (reloading extension from chrome://extensions/ has no effect).
It still saves me some time since I don't have to npm run build every time but it does not work like shown on the demo video.

• hot-reload-extension-vite: 1.0.13
• vite: 5.1.0
• Chrome 121.0.6167.161
• node v20.11.0
• Windows 11

[Saurav Maharjan]

@JorensM ,

I already see the problem in your vite config file. You should pass the src/worker.ts to build option. So, your vite config should look something like below:

import hotReloadExtension from 'hot-reload-extension-vite';
import { defineConfig } from 'vite';

export default defineConfig({
    build: {
        rollupOptions: {
            input: {
                    navkeys:'./src/navkeys.ts',
                    worker: './src/worker.ts' // add this line
             },
            output: {
                assetFileNames: '[name].[ext]',
                entryFileNames: '[name].js'
            }
        }
    },
    plugins: [
        hotReloadExtension({
        log: true,
          backgroundPath: 'src/worker.ts' // src/pages/background/index.ts
        })
    ]
});

The reason being the reload script is added to your server worker on build time on dev environment.

After this donot forget to add the built service worker into manifest.

// manifest.json

{
    "manifest_version": 3,
     //..... other stuff
    "background": { "service_worker": "./worker.js" } // add this line
}

And lastly make sure your pass NODE_ENV as development.

Let me know if it works.

[Jorens Merenjanu]

@isaurssaurav I'm already importing the worker from navkeys.js and the console.log in my worker.ts confirms that it's being imported. But I haven't added the worker to the manifest, I'll try that and report back

[Saurav Maharjan]

@captn-d,

Could you provide me with some example code so that I could help you better 😄 ?. You could also go to the example directory of this project to see if you are missing some configs. The example project works with this hot-reload-extension-vite-plugin and demo video is actually started with example project as starter project file.

[Saurav Maharjan]

@JorensM ,

Service worker file should be built separately and you cannot import service worker in other context of your extension. It will not work as service worker. Please do follow above vite.config file i suggested.

[Saurav Maharjan]

Closing this issue as it is related more to the misconfiguration of vite's config file than the actual bug in the pakage.

Feel free to open the new issue incase the issue is not resolved.