Chrome Extension開発時のデバッグ方法

option 画面の devtool を表示する

extention の devtool を開くにはchrome://extensions/?id={your extension id}を開いて Inspect views に表示されているリンクをクリックすると表示できます。しかしここには設定画面のリンクが出てこないです。

設定画面のリンクを表示するには設定画面を開いた状態でchrome://extensions/?id={your extension id}を開くと表示されます。

storage の内容を確認する

chrome の storageAPI を使うとログインしている Google アカウント設定を共有させたりすることができる。

chrome.storage  |  API  |  Chrome for Developers

説明

https://developer.chrome.com/docs/extensions/reference/api/storage?hl=ja

デバッグ時にちゃんと保存されているのか？を確認するにはchrome://sync-internals/にアクセスして画像のようにSync Node Browserを選択、Extension settingsを選択、自分の開発している extension のところを開くと実際に保存されている JSON を確認することができます。

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist. というエラー

ローカルで extension を読み込ませているとめちゃめちゃ出るこのエラーは更新されたあとに extension を使ってるタブをリロードしていないと出るエラーです。消すにはタブをリロードすればよいです。