拡張機能は、Chrome DevTools がウェブページに提供するデバッグ機能と同じ利点を活用できますが、独自の動作プロパティを備えています。拡張機能のデバッガの達人になるには、これらの動作、拡張機能コンポーネントの相互作用方法、バグを特定する場所を理解する必要があります。このチュートリアルでは、デベロッパーが拡張機能のデバッグについて基本的な理解を深めることができます。
ログを見つける
拡張機能はさまざまなコンポーネントで構成されており、これらのコンポーネントには個別の責任があります。問題のある拡張機能をこちらからダウンロードして、さまざまな拡張機能コンポーネントのエラーログを探します。
バックグラウンド スクリプト
Chrome 拡張機能管理ページ（chrome://extensions）に移動し、デベロッパー モードがオンになっていることを確認します。[Load Unpacked] ボタンをクリックし、破損した拡張機能のディレクトリを選択します。拡張機能が読み込まれると、[詳細]、[削除]、[エラー] の 3 つのボタンが赤色で表示されます。
[エラー] ボタンをクリックして、エラーログを表示します。拡張機能システムでバックグラウンド スクリプトの問題が見つかりました。
Uncaught TypeError: Cannot read property 'addListener' of undefined
また、[ビューを検査] の横にある青色のリンクを選択すると、バックグラウンド スクリプトの Chrome DevTools パネルを開くことができます。
コードに戻ります。
chrome.runtime.oninstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
バックグラウンド スクリプトは onInstalled イベントをリッスンしようとしていますが、プロパティ名には大文字の「I」が必要です。正しい呼び出しを反映するようにコードを更新し、右上にある [すべて消去] ボタンをクリックして拡張機能を再読み込みします。
ポップアップ
拡張機能が正しく初期化されたので、他のコンポーネントをテストできます。このページを更新するか、新しいタブを開いて developer.chrome.com の任意のページに移動し、ポップアップを開いて緑色の正方形をクリックします。何も起こりません。
拡張機能管理ページに戻ると、[エラー] ボタンが再び表示されます。クリックして新しいログを表示します。
Uncaught ReferenceError: tabs is not defined
ポップアップ エラーは、ポップアップを調べることで確認することもできます。
エラー tabs is undefined は、拡張機能がコンテンツ スクリプトを挿入する場所を認識していないことを示します。この問題は、tabs.query() メソッドを呼び出して、アクティブなタブを選択することで修正できます。
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
changeColor.onclick = function(element) {
let color = element.target.value;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.body.style.backgroundColor = color;'});
});
};
コードを更新し、右上にある [すべて消去] ボタンをクリックして、拡張機能を再読み込みします。
コンテンツ スクリプト
ページを更新してポップアップを開き、緑色のボックスをクリックします。背景の色は変わりません。拡張機能管理ページに戻ると、[エラー] ボタンがありません。原因として考えられるのは、ウェブページ内で実行されるコンテンツ スクリプトです。
拡張機能が変更しようとしているウェブページの DevTools パネルを開きます。
拡張機能の管理ページには、実行時エラー（console.warning と console.error）のみが記録されます。
コンテンツ スクリプト内から DevTools を使用するには、[top] の横にあるプルダウン矢印をクリックして、拡張機能を選択します。
エラーの内容は、color が定義されていないというものです。拡張機能が変数を正しく渡していない。挿入されたスクリプトを修正して、color 変数をコードに渡します。
{code: 'document.body.style.backgroundColor = "' + color + '";'});
拡張機能のタブ
タブとして表示される拡張機能ページのログ（オーバーライド ページやフルページ オプションなど）は、ウェブページ コンソールと拡張機能管理ページで確認できます。
ネットワーク リクエストをモニタリングする
多くの場合、速いデベロッパーでも DevTools を開く前に、ポップアップで必要なネットワーク リクエストがすべて実行されます。これらのリクエストを表示するには、ネットワーク パネル内から更新します。DevTools パネルを閉じずにポップアップを再読み込みします。
権限を宣言する
拡張機能にはウェブページと同様の機能がありますが、Cookie、ストレージ、クロスオリジン XMLHttpRequsts などの特定の機能を使用するには、権限が必要になることがあります。権限に関する記事と利用可能な Chrome API を参照して、拡張機能が manifestで適切な権限をリクエストしていることを確認します。
{
"name": "Broken Background Color",
"version": "1.0",
"description": "Fix an Extension!",
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
"options_page": "options.html",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
次のステップ
広告表示オプションのデバッグについて詳しくは、開発とデバッグをご覧ください。Chrome DevTools の詳細については、ドキュメントをご覧ください。