Chrome拡張機能のデバッグ

拡張機能は３つ以上の要素でできている：

• ポップアップ：ツールバーに現れる拡張機能のアイコンをクリックしたときに表示される
• コンテンツスクリプト：拡張機能の対象となるページ全てで発動するスクリプト
• バックグラウンド、またはサービスワーカー：バックエンド的なもので、DOMにアクセスできないが他の要素の要求を処理できる
• 設定ページ

それぞれの要素をデバッグはそれぞれの「開発ツール」画面で行う必要がある。

簡単な方

• ポップアップのログ表示：ツールバーにある拡張機能のアイコンを右クリックして「検証する」を選択すればOK
• コンテンツスクリプトのログ表示：ページ自体を検証しないといけない
• 設定：「拡張機能を管理」→「詳細」→「拡張機能のオプション」で設定ページを開き、検証する。

background.jsのログ表示

参考文献：google chrome extension :: console.log() from background page?

chrome://extensions/を訪れ、ビューを検証をクリック：

次に*.htmlを選択しましょう（Service Workerもありますが、検証したところ何も表示されません）：

新しいDevToolsウィンドウが表示されます。

拡張機能の更新

VS CodeからLaunch Chromeを使っている場合、再デバッグしてもコードが更新されない可能性があるため、その場合はChromeで拡張機能を更新する。下図で示されるボタンのいずれを押せばOK。