Errors when migrating extension to Manifest v3

Question

Trying to migrate the Chrome extension from manifest v2 to v3 but running into some errors. The popup script appears to be working (home page pops up when I click the extension icon) but it seems to not see the background script at all.

When uploading the extension folder to the browser, I get these 2 errors:

Warning: Service worker registration failed
Uncaught ReferenceError: window is not defined

Seems like the 2nd error is the cause of the 1st one but I'm not sure where it's getting this window from. I removed everything that might refer to window in the code but I'm still getting that error.

I might need to change some webpack settings but I'm not sure what exactly. So guys, if anyone had a similar issue or just tried to migrate extensions, please let me know if you have any ideas.

Here's my manifest file:

{
  "manifest_version": 3,
  "name": "__MSG_extName__",
  "description": "__MSG_extDescription__",
  "default_locale": "en",
  "permissions": [
    "tabs",
    "storage",
    "cookies"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  },
  "icons": {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  "background": {
    "service_worker": "js/background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_title": "__MSG_extName__"
  },
  "web_accessible_resources": [
    {
      "resources": [
        "icons/*.png",
        "fonts/*",
        "css/*"
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ]
}

I used the vue-web-extension plugin to create the extension.

Will be happy to provide any additional details if needed.

Service worker doesn't have `window` so you need to remove all code that uses it e.g. maybe it's a library. — wOxxOm, Jan 14 '22 at 19:21
[Images](//meta.stackoverflow.com/q/285551/90527) should not be used for textual data, such as error messages. — outis, Jul 21 '22 at 00:20
@ankitd no, I haven't found a solution yet. And yeah, I use webpack. — Igor Rozum, Aug 17 '22 at 13:05
migrate to Webpack 5 , that solve Window problem. As in output it does not have Window objects. Webpack 4 does have window object. — ankitd, Oct 04 '22 at 06:59

Виктор Филипенко · Answer 1 · 2022-09-09T09:25:34.463

I have the same issue. Yes you need to fix your webpack.config.js. I think you use something like this (me too) chunks But servise workers doesnt work correctly with chunks :( Its need to specific launch . Simple solution remove chunks and if you need to optimization you can use TerserWebpackPlugin for minify modules. Also if it doesnt resolve the problem you can try to change globalobject parametr to "this" in output setting for prevent webpack use window for global data https://webpack.js.org/configuration/output/#outputglobalobject

score 0 · Answer 2 · answered Mar 09 '22 at 15:22

You have to place your background.js file with your service worker file and your error will be solved. Put both service worker file and background.js file in a same folder. And also Service worker doesn't have window so you need to remove all code that uses it.

Errors when migrating extension to Manifest v3

2 Answers2