chrome開発機能知識まとめ
ひげV3への移行で役立ちそうなことは、Tipsとして、2章の終わりに書くといいかも
ひげV2 から V3 への移行で役立ちそうなこと
Manifest V2 から Manifest V3 への移行で以前使われた以前から拡張機能を開発していた人はコードの書き換えを余儀なくされてしまった。いまから拡張機能の開発を始める人にとっては関係ない知識ではあるが、公式ドキュメントを読んでみると、役にたつ知識やなんとなく動かせそうで実は動かない例などを知ることができる。
サービスワーカー内で localStrage は使えない
localStrageはもともと非推奨だったがV3からはサービスワーカーで使えなくなった。chrome.strage API を使いなさいとのこと。そもそも web 開発でも localStorage を使うのはやめなさいというのが啓発されているものであり、セキュリティ向上のために使えなくなりました。
サービスワーカーで周期的な動作を使いたいときは Alarms API を使う
周期的な動作を行うときに setTimeout() や setInterval() を使いたくなる。しかし V3 以降ではこの関数は使わない方がいい。これを使ったとしても、サービスワーカーが終了するたびにタイマーがリセットされるからだ。
V3 では公式から提供されている Alarms API を使うことで繰り返して動作を行う機能を実装できる。
https://developer.chrome.com/docs/extensions/migrating/to-service-workers/#convert-timers
addListener はコールバックやPromiseの中に埋め込まない
V3 ではイベントが発火するとサービスワーカーが再初期化される。？？？？
よくわからん。
https://developer.chrome.com/docs/extensions/migrating/to-service-workers/#register-listeners
window はサービスワーカーで使えない
フロントエンド開発をしていると window オブジェクトには馴染みがあると思います。windowオブジェクトはタブごとに割り当てられているグローバル変数です。よく使われる alart()やdocumentは window オブジェクトのメソッドとプロパティです。またグローバル変数であることを利用してwindow に関数を生やすなどの使い方があります。
https://www.tumblr.com/hitsujiwool-blog/25562292144/module-patterns-of-javascript
この window オブジェクトが V3 以降ではサービスワーカーから使えなくなりました。
リモートホストされているコードは使えなくなった。
react や jQuery などCDNで読み込んで使うことができなくなりました。つまり拡張機能で使うコードは全て拡張機能に収めないといけません。使いたいと思っているライブラリは全てダウンロードして使う必要があります。
https://developer.chrome.com/docs/extensions/migrating/improve-security/#remove-remote-code
多くのAPIで Promise がサポートされた
コールバックも使えますが、Promise も使えるようになっているかも。** コールバック地獄 **という言葉があるように、コールバックを多用するとネストが深くなりコードが複雑になってしまいました。なので Promiss がサポートされてコードが簡潔になりました。またFirefoxとの互換性でも問題になっており、FirefoxはPromiseをサポートしているがChromeはそうではないことが問題になっていました。
参考サイト
ひげ用語集
| 名前 | 説明 |
|---|---|
chromeオブジェクト |
Chromeの拡張機能開発で使う便利なAPIが入っているグローバルオブジェクト。例えば右クリックをしたときに出てくるコンテキストメニュを操作するchrome.contextMenusやストレージを利用するときに使うchrome.storage のようなAPIがある。便利な機能が使えるということはそれなり権限が与えられることで、APIを利用するときはmanifest.jsonファイルに数行書き足すことが多い。chromeオブジェクトから呼び出せる関数は非同期関数であり、返り値をPromiseやコールバックで受け取って処理をする。利用できるAPIのリストはこちら
|
| manifest.json | 拡張機能を作るときに必須の設定ファイル。手動で作成する必要があ理、ルートディレクトリに配置しないといけない。拡張機能の情報や使用する権限などはほとんどすべてここに書く。ここにエラーがあるとそもそも拡張機能を読み込むことすらできないので一番大事なファイル。よく使うキーの説明は後で書く。 |
| content_script | 特定のウェブサイトにアクセスしてCSSやJSを挿入し、自分好みにカスタマイズすることができる機能。通常のWebサイトで実行されるCSSやJSのように、コンテンツスクリプトで挿入したCSSやJSも実行される。後述のservice_workerと連携して、Webページのデータを拡張機能に引き渡した処理や、クロスドメイン制約を超えたWeb通信も実現できる。 |
| service_worker | Webページとは別にバックグラウンド（別スレッド）で動作するJavaScirpt環境のこと。感覚としてはMVCのCとMの役割に近い。拡張機能とWebページの間にあるプロキシサーバーの役割をもち、データのやり取りを行う。Webページとは別のスレッドにあるのでDOMに直接アクセスすることができない。そのためここでイベントリスナを登録してコンテンツスクリプトなどから呼び出されて発火する機能を作成する。メッセージを通じてコンテンツスクリプトやポップアップとデータのやり取りを行う。イベントリスナーはトップレベルに記述する。サービスワーカーは30秒ほどで停止して、ここで定義したグローバル変数は消えてしまうため、データはchrome.storageを使うこと。ここが詳しい たまにめっちゃ詳しい記事があるのは一時期はやりかけたPWAでも使われているからっぽい。ここも V3への移行のSerice Workerのドキュメント
|
ほぼこれを参考にした
https://yamakisso.hatenablog.com/entry/2022/02/23/080234
https://www.satoshiiiblog.com/2022/05/07/%E3%80%90chrome%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%80%91sevice-worker%E3%81%A8%E3%81%AF%EF%BC%9F/
ひげやりたいことと使う機能
やりたい機能
ひげpermission よく使う機能一覧
拡張機能開発で使う主要な機能は permission で定義しないと利用できない。