偵錯擴充功能

擴充功能可享有 Chrome 開發人員工具為網頁提供的偵錯優勢，但擴充功能具有獨特的行為屬性。如要成為擴充功能偵錯大師，您必須瞭解這些行為、擴充功能元件如何相互運作，以及在何處找出錯誤。本教學課程可協助開發人員瞭解如何偵錯擴充功能。

找出記錄

擴充功能是由許多不同元件組成，這些元件各有職責。請在這裡下載損壞的擴充功能，開始尋找不同擴充功能元件的錯誤記錄。

背景指令碼

前往 chrome://extensions 的 Chrome 擴充功能管理頁面，並確認已開啟開發人員模式。按一下「載入未封裝的擴充功能」按鈕，然後選取損壞的擴充功能目錄。載入擴充功能後，應該會有三個按鈕：「詳細資料」、「移除」和「錯誤」，以紅色字體顯示。

圖片：擴充功能管理頁面上的錯誤按鈕

按一下「錯誤」按鈕，即可查看錯誤記錄。擴充功能系統在背景指令碼中發現問題。

Uncaught TypeError: Cannot read property 'addListener' of undefined

擴充功能管理頁面顯示背景指令碼錯誤

此外，選取「檢查檢視區塊」旁的藍色連結，即可開啟背景指令碼的 Chrome 開發人員工具面板。

開發人員工具顯示背景指令碼錯誤

返回程式碼。

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

更新程式碼，按一下右上角的「Clear all」按鈕，然後重新載入擴充功能。

內容指令碼

重新整理頁面，開啟彈出式視窗，然後按一下綠色方塊。結果... 背景顏色還是沒變！返回「擴充功能管理」頁面，然後...沒有「錯誤」按鈕。最有可能的原因是內容指令碼，因為這類指令碼會在網頁內執行。

開啟擴充功能嘗試變更的網頁開發人員工具面板。

網頁控制台顯示擴充功能錯誤

只有執行階段錯誤 (console.warning 和 console.error) 會記錄在擴充功能管理頁面。

如要從內容指令碼使用開發人員工具，請按一下「top」旁邊的下拉式箭頭，然後選取擴充功能。

Uncaught ReferenceError: tabs is not defined

錯誤訊息指出未定義 color。擴充功能可能未正確傳遞變數。 修正注入的指令碼，將顏色變數傳遞至程式碼。

  {code: 'document.body.style.backgroundColor = "' + color + '";'});

擴充功能分頁

以分頁顯示的擴充功能頁面記錄 (例如覆寫頁面和全頁選項)，可在網頁控制台和擴充功能管理頁面中找到。

監控網路要求

通常在最快的開發人員開啟開發人員工具之前，彈出式視窗就會發出所有必要的網路要求。如要查看這些要求，請在網路面板中重新整理。這會重新載入彈出式視窗，但不會關閉開發人員工具面板。

在「網路」面板中重新整理，即可查看彈出式視窗網路要求

宣告權限

擴充功能與網頁的功能類似，但通常需要權限才能使用特定功能，例如 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 開發人員工具，請參閱說明文件。