拡張機能は、ウェブページに対して Chrome DevTools が提供するデバッグのメリットを活かすことができますが、独自の動作プロパティも備えています。拡張機能のデバッグの達人になるには、これらの動作、拡張機能のコンポーネントがどのように連携するか、バグをどこで突き止めるかを理解する必要があります。このチュートリアルでは、拡張機能のデバッグに関する基本的な知識を習得できます。
ログを見つける
拡張機能はさまざまなコンポーネントで構成されており、これらのコンポーネントには個別の責任があります。破損した拡張機能をこちらからダウンロードして、さまざまな拡張機能コンポーネントのエラーログの特定を開始します。
バックグラウンド スクリプト
chrome://extensions で Chrome 拡張機能の管理ページに移動し、デベロッパー モードがオンになっていることを確認します。[パッケージ化されていない拡張機能を読み込む] ボタンをクリックし、破損した拡張機能のディレクトリを選択します。拡張機能が読み込まれると、[詳細]、[削除]、[エラー] の 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 が定義されていません」というものです。拡張機能が変数を正しく渡していない可能性があります。挿入されたスクリプトを修正して、カラー変数をコードに渡します。
{code: 'document.body.style.backgroundColor = "' + color + '";'});
拡張機能タブ
オーバーライド ページや全画面オプションなどのタブとして表示される拡張機能ページのログは、ウェブページのコンソールと拡張機能の管理ページで確認できます。
ネットワーク リクエストをモニタリングする
ポップアップは、最も速いデベロッパーが DevTools を開く前に、必要なネットワーク リクエストをすべて行うことがよくあります。これらのリクエストを表示するには、ネットワーク パネル内で更新します。DevTools パネルを閉じずにポップアップを再読み込みします。
権限を宣言する
拡張機能はウェブページと同様の機能を備えていますが、Cookie、ストレージ、クロスオリジン XMLHttpRequest などの特定の機能を使用するには、権限が必要になることがよくあります。アクセス権限に関する記事と利用可能な 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 について詳しくは、ドキュメントをご覧ください。