拡張機能は、ウェブページと同じ Chrome DevTools にアクセスできます。拡張機能のデバッグのエキスパートになるには、さまざまな拡張機能コンポーネントのログとエラーを見つける方法を知っておく必要があります。このチュートリアルでは、拡張機能をデバッグするための基本的な手法について説明します。
始める前に
このガイドは、基本的なウェブ開発の経験があることを前提としています。拡張機能の開発ワークフローの概要については、開発の基本をご覧ください。ユーザー インターフェースを設計するでは、拡張機能で使用できるユーザー インターフェース要素の概要を説明します。
拡張機能の互換性を破る
このチュートリアルでは、拡張機能コンポーネントを 1 つずつ分割して、その修正方法について説明します。次のセクションに進む前に、1 つのセクションで発生したバグを元に戻すことを忘れないでください。まず、GitHub で Broken Color のサンプルをダウンロードします。
マニフェストをデバッグする
まず、"version"
キーを "versions"
に変更してマニフェスト ファイルを分割しましょう。
manifest.json:
{
"name": "Broken Background Color",
"version": "1.0",
"versions": "1.0",
"description": "Fix an Extension!",
...
}
次に、拡張機能をローカルに読み込んでみましょう。問題を示すエラー ダイアログ ボックスが表示されます。
Failed to load extension
Required value version is missing or invalid. It must be between 1-4 dot-separated integers each between 0 and 65536.
Could not load manifest.
マニフェスト キーが無効な場合、拡張機能の読み込みは失敗しますが、Chrome には問題の解決方法のヒントが表示されます。
変更を元に戻し、無効な権限を入力して、どうなるかご確認ください。
"activeTab"
権限を小文字の "activetab"
に変更します。
manifest.json:
{
...
"permissions": ["activeTab", "scripting", "storage"],
"permissions": ["activetab", "scripting", "storage"],
...
}
拡張機能を保存してから、もう一度読み込んでみてください。今回は正常に読み込まれるはずです。拡張機能の管理ページには、[Details]、[Remove]、[Errors] の 3 つのボタンがあります。エラーが発生すると、[Errors] ボタンのラベルが赤色に変わります。[Errors] ボタンをクリックして、次のエラーを確認します。
Permission 'activetab' is unknown or URL pattern is malformed.
次に進む前に、権限を元に戻します。右上にある [すべて消去] をクリックしてログを消去し、拡張機能を再読み込みします。
Service Worker をデバッグする
ログの特定
Service Worker はストレージにデフォルトの色を設定し、コンソールにログを記録します。このログを表示するには、[Inspect view] の横にある青色のリンクを選択して、Chrome DevTools パネルを開きます。
エラーの特定
onInstalled
を小文字の oninstalled
に変更して Service Worker を分割しましょう。
service-worker.js:
// There's a typo in the line below;
// ❌ oninstalled should be ✅ onInstalled.
chrome.runtime.onInstalled.addListener(() => {
chrome.runtime.oninstalled.addListener(() => {
chrome.storage.sync.set({ color: '#3aa757' }, () => {
console.log('The background color is green.');
});
});
更新して [エラー] をクリックすると、エラーログが表示されます。最初のエラーは、Service Worker が登録に失敗したことを示しています。これは、開始中にエラーが発生したことを意味します。
Service worker registration failed. Status code: 15.
実際のエラーは次の後に発生します。
Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')
報告したバグを元に戻し、右上にある [すべてクリア] をクリックして、拡張機能を再読み込みします。
Service Worker のステータスを確認する
Service Worker が復帰してタスクを実行するタイミングを特定するには、次の手順を実施します。
- [ビューを検証] の上にある拡張機能 ID をコピーします。
- ブラウザでマニフェスト ファイルを開きます。例:
text chrome-extension://YOUR_EXTENSION_ID/manifest.json
- ファイルを調べます。
- [Application] パネルに移動します。
- [Service Worker] ペインに移動します。
コードをテストするには、[status] の横にあるリンクを使用して Service Worker を開始または停止します。
また、Service Worker のコードに変更を加えた場合は、[更新] または [skipWaiting] をクリックすると、変更内容をすぐに適用できます。
ポップアップをデバッグする
拡張機能が正しく初期化されたので、以下のハイライト表示された行をコメントアウトしてポップアップを中断しましょう。
popup.js:
...
changeColorButton.addEventListener('click', (event) => {
const color = event.target.value;
// Query the active tab before injecting the content script
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
// Use the Scripting API to execute a script
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
args: [color],
func: setColor
});
});
});
[拡張機能の管理] ページに戻ります。[エラー] ボタンが再表示されます。これをクリックすると、新しいログが表示されます。次のエラー メッセージが表示されます。
Uncaught ReferenceError: tabs is not defined
ポップアップを確認して、そのポップアップの DevTools を開くことができます。
エラー tabs is undefined
は、拡張機能がコンテンツ スクリプトの挿入先を認識していないことを示しています。これを修正するには、tabs.query()
を呼び出してアクティブなタブを選択します。
コードを更新するには、右上にある [すべて消去] ボタンをクリックして、拡張機能を再読み込みします。
コンテンツ スクリプトをデバッグする
ここで、変数「color」を「colors」に変更して、コンテンツ スクリプトを中断しましょう。
content.js:
...
function setColor(color) {
// There's a typo in the line below;
// ❌ colors should be ✅ color.
document.body.style.backgroundColor = color;
document.body.style.backgroundColor = colors;
}
ページを更新し、ポップアップを開いて緑色のボックスをクリックします。何も起こりません。
拡張機能の管理ページに移動しても、[エラー] ボタンは表示されません。これは、ランタイム エラー console.warning
と console.error
のみが拡張機能の管理ページに記録されるためです。
コンテンツ スクリプトは、ウェブサイト内で実行されます。そのため、これらのエラーを見つけるには、拡張機能が変更しようとしているウェブページを調べる必要があります。
Uncaught ReferenceError: colors is not defined
コンテンツ スクリプト内から DevTools を使用するには、[top] の横にあるプルダウン矢印をクリックして拡張機能を選択します。
「colors
が定義されていない」というエラーが表示されます。拡張機能が変数を正しく渡していない。色変数をコードに渡すように、挿入されたスクリプトを修正します。
ネットワーク リクエストをモニタリングする
このポップアップで、デベロッパーがすぐに DevTools を開く前に、必要なネットワーク リクエストがすべて完了することがよくあります。これらのリクエストを表示するには、ネットワーク パネル内で更新します。DevTools パネルを閉じずにポップアップを再読み込みします。
権限を宣言する
一部の拡張機能 API では権限が必要です。権限に関する記事と Chrome API を参照して、拡張機能がマニフェストで正しい権限をリクエストしていることを確認します。
{
"name": "Broken Background Color",
...
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
...
}
関連情報
詳しくは、Chrome DevTools のドキュメントをご覧ください。