擴充開發人員工具

開發人員工具擴充功能可存取開發人員工具專屬的開發人員工具,為 Chrome 開發人員工具新增功能 。

顯示開發人員工具頁面與
         檢查期間和 Service Worker。Service Worker 已顯示
         與內容指令碼通訊,以及存取擴充功能 API。
         開發人員工具頁面可以存取開發人員工具 API,例如建立面板。
開發人員工具擴充功能架構。

開發人員工具專屬擴充功能 API 包括:

開發人員工具頁面

「開發人員工具」視窗開啟時,「開發人員工具」擴充功能會建立其「開發人員工具」頁面執行個體, 只要視窗處於開啟狀態,就會持續存在。這個頁面可存取開發人員工具 API 和擴充功能 API,並可執行下列操作:

開發人員工具頁面可以直接存取擴充功能 API。這包括 與 Service Worker 通訊 訊息傳遞

建立開發人員工具擴充功能

如要為擴充功能建立開發人員工具頁面,請在擴充功能中新增 devtools_page 欄位 資訊清單:

{
  "name": ...
  "version": "1.0",
  "devtools_page": "devtools.html",
  ...
}

devtools_page 欄位必須指向 HTML 網頁。由於開發人員工具 網頁必須為擴充功能的本機網頁,建議您使用相對網址加以指定。

只有透過開發人員工具載入的網頁才能使用 chrome.devtools API 的成員 。內容指令碼和其他擴充功能頁面沒有存取權 這些 API。

開發人員工具 UI 元素:面板和側欄窗格

除了一般的擴充功能 UI 元素 (例如瀏覽器動作、內容選單和彈出式視窗) 之外, 開發人員工具擴充功能可將 UI 元素新增至開發人員工具視窗:

  • 面板是頂層分頁,例如「元素」、「來源」和「網路」面板。
  • 側欄窗格會顯示與面板相關的補充 UI。樣式、計算樣式和 「元素」面板上的「事件監聽器」窗格是側欄窗格的範例。根據用途 以及「開發人員工具」視窗固定位置時,你的側欄窗格可能會 如下圖所示:
,瞭解如何調查及移除這項存取權。
「DevTools」視窗顯示「Elements」面板和「Styles」側欄窗格。
開發人員工具視窗顯示「Elements」面板和「Styles」側欄窗格。

每個面板都有專屬的 HTML 檔案,可包含其他資源 (JavaScript、CSS、圖片等) 開啟)。如要建立基本面板,請使用下列程式碼:

chrome.devtools.panels.create("My Panel",
    "MyPanelIcon.png",
    "Panel.html",
    function(panel) {
      // code invoked on panel creation
    }
);

在面板或側欄窗格中執行的 JavaScript,可存取開發人員工具頁面的 API。

如要建立基本側欄窗格,請使用下列程式碼:

chrome.devtools.panels.elements.createSidebarPane("My Sidebar",
    function(sidebar) {
        // sidebar initialization code here
        sidebar.setObject({ some_data: "Some data to show" });
});

在側欄窗格中顯示內容的方式有幾種:

  • HTML 內容:呼叫 setPage() 即可指定要在窗格中顯示的 HTML 網頁。
  • JSON 資料:將 JSON 物件傳遞至 setObject()
  • JavaScript 運算式:將運算式傳遞至 setExpression()。DevTools 會根據受檢查網頁的內容評估運算式,然後顯示傳回值。

如果是 setObject()setExpression(),窗格會顯示的值,與 開發人員工具控制台。不過,setExpression() 可顯示 DOM 元素和任意 JavaScript 物件,setObject() 則僅支援 JSON 物件。

在擴充功能元件之間進行通訊

以下各節說明一些允許開發人員工具元件的實用做法 之間的通訊

插入內容指令碼

如要插入內容指令碼,請使用 scripting.executeScript()

// DevTools page -- devtools.js
chrome.scripting.executeScript({
  target: {
    tabId: chrome.devtools.inspectedWindow.tabId
  },
  files: ["content_script.js"]
});

您可以使用 inspectedWindow.tabId 資源。

如果已插入內容指令碼,您可以使用訊息傳遞 API 來 與 Google 服務相互通訊

在檢查的視窗中評估 JavaScript

您可以使用 inspectedWindow.eval() 方法執行 JavaScript 與所檢查網頁相對應的程式碼。您可以透過開發人員工具頁面叫用 eval() 方法。 或側欄窗格

