Zenn
🔨

Chrome拡張機能ManifestV3へ対応する方法（V2から）

2021/12/15に公開
Chrome拡張
tech

はじめに

最近Chrome拡張機能を作ろうと思っていたら、V3への移行期限が近づいていることを知った。
そもそもV3とは何か、を知るためにもV2のOSSプロジェクトをV3に移行するというissueを解決してみようと思った。
ので、やってみた。

ちなみに、そもそもV2がわからん人はこちらの記事も参照ください
https://zenn.dev/katoaki/articles/f6f56705e44ca0

結論

  • 2022/1/17前にはマニフェストV3への対応をはじめたほうがよい
  • V2→V3への以降は公式のチェックリストがあるので、それを見ながら進めていけば簡単
  • 何から手を付けていいか分からなければ、ひとまず manifest_version を3にするところから初めていくとよい

やってみたこと

次の記事を確認してみた

わかったことを列挙してみた

順番にやってみた

とあるプロジェクトのマイグレーションにトライしてみた。

前提

変更前のmanifest.jsonはこんな感じ

{
  "name": "appName",
  "short_name": "app",
  "version": "0.6.0",
  "manifest_version": 2,
  "description": "description",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "options_ui": {
    "page": "src/options/options.html",
    "open_in_tab": true
  },
  "browser_action": {
    "default_icon": "icons/icon19.png",
    "default_title": "title",
    "default_popup": "src/browser_action/browser_action.html"
  },
  "permissions": [
    "https://sub.example.com/path/*",
    "https://sub2.example.com/*",
    "https://slack.com/api/*",
    "https://hooks.slack.com/services/*",
    "storage"
  ],
  "content_scripts": [
    {
      "matches": [
        "https://sub.example.com/path/*",
        "https://sub2.example.com/*"
      ],
      "js": [
        "src/inject/inject.js"
      ],
      "all_frames": true
    }
  ],
  "background": {
    "scripts": ["src/background/background.js"],
    "persistent": false
  }
}

とりあえずバージョンを上げる

ダメなのは分かってるけどあえてここだけ変更してみる

  "manifest_version": 2,

  "manifest_version": 3,

service_worker使いなさいということですね。
backgroundの設定を修正していきます。

backgroundの設定（service_worker対応）

persistentがfalseであることもあり、そのままservice_workerとしてセットします

  "background": {
    "scripts": ["src/background/background.js"],
    "persistent": false
  }

  "background": {
    "service_worker": "src/background/background.js"
  }

backgroundの設定はOKのようですね。
しかし、今度はbrowser_actionｔとpermissionsの設定が正しくないようです。

browser_actionの設定

browser_actionはそのままactionに書き換えます

  "browser_action": {
    "default_icon": "icons/icon19.png",
    "default_title": "title",
    "default_popup": "src/browser_action/browser_action.html"
  },

  "action": {
    "default_icon": "icons/icon19.png",
    "default_title": "title",
    "default_popup": "src/browser_action/browser_action.html"
  },

続いて、先程出ていたpermissionの設定も行います

permissionsの設定

permissionsの中で、許可するリクエスト先の設定は分離されたので、host_permissionsへ一部移行します。

  "permissions": [
    "https://sub.example.com/path/*",
    "https://sub2.example.com/*",
    "https://slack.com/api/*",
    "https://hooks.slack.com/services/*",
    "storage"
  ],

  "permissions": [
    "storage"
  ],
  "host_permissions": [
    "https://sub.example.com/path/*",
    "https://sub2.example.com/*",
    "https://slack.com/api/*",
    "https://hooks.slack.com/services/*",
  ],

ここまで変更したら再読込してみます。

エラーが出なくなりました。

動作確認

今回対応した拡張機能を実際に動かして動作確認します。
従来どおり動いているようでした。

さいごに

私のようにあまり詳しくない人の参考になれば幸いです

参考

Discussion