DEV Community

Cover image for Chrome Extensions Manifest 3 Migration
John Peters
John Peters

Posted on

Chrome Extensions Manifest 3 Migration

If we have an existing Manifest 2 Chrome extension and change it to Manifest 3, with a background scripts configuration like this:

  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": true
  },
Enter fullscreen mode Exit fullscreen mode

Compiling and reloading our extension shows this error.

Alt Text

That error is a result of migrating to the Chrome Extension Manifest version 3.

Extensions API

The Chrome Extensions API has a section on Manifest 3 changes. Background scripts must use service workers now.

  • Rename the backgroundscript.js to sw.js to reflect it's function:

  • Update webpack config.

entry: {
  popup: path.join(__dirname, "src/popup.tsx"),
  content: path.join(__dirname, "src/content.ts"),
  serviceWorker: path.join(__dirname, "src/sw.ts"),
  },
Enter fullscreen mode Exit fullscreen mode

API Unification Changes

Deprecations of brower_actions and page_actions require changes to:

  • The manfest.json file
  • To our sw.js file.

The browser_action and page_action constructs are no longer valid.

In the manifest, change those to this:

{
  "action": {  }
}
Enter fullscreen mode Exit fullscreen mode

Make change to sw.js code too.

// From this:
chrome.browserAction.onClicked.addListener(tab => {  });
chrome.pageAction.onClicked.addListener(tab => {  });

// To this
chrome.action.onClicked.addListener(tab => {  });
Enter fullscreen mode Exit fullscreen mode

For our small extension we were able to get a clean reload.

Our first attempts to implement our service workers failed

Alt Text

Coming up: Implementing Service Workers for Chrome Extensions using Manifest 3.

JWP2021 Chrome Extension Service Workers

Discussion (0)