ManifestV3移行のために、V2について確認してみた2021/12/15に公開Chrome拡張techはじめにV3にアップデートするにあたって、公式のガイドを元に変更点を整理し始めました。そもそもV2が分かっていないゆえに「?」となっていた点がありました。そこで、「?」をピックアップして、まずはV2がどうなっていたのかについて整理することにしました。V2がそもそも理解があやふやだけどV3移行にチャレンジしたいという、同じような方の参考になればと思い記事化します。やってみたこと公式ドキュメントの確認まず何が分かっていないか確認するために、公式のV3へのマイグレーションガイドを見てみましょう。これで分かるなら別にやることはないのだ。https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/ガイドから要点と「何がわからないのか」をピックアップして整理してみました。(注)筆者の意訳です。取って代わられるそもそもNWリクエストの変更って、何をどうやって行っていたの?リモートでホストされたコードは変更できない。拡張機能は任意の文字列を実行できなくなり、スクリプトファイルと関数のみを実行できるようになりました。このメソッドは、TabsAPIから新しいScriptingAPIにも移行しています。APIって何?V3にアップデートする前に、そもそもChromeの拡張機能開発で分かっていないことが多すぎました。そのため、一旦V2までのChromeの拡張機能開発について勉強することにしました。ぶっちゃけ移行マイグレーションチェックリストという公式ガイドを見れば漫然とできちゃうと思うのですが、とはいえもうちょい理解しておきたいな、という温度感です。https://developer.chrome.com/docs/extensions/mv3/mv3-migration-checklist/V2までのChrome拡張機能について最初に次の記事を見ながら、ざっと概要を掴みました。V2」を確認し、裏付けを取りました。https://developer.chrome.com/docs/extensions/mv2/概要V2までの仕様をまとめてみました。(注)筆者の意訳です。Chromeでは次の機能を拡張できるブラウザアクション(ツールバーのアイコンクリックで起動するやつ)ページアクション(ページ読み込み時に起動するやつ)コンテンツスクリプト(ページ読み込み時に起動やつ。https://developer.chrome.com/docs/extensions/mv2/getstarted/バックグラウンドページとイベントページ拡張機能であるからには、呼び出された時に実行される.jsファイルと、その指定がその指定が必要になる。2}じゃぁ、そのバックグラウンドページって何なんでしょうか?バックグラウンドページについてバックグラウンドページは拡張機能が実行時に呼び出されるJavaScriptファイルである。拡張機能の裏で常にメモリ上に展開されている拡張機能を読み込んだ時に1度だけ実行する処理や、イベントリスナの登録が必要な場合に有用である例えば、「クリックした時にダイアログを表示する」など。ところで、拡張機能から呼び出される.jsファイルにはもう1つの種類があります。「イベントページ」です。何が違うんでしょうか?イベントページについてバックグラウンドページは「常にメモリ上に展開され続ける」ことのデメリットがある具体例を一つ上げると、単純に動作が重くなってしまうというのが挙げられる。イベントページは、一定の時間が経過すると無効になり、メモリを開放するよって、同じことをするならイベントページで行うのがよい。APIを利用して延長するとよいところで、裏で動作するんじゃなくて、現在ユーザが表示中のページを構成しているDOM要素を読み込んだり変更を加えたりするにはどうするのでしょうか?そこでは「コンテンツスクリプト」が必要になります。コンテンツスクリプトについて実行させたいjsと、実行するための条件を指定します。具体的には実行させたいURLと実行するjsを次のように指定します。引用させていただきましたこれで、googleにアクセスした時にGoogleの背景を変更したりすることができますポップアップUIツールバーのアイコンをクリックした時にUIが表示される拡張機能を見たことがあると思います。それはどうやっているのかというと、表示用のUIを構成する.htmlと、ツールバーアイコンと、その指定が行われています。2}CSPについて拡張機能を作成するに当たり、重要な制約が存在します。それ無しにはセキュリティが担保できないためです。'self'"さいごにざっくりとV2について理解しました。次は実際にV3移行に着手していこうと思います。https://zenn.dev/katoaki/articles/4e7548b533d7b3katoakiAWSとWordPressバッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。