Chrome拡張を2つ作ったのでそのときに調べたこととか理解したことのメモ(manifestはv3)
作ったChrome拡張と関連記事
両方Chrome Web Storeには公開してないがリポジトリは作った
1つ目は下記記事の内容をChrome拡張にしたもの
- 記事
CSVダウンロードがない画面でもCSVを落としたい - notebook
- リポジトリ
swfz/chrome-extension-table2csv: table to csv
2つ目は下記記事の内容をChrome拡張にしたもの
- 記事
ブックマークレットを使ってGoogleSlideでの発表中にユーザーツールのコメントを流す - notebook
- リポジトリ
両方cloneしたディレクトリを読み込ませれば使える
2つ目の拡張はまたあらためて宣伝記事を書く（予定）
公式チュートリアル
なにはともあれ公式のチュートリアルとりあえずやって感覚をつかむ
Getting started - Chrome Developers
1つ目の拡張ではoptions, popup, backgroundを使ったチュートリアルからコードをコピーして今回の要件に合わせて修正していった
素のJavaScriptでappendChildとかやっていくのは正直つらかった
フォームが増えてくる場合はReactなどでUI作ったほうが良さそうだよなと思ったがそれはそれで面倒そうだったのでこのときは頑張った
今なら
この辺を読んだあとなのでReactで作る
2つ目の拡張はこちらの記事の1つ目の記事を参考にして作った、めちゃくちゃ開発体験が良かったので今後はこの方法で作ると思う
Architecture
拡張を作るにあたって前提のアーキテクチャを理解していなかったので読んだ
Architecture overview - Chrome Developers
- Background script
拡張機能のイベントハンドラーです。拡張機能にとって重要なブラウザイベントのリスナーが含まれています
- Content Scripts
Webページの読み取りまたは書き込みを行う拡張機能は、コンテンツスクリプトを利用します。コンテンツスクリプトには、ブラウザに読み込まれたページのコンテキストで実行されるJavaScriptが含まれています。
- UI Elements(popup)
拡張機能のユーザーインターフェイスは、目的があり、最小限である必要があります。 UIは、ブラウジングエクスペリエンスを邪魔することなく、カスタマイズまたは強化する必要があります。
popupだとそもそもたたけないAPIがあるなど制限がある(確かcontent scriptsも)
たとえばダウンロード処理(chrome.downloads.download)は制限があるのでbackground scriptに任せる必要がある
この辺を最低限理解していないと「書いたけど動かない！」となって時間を溶かすことになる
ブックマークレットからの移植
自分は簡単な処理で済むものはブックマークレットで済ましてしまうことが多い
ブックマークレットで実現できないこともやりたいな、と思ってから拡張を作る
なのでだいたいブックマークレットからの移植という感じが多い
ブックマークレットで実現できること = Content Scriptsで実行できる
なので機能を追加したり、オプションで色々できることを増やさない限りはContent Scriptsにそのまま貼り付けるだけでも問題ない
ChromeのAPI
調べていく中で、できることがたくさんありそう（APIリファレンスがたくさんある）ということがわかった
時間見つけて一通り読んでみて、できること増やしたいと感じた
API Reference - Chrome Developers
メッセージのやりとり
popupとbackground間でのメッセージのやりとり、popupとcontent_scripts間でのメッセージのやりとりのスニペット
- background
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { sendResponse({result: true}); })
- content_scripts
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { sendResponse({result: true}); });
- popup
// popup to background chrome.runtime.sendMessage({ hoge: 'hoge', fuga: 'fuga' }) .... .... // popup to content_scripts const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); chrome.tabs.sendMessage(tab.id, {piyo: 'piyo'}, (res) => console.log('response', res));
chrome.storageを用いた設定の永続化
例だとoptionsというキーに拡張の設定を保存している
// 読み込み chrome.storage.sync.get(['options'], ({options}) => { }) // 書き込み chrome.storage.sync.set({options: []});
参考： Chromeエクステンションを作ろう：ストレージ編 - Qiita
ログ
backgroundのスクリプトのログはchrome拡張の管理画面でビューを検証 Service Worker をクリックするとDevToolが起動し流したログを閲覧できる
content_scripts, popupは使用しているタブ上のDevToolでログを閲覧できる
まとめ
とりとめのない内容で完全に自分用って感じになってしまった
自分としては思い出せるので良し、誰かしらの役に立てればさらに良し、と思うことにしておきます
