Manifest V3

[esseswann]

Hello, I'm using this extension and am very happy with it, is there any chance of supporting Manifest V3?

[VasilyShelkov]

Hi, I'm not familiar with Manifest V3 but would be happy to try to support it given some guidance on what the differences are and if it is something that will meet the majority of use cases (or doesn't disrupt others' use cases i.e. v2)

Is the manifest V3 something that will be supported by all browsers or just chrome ? Would be really useful if you're familiar to send some more information, I will also do some of my own digging :)

[esseswann]

The biggest feature in my opinion is that it replaces the background service with service worker which simplifies the whole system.

[marcuscarey]

Just to let you know I'm using this project with Manifest V3. It is working well with no issues.

You need to point to the background.bundle.js as the service worker.

There a couple of other changes like action and few others. Here's a template based off my extension.

{
  "manifest_version": 3,
  "version": "0.0.1",
  "short_name": "Short Name",
  "name": "My Awesome Plugin",
  "description": "This is really awesome",
  "action": {
    "default_title": "My Awesome plugin"
  },
  "background": {
    "service_worker": "background.bundle.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.bundle.js"]
    }
  ],
  "icons": {
    "16": "images/icon_16x16.png",
    "32": "images/icon_32x32.png",
    "48": "images/icon_48x48.png",
    "128": "images/icon_128x128.png"
  },
  "options_page": "options.html",
  "permissions": ["activeTab", 
    "contextMenus", 
    "declarativeContent", 
    "tabs", 
    "storage"
  ],
  "host_permissions": ["<all_urls>"]
}

[marcuscarey]

It is my understanding that all Chromium based browsers will or already support Manifest V3 and it shipped with version 88.

[VasilyShelkov]

If there's no issues with using Manifest V3, it sounds like there's nothing to be done here so I'll close for now. Thanks for pointing out @marcuscarey

[rashid301]

@VasilyShelkov , I migrated the extension to v3. After migration, hot reload of background js script is broken.
When I change background.js file, I see this error in the service_worker inspect view.

background.bundle.js:10849 Uncaught TypeError: self.location.reload is not a function
    at Object.contentChanged [as content-changed] (background.bundle.js:10849)
    at background.bundle.js:11092
    at WebSocket.<anonymous> (background.bundle.js:10704)
contentChanged @ background.bundle.js:10849
(anonymous) @ background.bundle.js:11092
(anonymous) @ background.bundle.js:10704

My manifest file

  "manifest_version": 3,
  "version": "0.0.1",
  "short_name": "React App",
  "name": "Same React App",
  "description": "Sample application showing how to create an extension with Create React App",
  "action": {
    "default_title": "CRE",
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.bundle.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.bundle.js"]
    }
  ],
  "icons": {
    "16": "img/icon-16.png",
    "48": "img/icon-48.png",
    "128": "img/icon-128.png"
  },
  "options_page": "options.html",
  "permissions": ["tabs"],
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  }
}

I have tried deleting dev folder too. Any suggestions?

[Danscap]

seconding the hot reloading problem in Manifest V3.
Once you add background script code, hot reloading is broken throughout the project.

My changes are detected in vs code and I get a 'Compiled Successfully' message in the terminal, but ultimately the extension in chrome is broken and I have to quit the reloading and re-run it and then load the unpacked extension.