根據預設,運算式會根據網頁的主要頁框進行評估。 inspectedWindow.eval() 採用與程式碼相同的指令碼執行環境和選項 已在開發人員工具控制台輸入,該工具可存取開發人員工具控制台公用程式 API 功能。eval()舉例來說,SOAK 可用來檢查元素:

chrome.devtools.inspectedWindow.eval(
  "inspect($$('head script[data-soak=main]')[0])",
  function(result, isException) { }
);

您也可以在呼叫 inspectedWindow.eval() 時,將 useContentScriptContext 設為 true, 請在內容指令碼相同的情況下來評估運算式。如要使用這個選項,請先呼叫 executeScript() 或指定內容,先使用靜態內容指令碼宣告,再呼叫 eval() manifest.json 檔案中的指令碼。內容指令碼內容載入後,您也可以使用這個選項 插入其他內容指令碼。

將所選元素傳遞至內容指令碼

內容指令碼無法直接存取目前所選元素。但請注意, 透過「inspectedWindow.eval()可以使用開發人員工具 和主控台公用程式 API舉例來說,在經過評估的程式碼中,您可以使用 $0 存取 選取的元素

如何將所選元素傳遞至內容指令碼:

  1. 在內容指令碼中建立方法,以將所選元素做為引數。

    function setSelectedElement(el) {
        // do something with the selected element
    }
    
  2. 使用 inspectedWindow.eval() 透過開發人員工具頁面呼叫該方法 useContentScriptContext: true 選項。

    chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
        { useContentScriptContext: true });
    

useContentScriptContext: true 選項會指定運算式必須評估在 與內容指令碼相同,因此可以存取 setSelectedElement 方法。

取得參考面板的 window

如要從開發人員工具面板中呼叫 postMessage(),您需要參照其 window 物件的參照。取得 panel.onShown 事件處理常式取得面板的 iframe 視窗:

extensionPanel.onShown.addListener(function (extPanelWindow) {
    extPanelWindow instanceof Window; // true
    extPanelWindow.postMessage( // …
});

透過插入的指令碼將訊息傳送至開發人員工具頁面

直接插入網頁的程式碼,無需使用內容指令碼,包括附加 <script> 標記或呼叫 inspectedWindow.eval(),也無法傳送訊息給 使用 runtime.sendMessage() 的開發人員工具頁面。建議你改用 結合插入的指令碼與中介內容的內容腳本 window.postMessage() 方法。以下範例使用背景指令碼 請參閱上一節的內容:

// injected-script.js

window.postMessage({
  greeting: 'hello there!',
  source: 'my-devtools-extension'
}, '*');
// content-script.js

window.addEventListener('message', function(event) {
  // Only accept messages from the same frame
  if (event.source !== window) {
    return;
  }

  var message = event.data;

  // Only accept messages that we know are ours. Note that this is not foolproof
  // and the page can easily spoof messages if it wants to.
  if (typeof message !== 'object' || message === null ||
      message.source !== 'my-devtools-extension') {
    return;
  }

  chrome.runtime.sendMessage(message);
});

如要瞭解其他替代訊息傳送技術,請前往 GitHub

偵測開發人員工具的開啟和關閉時機

如要追蹤開發人員工具視窗是否已開啟,請新增 onConnect 事件監聽器 然後透過開發人員工具頁面呼叫 connect()。由於 每個分頁都可以開啟專屬的開發人員工具視窗,你可能會收到多個連結事件。 如要追蹤任何開發人員工具視窗是否已開啟,請計算連線及取消連結事件,如下所示 在以下範例中:

// background.js
var openCount = 0;
chrome.runtime.onConnect.addListener(function (port) {
    if (port.name == "devtools-page") {
      if (openCount == 0) {
        alert("DevTools window opening.");
      }
      openCount++;

      port.onDisconnect.addListener(function(port) {
          openCount--;
          if (openCount == 0) {
            alert("Last DevTools window closing.");
          }
      });
    }
});

開發人員工具頁面會建立如下所示的連線:

// devtools.js

// Create a connection to the service worker
const serviceWorkerConnection = chrome.runtime.connect({
    name: "devtools-page"
});

// Send a periodic heartbeat to keep the port open.
setInterval(() => {
  port.postMessage("heartbeat");
}, 15000);

開發人員工具擴充功能範例

本頁面的範例出自以下網頁:

更多資訊

如要進一步瞭解擴充功能可使用的標準 API,請前往 chrome*。*API網路 API

請提供寶貴意見!您的意見和建議有助於我們改善 API。

範例

如需使用開發人員工具 API 的範例,請參閱範例