自作のChrome拡張機能をManifest V3へ移行した際の修正内容まとめ

自作のChrome拡張機能

Chord Dictionary

修正内容

manifest.json

manifest.json

{
- "manifest_version": 2,
+ "manifest_version": 3,
  "web_accessible_resources": [
-    "main.js",
-    "main.css",
+    {
+      "resources": ["main.js", "main.css", "sounds/*.mp3"],
+      "matches": ["http://*/*", "https://*/*"]
+    }
  ],
-  "browser_action": {
+  "action": {
    "default_title": "Chord Dictionary"
  },
  ],
  "background": {
-    "scripts": [
-      "background.js"
-    ],
-    "persistent": false
+    "service_worker": "background.js"
  },
  "permissions": [
    "tabs",
    "activeTab",
    "storage"
+    "scripting"
  ]
}

関数

chrome.browserAction

chrome.browserActionをchrome.actionにする

- chrome.browserAction.onClicked.addListener(function (tab) {
+ chrome.action.onClicked.addListener((tab) => {

- chrome.browserAction.setBadgeText({ text: isActiveTo ? "ON" : "" });
+ chrome.action.setBadgeText({ text: isActiveTo ? "ON" : "" });

chrome.tabs.executeScript、chrome.tabs.insertCSS

chrome.tabs.executeScriptをchrome.scripting.executeScriptにする

- chrome.tabs.executeScript(tabId, { file: "main.js" });
+ chrome.scripting.executeScript({
+   target: { tabId: tabId },
+   files: ["main.js"],
+ });

chrome.tabs.insertCSSをchrome.scripting.insertCSSにする

- chrome.tabs.insertCSS(tabId, { file: "main.css" });
+ chrome.scripting.insertCSS({
+   target: { tabId: tabId },
+   files: ["main.css"],
+ });

manifest.jsonのpermissionsにscriptingを追加する必要がある

chrome.extension.getURL

chrome.extensionをchrome.runtimeにする

- chrome.extension.getURL("sounds/piano-c2.mp3")
+ chrome.runtime.getURL("sounds/piano-c2.mp3")

参考

その他に必要な修正は公式のマイグレーションガイドが参考になります。

• Migrating to Manifest V3