Hello Chrome extension (Manifest V3)
koshilife動機
自分のある定常ルーティンを楽にしたいという動機でChrome拡張が用途的に良さそうだったので、Chrome拡張の開発方法について入門した時のメモ。
Chrome拡張は歴史が長いAPI(since 2010年前半？)ということもあり、日本語での情報も多い。ただ古い情報も大量にHitするため、記事読む際には、どのマニフェストバージョンの仕様前提で書かれているのかを念頭に入れてから読むと、濃淡つけやすくて捗った感あり。
公式Doc
2022年5月時点だと Manifest V3がメインストリームなので、V3前提で進めた。
参考になった有り難い記事
v2だけど技術要素の全体感の把握に役立った記事。
Content/Popup/Backgroundの3主要概念についてわかりやすく整理されていて有り難い。
v3でもうちょっと詳しめのまとめ記事。サンプルコードもありとても理解が捗った。
V2からV3へ移行された方の記事。大きな変更点などスッと入ってきた。
V3でハンズオン形式で手を動かしながら手っ取り早く学ぶにはこちらもよかった。
TS, React, SaasでChrome拡張を開発する際の定番の素晴らしいテンプレート。
ちょっとしたサンプルコードもあり、理解に捗った。
各コンポーネント間の通信処理の参考に。
Google本家のサンプルアプリ
koshilifeDebug
Content
通常のWebページ開発同様、Developer Toolsを開いてその情報を元にデバッグ。
Popup
ブラウザの右上対象のChrome拡張のアイコンを右クリックして、「inspect popup」を押下すると
popupに対するdeveloper toolsが見れるのでその情報を元にデバッグ。
Background
chrome://extensions/
よりInspect views service worker と表示されているリンクより、
background専用の developer toolsが見れるのでその情報を元にデバッグ。