search

samrum / vite-plugin-web-extension

A vite plugin for generating cross browser platform, ES module based web extensions.
MIT License
325 stars 32 forks source link

Content scripts don't work in dev #66

Closed hmnd closed 1 year ago

hmnd commented 1 year ago

I'm getting the following message on Firefox when trying to use this plugin in dev:

WebExtension content scripts may only load modules with moz-extension URLs and not: “http://localhost:5173/src/entries/contentScript/primary/main.ts”

Is it intended for the content script to get compiled into this dynamic import?

(async()=>{await import('http://localhost:5173/src/entries/contentScript/primary/main.ts')})();

Happy to provide any further details that might help.

aleksolutions commented 1 year ago

Hi @hmnd I believe that the dev mode only works on chrome with manifest v2. If you want to work with firefox (or chrome with manifest v3) you must use the watch mode.

What I personally do is develop on chrome first with manifest v2, and then use watch mode to check if everything is ok in firefox and chrome with manifest v3

samrum commented 1 year ago

In dev mode, it is intentional that a dynamic import is used to load contact scripts from the vite dev server. dev mode is only supported in Chromium browsers, however.

davidmaxwaterman commented 1 year ago

This issue just hit me (and it wasn't turning up in web search results) and I spent ages trying to figure out what was happening. I'm developing an extension just for firefox, so it looks like npm run dev in the package.json is useless (or worse, since it gives the impression it should work). Is it possible this limitation could be highlighted in the readme so that it doesn't cause pain for other devs?

davidmaxwaterman commented 1 year ago

FWIW, I ended up using this in place of 'dev', and I finally was able to debug my content script and the other scripts, with real symbols too:

    "dev": "vite build --mode development --minify false --sourcemap true",
samrum commented 1 year ago

I'll update the README template for the create project so it mentions that dev only works in chromium browsers.

I think it'll make sense to update the watch command so it sets mode to development along with those options you're using as well.