在 Microsoft Edge DevTools 中新增自訂工具

本文描述 Custom DevTools 範例的程式碼。要先安裝並執行範例，請參見範例：自訂開發工具工具。

簡介

像一般擴充功能一樣，DevTools 擴充功能有一個清單檔案。這在「開始開發擴充功能」中有說明，裡面有一個基本的擴充範例，你可以從中開始使用。

擴充 DevTools 的擴充還包括：

一個渲染好的 HTML 檔案，用來顯示在 DevTools 工具面板中。
一個非渲染的 HTML 檔案，當 DevTools 開啟時會執行，通常負責自訂 DevTools 工具與檢查網頁之間的通訊。

這個 DevTools 擴充範例會在 DevTools 與被檢查的網頁之間通訊，並呼叫 DevTools API。

DevTools 擴充套件範例中顯示了 DevTools 中的自訂工具，包括活動列中的自訂分頁，以及與分頁相連的面板：

自訂索引標籤

面板是 Microsoft Edge DevTools 中的一個工具頁面，與該工具的分頁在活動列中同時存在。

另請參閱:

檔案概述

DevTools 擴充功能範例包含以下檔案：

檔案	描述
`manifest.json`	關於擴充功能的資訊：名稱、描述、版本、manifest 版本，以及 DevTools 中顯示的 HTML 頁面。
`panel.html`	網頁要顯示在 DevTools 的自訂面板中。
`devtools.html`	一個未渲染的 HTML 檔案，當開啟 DevTools 時執行，用來載入擴充套件的 JavaScript 檔案。
`devtools.js`	自訂 DevTools 頁面的主要邏輯。
`content_script.js`	這些程式碼是擴充套件注入檢查網頁的程式碼。新增點擊事件監聽器，發送滑鼠點擊位置的訊息。 `devtools.js` 會監聽這則訊息，並在自訂面板中顯示位置。
`icon.png`	圖示顯示在 DevTools 活動欄工具的標籤頁及「更多工具」選單中。
`README.md`	開發者關於如何使用樣本的基本資訊。

詳情如下。

網頁與開發工具間的互動

需要多個檔案來實現被檢查網頁與 DevTools 之間的互動。這些檔案在不同的情境下會運行：

devtools.js 在自訂工具面板的 DevTools 中執行。
content_script.js 是 內容腳本，意即它會在被檢查的網頁上下文中執行。就像網頁載入其他腳本一樣，內容腳本也能存取 DOM 並能更改它。

DevTools 頁面、檢查頁面和內容腳本可整合成一個擴充功能：

顯示 DevTools 擴充功能的結構圖

content_script.js偵測使用者點擊檢查網頁的位置：

document.addEventListener("click", event => {
  chrome.runtime.sendMessage({
    click: true,
    xPosition: event.clientX + document.body.scrollLeft,
    yPosition: event.clientY + document.body.scrollTop
  });
});

內容腳本會將這些資訊傳達到檔案中 devtools.js ，資料會顯示在 DevTools 的自訂工具和 Console 工具中。

透過內容腳本偵測使用者點擊網頁。內容腳本會將這些資訊傳達到檔案中 devtools.js ，資料會同時顯示在 DevTools 主控台 和 Microsoft Edge 擴充功能的 DevTools 自訂工具中。

自訂開發工具的程式碼

自訂開發工具範例包含以下檔案與程式碼。與被檢查網頁互動的程式碼執行以下工作：

在自訂開發工具工具中顯示記憶體資訊。
當網頁被點擊時，會顯示 自訂開發工具 中的滑鼠點擊位置。
當在自訂開發工具工具中點擊「打招呼」按鈕時，會在檢查的網頁中顯示問候警示。

`manifest.json`

關於擴充功能的資訊：名稱、描述、版本、manifest 版本，以及 DevTools 中顯示的 HTML 頁面。

清單檔案包含鍵值對。頂層金鑰稱為成員。

這個檔案是必要的，因為要取得擴充功能。清單包含關於該延伸的以下資訊：

