Closed JorensM closed 5 months ago
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.
@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.
@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
@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.
@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.
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.
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
andworker.ts
. Worker file just console.logs a message, and navkeys is the file of my chrome extension. I have theNODE_ENV
set todevelopment
(confirmed with a console.log), and the following is my Vite config:Thank you very much! If there's more info you need let me know!