Chrome DevTools がウェブページに提供しているものと同じデバッグ機能を拡張機能で活用できます。ただし、独自の動作プロパティがあります。マスター拡張機能デバッガになるには、こうした動作、拡張機能コンポーネントが連携する仕組み、バグがどこで見つけられるかを理解しておく必要があります。このチュートリアルでは、拡張機能のデバッグに関する基本的な知識をデベロッパーに紹介します。
ログを見つける
拡張機能はさまざまなコンポーネントで構成されており、これらのコンポーネントには個別の役割があります。さまざまな拡張機能コンポーネントのエラーログを確認するには、こちらから破損した拡張機能をダウンロードしてください。
バックグラウンド スクリプト
Chrome 拡張機能の管理ページ（chrome://extensions）に移動し、デベロッパー モードがオンになっていることを確認します。[Load Unpacked] ボタンをクリックし、破損した拡張機能のディレクトリを選択します。拡張機能が読み込まれると、赤色の文字で [Details]、[Remove]、[Errors] の 3 つのボタンが表示されます。
[エラー] ボタンをクリックして、エラーログを表示します。拡張機能システムで、バックグラウンド スクリプトに問題が見つかりました。
Uncaught TypeError: Cannot read property 'addListener' of undefined
また、[Inspect view] の横にある青色のリンクを選択すると、バックグラウンド スクリプト用に 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 の任意のページに移動し、ポップアップを開いて緑色の四角をクリックしてください。それで...何も起こりません。
拡張機能の管理ページに戻ると、[Errors] ボタンが再表示されます。これをクリックすると、新しいログが表示されます。
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;'});
});
};
コードを更新し、右上隅にある [すべて消去] ボタンをクリックして、拡張機能を再読み込みします。
コンテンツ スクリプト
ページを更新し、ポップアップを開いて緑色のボックスをクリックします。いや、背景の色は変わらないんだよ！拡張機能の管理ページに戻ります。[Errors] ボタンはありません。原因としては、ウェブページ内で実行されるコンテンツ スクリプトが考えられます。
拡張機能によって変更しようとしているウェブページの DevTools パネルを開きます。
ランタイム エラー（console.warning と console.error）のみが拡張機能の管理ページに記録されます。
コンテンツ スクリプト内から DevTools を使用するには、[top] の横にあるプルダウン矢印をクリックして拡張機能を選択します。
「color が定義されていない」というエラーが表示されます。拡張機能が変数を正しく渡さないようにする必要があります。挿入されたスクリプトを修正して、color 変数をコードに渡すようにします。
{code: 'document.body.style.backgroundColor = "' + color + '";'});
拡張機能タブ
タブとして表示される拡張機能ページのログ（ページのオーバーライドやフルページ オプションなど）のログは、ウェブページ コンソールと拡張機能管理ページで確認できます。
ネットワーク リクエストをモニタリングする
最も迅速なデベロッパーであっても、DevTools を開くことができる前に、このポップアップで必要なネットワーク リクエストがすべて行われることがよくあります。これらのリクエストを表示するには、ネットワーク パネル内から更新してください。これにより、DevTools パネルを閉じずにポップアップが再読み込みされます。
権限を宣言する
拡張機能にはウェブページと同様の機能がありますが、多くの場合、Cookie、ストレージ、Cross-Origin XMLHttpRequsts などの特定の機能を使用する権限が必要になります。権限に関する記事と利用可能な Chrome API を参照して、拡張機能がマニフェストで適切な権限をリクエストしていることを確認します。
{
"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 について詳しくは、ドキュメントをご覧ください。