成員	描述
`name`	將出現在 `edge://extensions/`的擴展名稱。
`description`	將以延伸名稱顯示的擴充描述。
`version`	擴充功能名稱旁邊會出現的版本。
`manifest_version`	決定擴充功能將使用的一組功能，例如網路請求修改。目前版本為 `3`。欲了解更多關於此版本及版本間 `2`的差異，請參閱遷移至 Manifest V3 的概述與時間表。
`devtools_page`	每次開啟 DevTools 時都會執行的 HTML 檔案路徑，並載入該擴充套件的 JavaScript 檔案。這個頁面不是用 DevTools 渲染的。
`content_scripts`	使用者開啟指定網頁時使用的 JavaScript 或 CSS 檔案。請參閱 Chrome 文件中的內容腳本。
`permissions`	本地裝置需要權限才能查看系統記憶體容量，因為腳本會呼叫 API。

manifest.json:

{
    "name": "Custom DevTools Tool",
    "description": "A DevTools extension interacting with the inspected page",
    "manifest_version": 3,
    "version": "1.0",
    "devtools_page": "devtools.html",
    "content_scripts": [{
        "matches": [
            "http://*/*",
            "https://*/*"
        ],
        "run_at": "document_idle",
        "js": [
            "content_script.js"
        ]
    }],
    "permissions": [
        "system.memory"
    ]
}

permissions manifest manifest.json 成員定義擴充功能需要使用者取得哪些權限。使用某些擴充功能 API 需要某些權限。使用擴充功能 API 是必須取得 system-memory 的權限。特定 API 有相關權限。

成員內 content_scripts 的鑰匙：

機碼	值
`matches`	指定該內容腳本將注入哪些頁面。
`run_at`	表示瀏覽器何時將腳本注入頁面。
`js`	要注入的 JavaScript 檔案。

另請參閱:

manifest.json - 倉庫中的原始碼檔案。
擴充 API 參考

`panel.html`

網頁要顯示在 DevTools 的自訂面板中。

此檔案為必備。這是 DevTools 自訂面板中要顯示的網頁。

panel.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h2>Custom DevTools tool</h2>

    <h3>Memory</h3>
    <div>
      <b>Available Memory Capacity:</b> <span id="availableMemoryCapacity"></span>
    </div>
    <div>
      <b>Total Memory Capacity:</b> <span id="totalMemoryCapacity"></span>
    </div>

    <h3>Send message from DevTools to inspected page</h3>
    <input type="button" id="sayHello" value="Say hello to the inspected page">
    <h3>Send message from inspected page to DevTools</h3>
    <p>Click somewhere in the inspected webpage.</p>
    <div>
      <b>Coordinates:</b> <span id="youClickedOn"></span>
    </div>

  </body>
</html>

panel.html 在中被 chrome.devtools.panels.create 方法呼叫 devtools.js所引用。網頁 panel.html 包含自訂工具面板的使用者介面。

上述元素展示了被檢查頁面與 DevTools 面板之間的互動。

當使用者點擊 sayHello DevTools 擴充套件中的按鈕時，檢查視窗會顯示警示。

當使用者點擊檢查頁面的任何位置時，滑鼠點擊座標會顯示在 DevTools 的自訂工具中。

另請參閱:

panel.html - 儲存庫中的原始碼檔案。

`devtools.html`

一個未渲染的 HTML 檔案，當 DevTools 開啟時執行。此檔案為必備。

檔案名稱 devtools.html 必須與清單檔案中成員的值 devtools_page 相符。

devtools.html 包含 <script> 一個載入 devtools.js的元素：

devtools.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script src="devtools.js"></script>
  </body>
</html>

另請參閱:

devtools.html - 儲存庫中的原始碼檔案。

`devtools.js`

devtools.js 包含自訂開發工具頁面的主要邏輯。 devtools.js 這樣做如下：

在 DevTools chrome.devtools.panels.create()中透過建立新的自訂工具分頁和面板。
當工具顯示 (panel.onShown 聽) 時， availableMemoryCapacity 與 totalMemoryCapacity 元素會從 DOM 中擷取。
設定計時器，在面板顯示後每秒執行程式碼。
當計時器觸發時，會用此 chrome.system.memory.getInfo 方法取回裝置的可用及總記憶體容量，這些數值會顯示在對應的 DOM 元件中。

devtools.js:

let availableMemoryCapacity;
let totalMemoryCapacity;
let youClickedOn;

