Chrome Extension MV3: Uncaught ReferenceError: Worker is not defined

Question

I am trying to convert from MV2 to MV3 and I am getting this error from the service worker error logs:

Service worker registration failed

Uncaught ReferenceError: Worker is not defined

Here is my MV3 settings:

`{
  "manifest_version": 3,
  "name": "Blah",
  "description": "Blah",
  "version": "1.0.0",
  "minimum_chrome_version": "93",
  "action": {
    "default_icon": "logo.png",
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "js/background.js"
  },
  "content_scripts": [
    {
      "matches": ["file://*/*", "http://*/*", "https://*/*"],
      "js": ["js/content.js"],
      "run_at": "document_start",
      "all_frames": true
    }
  ],
  "icons": {
    "16": "icon-16.png",
    "48": "icon-48.png",
    "128": "icon-128.png"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; worker-src 'self'"
  },
  "permissions": [
    "scripting",
    "clipboardWrite",
    "tabs",
    "activeTab",
    "notifications",
    "webRequest",
    "proxy",
    "storage",
    "unlimitedStorage",
    "alarms"
  ],
  "host_permissions": [
    "http://*/",
    "https://*/",
    "<all_urls>"
  ],
  "web_accessible_resources": [
    {
      "resources": ["js/injected.js"],
      "matches": ["*://*/*"]
    }
  ]
}`

And here is the backgound script:

import { browser } from "webextension-polyfill-ts";
import { Request } from "@src/types";
import Extension from "./extension";

const app: Extension = new Extension();

try {
  app.initialize().then(async () => {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    browser.runtime.onMessage.addListener(async (request: Request, _) => {
      try {
        const res = await app.handle(request);
        return [null, res];
      } catch (e: any) {
        return [e.message, null];
      }
    });

} catch (error) {
  console.log("Error in backgound!!1");
}

Is there any missing configs in the background script or the MV3 json file?

Answer 1

It is an old bug when using nested web-worker with chrome extensions which is not supported yet: https://bugs.chromium.org/p/chromium/issues/detail?id=31666

I found the solution here: https://stackoverflow.com/a/33991381/9058556

It was simply installing https://github.com/dmihal/Subworkers package and importing it in my background.js script at the top.

Thanks @norio-yamamoto for trying to help me with this.