対象読者
- 拡張機能のv2→v3へのバージョンアップについて知りたい方
- どんなことに注意すればいいのか知りたい方
そもそも拡張機能って何って方は、こちらに記事まとめていますので参考にされてください。
【Chromeの拡張機能】開発 まとめ
v2からv3へのチェックリスト
公式ページに移行チェックリストがあります。
https://developer.chrome.com/docs/extensions/mv3/mv3-migration-checklist/
こちらの記事をベースに私自身が調査した内容も追記していきますので併せて参考にしてもらえると幸いです。
ブラウザアクション、ページアクションを使っている
統合されました。
マニフェストファイルに記載していた部分が”action”に統合されました。
[v2] "browser_action": {
"default_popup": "popup.html",
}, "action": {
"default_popup": "popup.html",
},ページアクションも同様です。
バックグランドページを使っている
サービスワーカーに切り替える必要があります。
結構注意するべきポイントなどが盛りだくさんなので別ページに記載しています。
Gitにソースコードも載せてます。
chrome.tabs関連のAPIを使用している。
こちらが結構面倒というか大変です。。。
tabs系が廃止されて、代わりにscripting系のAPIを使う必要があります。
引数の指定方法も若干変わっているぽくて、私の場合は単純に置換では解決しませんでしたorz
左がv2、右がv3です。
| tabs.executeScript（） | scripting.executeScript（） |
| tabs.insertCSS（） | scripting.insertCSS（） |
| tabs.removeCSS（） | scripting.removeCSS（） |
併せて、マニフェストに記載している”permissions”も”tabs”を削除して、”scripting”に変更が必要です。
web_accessible_resourcesの指定方法が変わった
拡張機能に画像や HTML、CSS、JavaScriptをパッケージして、ウェブページで使用できるようにしたい場合にマニフェストファイルに記載する部分です。
v3からこちらの指定方法が変わりました。
[v2] "web_accessible_resources": [
"test.html", "edit.js"
], "web_accessible_resources": [{
"matches": ["<all_urls>"],
"resources": ["test.html", "edit.js"]
}],元々は、使いたいリソースを配列で指定していたのが厳密になりました。
コード文字列からソースコードを実行している
V2では、tabs.executeScriptを使用して任意のコード文字列を実行できました。
V3では、任意のコードの実行は許可されていません。
代替え案としては、scripting.executeScriptAPIを使用して静的ファイルまたは関数を直接挿入する必要があります！
これがなかなか曲者で、私が担当している案件はモロにこれに該当していたため差し替えが必要になってしまっています。。
特に動的にコード文字列を生成していたので１つづずデバックで実際にどんな値が入るのか、他にどんな値が登録される可能性があるのか考慮する必要があるためかなり面倒臭い、、、orz
まとめ
v2からv3への変更は結構大変です。
特に以下の方はソースコードを変更する必要があり覚悟と猶予を持ってバージョンアップに臨む必要あります。
・コード文字列からソースコードを実行している
・バックグランドページでゴリゴリ記載している
・chrome.tabsを結構使っている
以上になります。
私自身もまだバージョンアップ途中ですので、気づいたことがあればこちらの記事を更新していこうと思います。