chrome.devtools.panels.create("Custom", "icon.png", "panel.html", panel => {
    // Code invoked on panel creation.
    panel.onShown.addListener( (extPanelWindow) => {
        // Memory API.
        availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity');
        totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity');
        // 2-way message sending.
        let sayHello = extPanelWindow.document.querySelector('#sayHello');
        youClickedOn = extPanelWindow.document.querySelector('#youClickedOn');
        sayHello.addEventListener("click", () => {
            // show a greeting alert in the inspected page
            chrome.devtools.inspectedWindow.eval('alert("Hello from the DevTools extension!");');
        });
    });
});

// Update the Memory display.
setInterval(() => {
    chrome.system.memory.getInfo((data) => {
        if (availableMemoryCapacity) {
            availableMemoryCapacity.innerHTML = data.availableCapacity;
        }
        if (totalMemoryCapacity) {
            totalMemoryCapacity.innerHTML = data.capacity;
        }
    });
}, 1000);

// Send a message from the inspected page to DevTools.
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    // Messages from content scripts should have sender.tab set.
    if (sender.tab && request.click == true) {
        console.log('I am here!');
        if (youClickedOn) {
            youClickedOn.innerHTML = `(${request.xPosition}, ${request.yPosition})`;
        }
        sendResponse({
            xPosition: request.xPosition,
            yPosition: request.yPosition
        });
    }
});

create該方法呼叫於：devtools.js

chrome.devtools.panels.create("Custom", "icon.png", "panel.html", panel => {
    // code invoked on panel creation
});

此 create 方法具有以下特徵：

chrome.devtools.panels.create(
    title: string, // Tool tab's label in Activity bar.
    iconPath: string, // Icon to display in tool's tab.
    pagePath: string, // Webpage to display in tool's panel.
    callback: function // Code to run when tool is opened.
)

要與被檢查的網頁通訊，devtools.js會在檔案中定義panel.html的按鈕和youClickedOn標籤中新增事件監聽sayHello器。

當使用者點擊 sayHello 按鈕時，會直接 devtools.js 在檢查視窗中執行程式碼，使用該 chrome.devtools.inspectedWindow.eval() 方法。

當使用者點擊檢查視窗中的任意位置時，DevTools 擴充功能會收到包含 request.click == true 滑鼠位置資訊的訊息。

另請參閱:

devtools.js - 儲存庫中的原始碼檔案。
支援 Microsoft Edge 擴充功能的 API
- chrome.devtools.panels
  - 創造 ()

`content_script.js`

程式碼會被自訂 DevTools 工具注入檢查網頁。包含注入被檢查網頁 (任何網頁) 的JavaScript。

此檔案可執行以下任務：

在檢查的網頁上新增點擊事件監聽器，透過呼叫 chrome.runtime.sendMessage傳送包含滑鼠點擊位置的訊息。
透過事件監聽器監聽頁面點擊事件。

內容腳本會將滑鼠點擊的座標傳送到檔案， devtools.js 座標會同時顯示在 Console 工具和 DevTools 的自訂工具中。

內容腳本會在檢查網頁的上下文中執行。就像網頁載入其他腳本一樣，內容腳本也能存取 DOM 並能更改它。

content_script.js:

document.addEventListener("click", (event) => {
  chrome.runtime.sendMessage({
      click: true,
      xPosition: event.clientX + document.body.scrollLeft,
      yPosition: event.clientY + document.body.scrollTop
    },
    response => {
      console.log("Received response", response);
    }
  );
});

另請參閱:

content_script.js - 儲存庫中的原始碼檔案。
內容腳本 - Chrome 文件。

`icon.png`

圖示顯示在 DevTools 活動欄工具的標籤頁及 「更多工具 」選單中。

icon.png 是 DevTools 活動列 中工具標籤頁及 「更多工具 」選單中顯示的圖示：

另請參閱:

icon.png - 儲存庫中的原始碼檔案。

另請參閱

Chrome 擴充功能文件：

儲存庫中的原始檔案：

意見反應

此頁面對您有幫助嗎？

Last updated on 2026-06-13

在 Microsoft Edge DevTools 中新增自訂工具

簡介

檔案概述

網頁與開發工具間的互動

自訂開發工具的程式碼

manifest.json

panel.html

devtools.html

devtools.js

content_script.js

icon.png

另請參閱

意見反應

其他資源

`manifest.json`

`panel.html`

`devtools.html`

`devtools.js`

`content_script.js`

`icon.png`