在 Microsoft Edge 開發工具中新增自訂工具

本文描述自訂 DevTools 範例的程式碼。若要首次安裝並執行範例，請參閱範例：自訂 DevTools 工具。

簡介

就像一般擴充功能一樣，DevTools 擴充功能也有資訊清單檔案。這在開始開發擴充功能中所述，其提供您可以開始使用的基本擴充功能範例。

擴充 DevTools 的擴充功能還包含：

要顯示在 DevTools 工具面板中的轉譯 HTML 檔案。
未轉譯的 HTML 檔案，會在開發工具開啟時執行，通常用於處理自訂開發工具工具與檢查網頁之間的通訊。

此 DevTools 擴充功能範例會在 DevTools 與檢查的網頁之間通訊，並呼叫 DevTools API。

DevTools 延伸模組範例會在 DevTools 中顯示自訂工具，包括 [活動列] 中的 [自訂] 索引標籤，以及連線至該索引標籤的面板：

自訂索引標籤

面板是 Microsoft Edge 開發工具中的工具頁面，以及 [活動列] 中的工具索引標籤。

另請參閱:

檔案概觀

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

檔案	描述
`manifest.json`	擴充功能的相關資訊：名稱、描述、版本、資訊清單版本，以及要在開發工具中顯示的 HTML 頁面。
`panel.html`	網頁以顯示在開發工具的自訂面板中。
`devtools.html`	開發工具開啟時執行的未轉譯 HTML 檔案，用來載入擴充功能的 JavaScript 檔案。
`devtools.js`	自訂開發工具頁面的主要邏輯。
`content_script.js`	擴充功能插入檢查網頁中的程式碼。新增點擊事件接聽器至頁面，以滑鼠點擊位置傳送訊息。 `devtools.js` 接聽此訊息，並顯示在自訂面板中的位置。
`icon.png`	要顯示在工具索引標籤、開發工具活動列和 [ 其他工具 ] 功能表中的圖示。
`README.md`	提供給開發人員的關於如何使用範例的基本資訊。

詳情如下。

在網頁與開發工具之間互動

需要多個檔案，才能啟用檢查網頁與開發工具之間的互動。這些檔案會在不同的環境中執行：

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 的自訂工具和 主控台 工具中。

偵測使用者使用內容指令碼點選網頁。內容指令碼會將此資訊轉送至 devtools.js 檔案，其中資料會顯示在 DevTools 主控台 和作為 Microsoft Edge 延伸模組的 DevTools 自訂工具中。

自訂開發工具的程式碼

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

在自訂開發工具工具中顯示記憶體資訊。
在 [自訂 開發工具] 工具中顯示當您按一下網頁時，滑鼠按兩下的位置。
在自訂開發工具工具中按一下 [打招呼] 按鈕時，在檢查的網頁中顯示問候提醒。

`manifest.json`

擴充功能的相關資訊：名稱、描述、版本、資訊清單版本，以及要在開發工具中顯示的 HTML 頁面。

資訊清單檔案包含索引鍵/值組。頂層金鑰稱為成員。

此檔案為必要，且可作為副檔名。資訊清單包含下列有關擴充功能的資訊：

成員	描述
`name`	將顯示 `edge://extensions/`在下的擴充功能名稱。
`description`	將顯示在擴充功能名稱下的擴充功能說明。
`version`	將顯示在擴充功能名稱旁的擴充功能版本。
`manifest_version`	決定擴充功能將使用的功能集，例如網路要求修改。目前的版本是 `3`。若要深入了解此版本以及不同版本 `2`的差異，請參閱移轉至 Manifest V3 的時間表。
`devtools_page`	每次開啟 DevTools 時執行的 HTML 檔案路徑，並載入擴充功能的 JavaScript 檔案。此頁面不會在開發工具中轉譯。
`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.json定義擴充功能需要使用者提供的權限。使用特定擴充功能 API 需要一些權限。必須有 system-memory 權限才能使用擴充功能 API。特定 API 有相關聯的權限。

成員內的 content_scripts 索引鍵：

機碼	值
`matches`	指定將此內容指令碼插入的頁面。
`run_at`	指出瀏覽器將指令碼插入頁面的時間。
`js`	要插入的 JavaScript 檔案。

另請參閱:

manifest.json - 存放庫中的來源檔案。
擴充功能 API 參考

`panel.html`

網頁以顯示在開發工具的自訂面板中。

此檔案為必要項目。這是要在開發工具的自訂面板中顯示的網頁。

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在中devtools.js的方法呼叫中chrome.devtools.panels.create會參照。 panel.html網頁包含自訂工具面板的使用者介面。

上述元素示範檢查頁面與 [開發工具] 面板之間的互動。

當使用者按一下 sayHello 開發工具延伸模組中的按鈕時，警示會顯示在檢查視窗中。

當使用者按一下檢查頁面中的任何位置時，滑鼠按兩下座標會顯示在開發工具自訂工具中。

另請參閱:

panel.html - 存放庫中的來源檔案。

`devtools.html`

開發工具開啟時執行的未轉譯 HTML 檔案。此檔案為必要項目。

檔案名稱 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 頁面的主要邏輯。 devtools.js 執行下列動作：

在chrome.devtools.panels.create()開發工具中使用，在開發工具中建立新的自訂工具索引標籤和面板。
當工具顯示 (panel.onShown 接聽程式) 時， availableMemoryCapacity 會從 DOM 中擷取和 totalMemoryCapacity 元素。
設定計時器，在面板顯示後每秒執行一次程式碼。
當計時器觸發時，該 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
        });
    }
});

中devtools.js的方法create呼叫：

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請將事件接聽程式新增至sayHello檔案中panel.html定義的按鈕和youClickedOn標籤。

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

當使用者按一下檢查視窗中的任何位置時，開發工具擴充功能會收到包含滑鼠位置資訊的 request.click == true 訊息。

另請參閱:

devtools.js - 存放庫中的來源檔案。
Microsoft Edge 擴充功能支援的 API
- chrome.devtools.panels
  - 建立 ()

`content_script.js`

自訂開發工具工具插入檢查網頁中的程式碼。包含插入所檢查網頁 (任何網頁) 的 JavaScript。

這個檔案會執行下列工作：

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

內容指令碼會將滑鼠按兩下座標轉送至 devtools.js 檔案，其中座標會顯示在 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`

要顯示在工具索引標籤、開發工具活動列和 [ 其他工具 ] 功能表中的圖示。

icon.png 是要顯示在工具索引標籤、開發工具活動列和 [ 其他工具 ] 功能表中的圖示：

另請參閱:

icon.png - 存放庫中的來源檔案。

另請參閱

Chrome 擴充功能文件：

存放庫中的來源檔案：

意見反應

此頁面對您有幫助嗎？

Last updated on 2026-08-13

在 Microsoft Edge 開發工具中新增自訂工具

簡介

檔案概觀

在網頁與開發工具之間互動

自訂開發工具的程式碼

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`