Manifest V3 Service worker registration failed

[williamlmao]

Type:

• [x ] bug
• feature
• enhancement
• question

Environment:

• OS:
• Browser: Chrome
• Library Version:

I'm going to open a PR:

• yes
• [ x] no

Description:
Getting error: "Service worker registration failed" ,
"background": { "service_worker": "background.js" }, is highlighted in the error. When I build for production, the error goes away. I think it has to do with all of the code that this library adds to the background.js file when it is output.

This is from my config file:

      // Chrome extension hot reloading.
      isEnvDevelopment &&
        new ChromeExtensionReloader({
          reloadPage: true, // Force the reload of the page also
          entries: {
            // The entries used for the content/background scripts
            background: "background",
            contentScript: "content-script", // Use the entry names, not the file name or the path
          },
        }),
    ].filter(Boolean),

[designcode]

I am experiencing same issue. It's because it injects the "webpack-extension-reloader" code in compiled background.js.
That prevents the service worker from working.

[daividh]

According to documentation service-worker do not have access to DOM.
In https://github.com/rubenspgcavalcante/webpack-extension-reloader/blob/master/src/middleware/wer-middleware.raw.ts line 135, undefined window object is used and generate the following error on service-worker start :
service-worker.js:1654 ReferenceError: window is not defined

[designcode]

@daividh That sounds about right.

[zdenham]

Ah bummer, so this package won't work with manifest V3?

[khlevon]

@zdenham I have fixed this issue and opened a pull request, but I think the maintainer will not merge it because the project support stoped. You can clone code from this brunch build it locally and use bundle file dist/webpack-extension-reloader.js

[designcode]

@khlevon Great! I found another bug which I had to fix in my webpack config. I'd create a PR soon on your repo.

[rhaksw]

@khlevon does this version reload the page, or just skip it if it isn't possible? Either way well done.

I saw someone else made something called mv3-hot-reload. I haven't yet tried it myself. I came across that tool in this issue on crx-hotreload, another tool I didn't know existed when I started using webpack-extension-reloader.

[khlevon]

Yes, it reloads the page.
Thanks to share the info.

[sambessey]

@zdenham I have fixed this issue and opened a pull request, but I think the maintainer will not merge it because the project support stoped. You can clone code from this brunch build it locally and use bundle file dist/webpack-extension-reloader.js

Hello Thank you so much for this.. I am really struggling to build it locally and include it in my project. I am getting errors regarding webpack-extension-reloader being missing so I am sure I am doing something fundamental wrong.

Is there any way you would be able to publish some step-by-step commands?

Thanks!

[khlevon]

@sambessey after building webpack-extension-reloader project you should change package.json of your main project and specify the path of local build for webpack-extension-reloader package

"devDependencies": {
    "webpack-extension-reloader": "file:/Users/xxx/Projects/webpack-extension-reloader"
}

or if you want to save a custom build of webpack-extension-reloader in your project's repository you should save it under your repo and specify a path like this

"devDependencies": {
    "webpack-extension-reloader": "file:./lib/webpack-extension-reloader"
}

/lib/webpack-extension-reloader this folder should contain package.json of the project webpack-extension-reloader and
dist folder with file webpack-extension-reloader.js

[sambessey]

@sambessey after building webpack-extension-reloader project you should change package.json of your main project and specify the path of local build for webpack-extension-reloader package

"devDependencies": {
    "webpack-extension-reloader": "file:/Users/xxx/Projects/webpack-extension-reloader"
}

or if you want to save a custom build of webpack-extension-reloader in your project's repository you should save it under your repo and specify a path like this

"devDependencies": {
    "webpack-extension-reloader": "file:./lib/webpack-extension-reloader"
}

/lib/webpack-extension-reloader this folder should contain package.json of the project webpack-extension-reloader and dist folder with file webpack-extension-reloader.js

Thank you- is it as simple as using npm build . on a local copy of your branch?

Thanks again!!

[khlevon]

after building webpack-extension-reloader you should specify in your project's package.json that it should use a custom local build of webpack-extension-reloader package. I think your problem exists because you didn't do that step. So during npm install in your project directory webpack-extension-reloader package is not linked to your custom build of webpack-extension-reloader and you got a package missing error.

[sambessey]

Thanks makes sense!

[sambessey]

Ok I believe it is all working now! Your post made perfect sense. Problem was A) too many hours at the screen, and B) I used to run using npm run watch:dev which gave me the hot reload on save. For some reason this now gives me an error like this:

/Users/xxx/node_modules/webpack-extension-reloader/dist/webpack:/src/utils/manifest.ts:25 throw new TypeError(bgScriptManifestRequiredMsg.get()); ^ TypeError: [WER-E2] function(obj) { obj || (obj = {}); var __t, __p = ''; with (obj) { __p += 'Background script on manifest is required';

which is what I had before I found your post. It's still using the old plugin weirdly, even after re-running npm install.

Using your steps and npx webpack-extension-reloader it seems to work, at least now Chrome is complaining about background.js, which I would expect as I am upgrading a Manifest v2- based plugin :) The rest I fix tomorrow.

Thanks again, very much appreciated!

[ProNotion]

Thanks for sharing this fix which appears to work for me but now I get a new error in the form of:

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'".

Any ideas how to overcome that without compromising the security of the extension in production?

[sherifmayika]

Thanks for sharing this fix which appears to work for me but now I get a new error in the form of:

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'".

Any ideas how to overcome that without compromising the security of the extension in production?

solved after npm update

[rushilsrivastava]

For future reference, webpack-ext-reloader is now MV2 and MV3 compatible and updated to webpack 5. For the most part, it's a drop-in replacement