私が作成したマウスジェスチャのChrome拡張機能 "Our Mouse Gesture"のManifestファイルをv2→v3に変更した際に実施したことのメモを残します。
どなたかのお役にたちましたら幸いです。
※ マウスジェスチャのChrome拡張機能 "Our Mouse Gesture"
※2022/7/16に追記
その後、Manifest v3でChrome拡張機能を作成するネタの記事を記載しました。そちらもよろしければご参照下さい。
- Chrome拡張機能(Manifest v3)で module を利用する方法 - holyblueのブログ
- Chrome拡張機能のManifest v3で発生するようになったエラー「Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.」のお話 - holyblueのブログ
1. Manifestファイルの変更
1-1. "manifest_version"の変更
まずは"manifest_version"の値を "2"→"3"へ書き換えます。
{ : "manifest_version": 3, : }
1-2. "background"セクション内部の変更
- "background.scripts"→"background.service_worker"に書き換えます。
- 複数のJSファイルを記載している場合は、1つだけに変更します。
1つだけ記載したJSファイルの格納場所がディレクトリ階層の配下の場合は、manifest.jsonと同じ階層に変更します。- "background.persistent" は削除します。
※2022/7/18に追記
2022年7月現在では、event.jsはmanifest.jsと同一階層では無くても動作するように修正されています。
★修正前
{ "background":{ "scripts": [ "js/jp/holyblue/event.js", "js/jp/holyblue/MouseGesturesActionClass.js", "js/jp/holyblue/common/defaultsettings.js", "js/jp/holyblue/common/MyLoggerClass.js" ], "persistent": true }, }
★修正後
{ "background":{ "service_worker": "event.js" }, }
2. service_worker JSファイル変更
2-1. 格納場所変更
service_worker JSファイル(旧Event JSファイル)は、manifest.jsonと同じフォルダに格納する必要がありますので移動します。
※2022/7/18に追記
2022年7月現在では、event.jsはmanifest.jsと同一階層では無くても動作するように修正されています。
2-2. 他JSファイルの読み込み
私の backgroud処理は、manifest.jsonの"background.service_worker"で指定したJSファイル以外に、複数のJSファイルで構成されています。 manifest v2の時は、それらの全JSファイルをmanifestファイルに記載することで処理が動作していました。 しかし、manifest v3では、manifestファイルには1つのJSファイルしか記載できません。 そのため、"background.service_worker"で指定したJSファイルの頭で、他のJSファイルを読み込むように処理を追加します。
// 外部JSファイルの読み込み importScripts("js/jp/holyblue/MouseGesturesActionClass.js"); importScripts("js/jp/holyblue/common/defaultsettings.js"); importScripts("js/jp/holyblue/common/MyLoggerClass.js"); :
※2022/7/16に追記
これは古い書き方のようでした。新しいimport文を用いた方法は以下の記事に記載をしましたのでよろしければそちらもご参照下さい。
3. content.jsの修正
3-1. event/optionからのメッセージ受信処理の修正
content.jsで、event/optionからのメッセージ受信するイベントを私の拡張機能は何故か"chrome.extension.onMessage.addListener"を使っていました。
★修正前
chrome.extension.onMessage.addListener( function(message, sender, sendResponse) { : });
manifest v2の時はこれで問題なく動作していたのですが、manifest v3に変更するとこれでは "undefined"エラーが発生するようになりました。
そこで "chrome.runtime.onMessage.addListener"に修正しました。
★修正後
chrome.runtime.onMessage.addListener( function(message, sender, sendResponse) { : });
4. 後日談
記載した方法で、manifest v3でChrome拡張機能はChromeに無事に読み込みは完了しました。
しかしマウスジェスチャの動作が異常に不安定になってしまいました。。。
具体的には、Chromeを起動し始めた時は動作するのですが、時間が経つと動作しなくなるという現象です。
思えば最初にこのマウスジェスチャを作成した時も、manifestファイルの"background.persistent"を最初は"false"にして、content.jsからbackgroudへメッセージを送信した時だけ動作するようにしていたのですが、マウスジェスチャの動作が異常に不安定でした(時間が経つと動作しなくなる)。
そのため、途中から"background.persistent : true"に設定して、常にbackgroudを常駐させる様にしたら、動作が安定したという経緯がありました。
manifest v3で "service_worker"になると、manifest v2で"background.persistent : false"にしたのと同様にcontent.jsからメッセージ送信があったときだけ動作する仕組みのようなので、同じように不安定になってしまうのかもしれません。。。
そのため、やむを得ず元に戻すことにしました。。。
5. 参考URL
以上。