拡張機能をデバッグする

拡張機能はウェブページと同じ Chrome DevTools にアクセスできます。拡張機能のデバッグのエキスパートになるには、さまざまな拡張機能コンポーネントのログやエラーを見つける方法を理解している必要があります。このチュートリアルでは、拡張機能をデバッグするための基本的な方法について説明します。

始める前に

このガイドは、基本的なウェブ開発の経験があることを前提としています。お読みいただき 開発の基本をご覧ください。 ユーザー インターフェースの設計では、ユーザーの概要を知ることができます。 インターフェース要素について説明します。

拡張機能のブレーク

このチュートリアルでは、拡張機能コンポーネントを一度に 1 つずつ破損し、その修正方法を示します。次のセクションに進む前に、1 つのセクションで取り上げたバグを元に戻してください。まず、GitHub で破損した色のサンプルをダウンロードします。

マニフェストをデバッグする

まず、"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.

</ph>

マニフェスト キーが無効な場合、拡張機能の読み込みは失敗しますが、Chrome では警告が 提示します

変更を元に戻し、無効な権限を入力してどうなるかを確認してください。 "activeTab" 権限を小文字の "activetab" に変更します。

manifest.json:

{
  ...
  "permissions": ["activeTab", "scripting", "storage"],
  "permissions": ["activetab", "scripting", "storage"],
  ...
}

拡張機能を保存して、もう一度読み込んでみてください。今回は正常に読み込まれるはずです。拡張機能内 管理ページには、[詳細]、[削除]、[エラー] の 3 つのボタンが表示されます。エラー エラーが発生すると、ボタンのラベルが赤色になります。[Errors] ボタンをクリックして、 次のエラーが発生します。

Permission 'activetab' is unknown or URL pattern is malformed.

</ph>

次に進む前に権限を変更し、右上にある [Clear all] をクリックしてログを消去し、拡張機能を再読み込みします。

</ph> <ph type="x-smartling-placeholder">で確認できます。

Service Worker をデバッグする

ログの場所

Service Worker はデフォルトの色を storage に設定し、コンソールにログを記録します。このログを表示するには、[Inspect views] の横にある青色のリンクを選択して Chrome DevTools パネルを開きます。

</ph> <ph type="x-smartling-placeholder">で確認できます。

エラーの特定

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.');
  });
});

更新して [Errors] をクリックし、エラーログを表示します。最初のエラーは、Service Worker の登録に失敗したことを示しています。これは、開始中にエラーが発生したことを意味します。

Service worker registration failed. Status code: 15.

</ph> で確認できます。

実際のエラーは、次の後に発生します。

Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')

</ph>

バグを元に戻し、右上にある [Clear all] をクリックして、拡張機能を再読み込みします。

Service Worker のステータスを確認する

Service Worker がいつ起動してタスクを実行するかは、次の手順で確認できます。

1. [ビューを検証] の上にある拡張機能 ID をコピーします。 <ph type="x-smartling-placeholder">

   </ph> <ph type="x-smartling-placeholder">

2. ブラウザでマニフェスト ファイルを開きます。次に例を示します。 text chrome-extension://YOUR_EXTENSION_ID/manifest.json
3. ファイルを調べます。
4. [アプリケーション] パネルに移動します。
5. [Service Worker] ペインに移動します。

コードをテストするには、[status] の横にあるリンクを使用して Service Worker を起動または停止します。

</ph> <ph type="x-smartling-placeholder">

また、Service Worker のコードに変更を加えた場合は、[更新] または [skipWaiting] をクリックしてすぐに変更を適用できます。

</ph> <ph type="x-smartling-placeholder">で確認できます。

ポップアップをデバッグする

拡張機能が正しく初期化されたので、以下のハイライト表示されている行をコメントアウトして、ポップアップを分割しましょう。

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
    });
  });
});

拡張機能の管理ページに戻ります。[Errors] ボタンが再表示されます。クリックして 新しいログを表示します。次のエラー メッセージが表示されます。

Uncaught ReferenceError: tabs is not defined

</ph>

ポップアップを調べると、ポップアップの DevTools を開くことができます。

</ph> <ph type="x-smartling-placeholder">

エラー tabs is undefined は、拡張機能がコンテンツ スクリプトを挿入する場所を把握していないことを示しています。 これを修正するには、tabs.query() を呼び出してアクティブなタブを選択します。

コードを更新するには、右上の [Clear all] ボタンをクリックしてから、 あります。

コンテンツ スクリプトをデバッグする

次に、変数「color」を変更してコンテンツ スクリプトを壊します。to "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

</ph>

コンテンツ スクリプト内から DevTools を使用するには、[top] の横にあるプルダウン矢印をクリックして拡張機能を選択します。

</ph> <ph type="x-smartling-placeholder">

「colors が定義されていません」というエラーが表示されます。拡張機能が変数を正しく渡していない必要があります。 カラー変数をコードに渡すように、挿入されたスクリプトを修正します。

ネットワーク リクエストをモニタリングする

ポップアップでは、必要なすべてのネットワーク リクエストが、 デベロッパーが DevTools を開くことができます。これらのリクエストを表示するには、ネットワーク パネル内で更新してください。これは、 DevTools パネルを閉じずにポップアップを再読み込みします。

</ph> <ph type="x-smartling-placeholder">

権限を宣言する

一部の拡張機能 API 許可が必要です。詳しくは、権限に関する記事と Chrome API を使用して、拡張機能がマニフェストの適切な権限をリクエストしていることを確認します。

  {
    "name": "Broken Background Color",
    ...
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
  ...
  }

関連情報

Chrome Devtools について詳しくは、ドキュメントをご覧ください。