偵錯擴充功能

擴充功能可存取 Chrome 開發人員工具為網頁提供的偵錯功能，但具有獨特的行為屬性。要成為主要擴充功能偵錯工具，需要瞭解這些行為、擴充功能元件如何彼此運作，以及角落錯誤的位置。本教學課程提供開發人員對擴充功能偵錯的基本知識。

找出記錄

擴充功能是由許多不同元件組成，這些元件具有個別的責任。在這裡下載損毀的擴充功能，即可開始找出不同擴充功能元件的錯誤記錄檔。

背景指令碼

前往 chrome://extensions 的 Chrome 擴充功能管理頁面，並確保開發人員模式已開啟。按一下「Load Unpacked」按鈕，然後選取損毀的擴充功能目錄。擴充功能載入後，應會顯示三個紅色按鈕：「Details」(詳細資料)、「Remove」(移除) 和「Errors」(錯誤)。

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

Uncaught TypeError: Cannot read property 'addListener' of undefined

此外，您可以選取「Inspect view」旁的藍色連結，為背景指令碼開啟 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」。更新程式碼以反映正確的呼叫，請按一下右上角的「Clear all」按鈕，然後重新載入擴充功能。

彈出式廣告

現在擴充功能已正確初始化，因此可以測試其他元件。請重新整理這個頁面，或開啟新分頁並前往 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;'});
    });
  };

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

內容指令碼

重新整理頁面，開啟彈出式視窗，然後按一下綠色方塊。而且背景也才不會變更顏色！返回「Extension Management」(擴充功能管理) 頁面，...畫面上未顯示「Errors」(錯誤) 按鈕。最可能的原因是內容指令碼是在網頁中執行。

在嘗試修改擴充功能的網頁開啟「開發人員工具」面板。

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

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

錯誤訊息顯示未定義 color。擴充功能不得正確傳送變數。 修正插入的指令碼，將顏色變數傳遞至程式碼。

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

擴充功能分頁

您可以在網頁控制台和擴充功能管理頁面中，找到以分頁標籤顯示的擴充功能頁面記錄，例如「覆寫網頁」和「完整頁面選項」。

監控網路要求

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

宣告權限

擴充功能的功能與網頁類似，但通常需要取得權限才能使用特定功能，例如 Cookie、儲存空間和 跨來源 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 開發人員工具，請參閱說明文件。