建立一個 DevTools 擴充功能，新增自訂工具分頁和面板

本文提供了 Microsoft Edge 擴充套件的範例與程式碼攻略，該擴充套件在 DevTools 中新增了工具分頁與面板。

本文首先說明如何安裝並執行提供的 DevTools 擴充套件範例，該範例在 Microsoft Edge 的 DevTools 中新增了一個 範例面板 工具標籤。範例是一個運作中的 DevTools 擴充套件，能建立自己的面板，並與 DevTools API 互動。

接著這篇文章會呈現一個教學，展示你可以選擇從零開始製作該範例，並解釋每個範例開發步驟，以及新增程式碼的運作方式。這些教學步驟是體驗典型開發所需的一切的好方法。

另請參閱:

DevTools 概觀

下載、安裝並執行 DevTools 擴充套件範例

下載、安裝、執行並測試提供的完成 DevTools 擴充套件範例：

點擊 Demos-main.zip 下載最後的擴充功能程式碼，然後將其內容解壓到電腦上的資料夾。
打開 Microsoft Edge 並點到 edge://extensions/。
開啟 開發者模式 切換。
點選 「載入解壓」 ，然後導航到你解壓壓縮檔的資料夾。在此資料夾中，選擇 Demos-main>devtools-extension>範例 4，然後點選 「選擇資料夾」。

DevTools 擴充功能已經載入。
在 Microsoft Edge 中，開啟一個新分頁。
開啟 DevTools (F12) 。
選擇範例面板工具 () 分頁。

範例面板工具開啟：
點擊「 問候到檢查頁面 」按鈕。

檢查頁面會顯示警示：
點擊確定按鈕關閉警報。
在檢查頁面中任意點選。

擴充面板顯示訊息： 您在檢查頁面中點擊位置 (199,509) ：
選擇 控制台 工具。

控制台 工具中 出現訊息：收到回應 >{xPosition： 199， yPosition： 509}：

你下載、安裝、執行並測試了提供的完成 DevTools 擴充套件範例。接下來，你從一個空目錄開始建立相同的範例。以下章節將說明程式碼的運作方式。

步驟 1：建立一個基本的 Microsoft Edge 擴充功能，並擁有 DevTools 網頁

如果你想建立以下每個主要步驟的檔案，請安裝像 Visual Studio Code 這樣的程式碼編輯器，並依照以下教學步驟手動重建上述範例 DevTools 擴充功能。你可以閱讀以下的程式碼攻略，分為四個主要步驟或階段。

Microsoft Edge 的基本擴充功能包含一個清單檔案 (manifest.json) 。由於此擴充功能是擴充 DevTools，因此也包含一個網頁檔案。 devtools.html 這兩個檔案都提供在 Microsoft Edge / Demos>/devtools-extension/sample 1/ 資料夾中。目錄中包含以下檔案：

devtools.html
manifest.json

manifest.json

manifest.json 是一個包含鍵值對的清單檔案。頂層金鑰稱為成員：

{
    "name": "DevTools Sample Extension",
    "description": "A Basic DevTools Extension",
    "manifest_version": 3,
    "version": "1.0",
    "devtools_page": "devtools.html"
}

成員	描述
`name`	將出現在 `edge://extensions/`的擴展名稱。
`description`	將以延伸名稱顯示的擴充描述。
`version`	擴充功能名稱旁邊會出現的版本。
`manifest_version`	決定擴充功能將使用的一組功能，例如服務工作者或網路請求修改。目前版本為 `3`。欲了解更多關於此版本及版本間 `2`的差異，請參閱遷移至 Manifest V3 的概述與時間表。
`devtools_page`	每次開啟 DevTools 時都會執行的 HTML 檔案路徑，並載入該擴充套件的 JavaScript 檔案。這個頁面不是用 DevTools 渲染的。

devtools.html

devtools.html 與清單檔案中的成員相符 devtools_page ：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    A Basic DevTools Extension.
  </body>
</html>

在後續步驟中，你會在上述檔案中加入 <script> 一個元素，以載入 JavaScript 檔案。這個 HTML 檔案不會顯示在 DevTools 裡。

安裝並測試基本的 Microsoft Edge 擴充功能

本地載入並測試 Edge 擴充功能有時稱為側載擴充功能，與將擴充功能分發給使用者不同。

要在 Microsoft Edge 本地載入並測試基本擴充功能：

在 Microsoft Edge 中，請前往 edge://extensions/。
開啟 開發者模式 切換。
點 選「載入解包」，然後找到你寫擴充功能程式碼的資料夾，然後點選 「選擇資料夾 」按鈕。

你的 DevTools 擴充功能已經載入。
開啟一個新分頁。
開啟 DevTools (F12) 。

你的擴充功能已經載入，但開發工具裡還沒顯示，因為你還沒建立擴充功能面板。

另請參閱:

側載一個擴充功能來安裝並測試

步驟 2：在 DevTools 中新增自訂工具

在這個步驟中，你會在 DevTools) 建立一個新的面板 (工具標籤。您可以：

從 /devtools-extension/sample 2/ 資料夾複製並貼上程式碼Microsoft Edge / Demos>。該目錄包含以下檔案：
- devtools.html
- devtools.js - 在第二步新增。
- manifest.json
- panel.html - 在第二步新增。
從下方程式碼列表複製貼上程式碼。

面板是 DevTools 主工具列中的一個工具標籤，類似下方的元素（Elements）、主控台（Console）和來源（Sources）工具：

DevTools 面板與側邊欄

要建立一個基本的 DevTools 擴充功能並附上範例面板：

建立一個名為 devtools.js.

將以下程式碼複製並貼上至 devtools.js：

chrome.devtools.panels.create("Sample Panel", "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.
)

參考：

chrome.devtools.panels
- 創造 ()

devtools.html：

建立一個名為 devtools.html.
將以下程式碼複製並貼上至 devtools.html：
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script src="devtools.js"></script>
  </body>
</html>
```
在清單檔案 (manifest.json) 中，欄位 devtools_page 指定上述檔案 (devtools.html) 。 devtools.html上述包含 <script> 一個載入 devtools.js的元素。

panel.html：
建立 panel.html 你在前一個 chrome.devtools.panels.create 方法呼叫中引用的檔案。這個網頁會包含你擴充套件要加入 DevTools 的面板使用者介面。
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>A Basic DevTools Extension with Panel</h1>
  </body>
</html>
```

重新載入並測試 DevTools 擴充套件

要測試 Microsoft Edge 的變更，請從 edge://extensions/ 頁面重新載入你的擴充功能：

移至edge://extensions/。
在你寫程式碼前安裝的 DevTools 擴充套件範例旁邊，點選 Reload：

DevTools 擴充功能會重新載入，現在使用你上面建立的檔案，而不是你下載的範例。
在 Microsoft Edge 開啟一個新分頁。
開啟 DevTools (F12) 。
在 活動欄中，選擇 範例面板 工具 (分頁) ：

步驟 3：透過呼叫擴充 API 顯示記憶體資訊

在此步驟中，您將使用擴充 API 在 DevTools 面板中顯示記憶體資訊。為此，我們需要更新 manifest 檔案中的、 permissions 面板介面和 devtools 腳本。你可以從 /devtools-extension/sample 3/ 資料夾複製此步驟>Microsoft Edge / Demos的原始碼檔案，或依照以下指示自行建立檔案。目錄中包含以下檔案：

devtools.html
devtools.js - 更新於第三步。
manifest.json - 更新於第三步。
panel.html - 更新於第三步。

請使用你manifest.json檔案中的名單成員permissions。這位成員會定義你的擴充功能需要使用者取得哪些權限。使用某些擴充功能 API 需要某些權限。
```
"permissions": [
  "system.memory",
]
```
使用後續教學中會用到的擴充 API 是必須取得 system-memory 的權限。欲了解更多可用的 API 及相關權限，請參閱擴充 API 參考。

panel.html：

在檔案的主體 panel.html 中加入以下內容，以便在面板中顯示資料。

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

devtools.js：

用以下程式碼更新檔案。devtools.js

let availableMemoryCapacity;
let totalMemoryCapacity;

chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
    // code invoked on panel creation
    panel.onShown.addListener((extPanelWindow) => {
        availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity');
        totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity');
    });
});

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

上述程式碼片段的功能如下：

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

重新載入並測試 DevTools 擴充套件

要測試 Microsoft Edge 的變更，請從 edge://extensions/ 頁面重新載入你的擴充功能：

移至edge://extensions/。
在你的 DevTools 擴充功能旁邊，點選 Reload。

你的 DevTools 擴充功能已經重新載入。
開啟一個新分頁。
開啟 DevTools (F12) 。
選擇 範例面板 工具。

你的 DevTools 擴充功能顯示可用的記憶體容量和總容量：

另請參閱:

Reference

步驟 4：在網頁與 DevTools 之間互動

在教學的這一步，你會新增與被檢查網頁互動的程式碼。該代碼將：

聆聽網頁上發生的點擊事件，並將它們登入 DevTools 控制台 工具。
在 DevTools 擴充面板中顯示滑鼠點擊位置。
當使用者在 DevTools 擴充面板點擊按鈕時，會在檢查的網頁中顯示問候通知。

你可以從 /devtools-extension/sample 4/ 資料夾複製此步驟Microsoft Edge / Demos>的最終檔案，或依照以下指示自行建立檔案。目錄中包含以下檔案：

background.js - 在第 4 步新增。
content_script.js - 在第 4 步新增。
devtools.html
devtools.js - 在第 4 步更新。
manifest.json - 在第 4 步更新。
panel.html - 在第 4 步更新。

你目前建立的 DevTools 工具面板) (無法直接存取檢查過的網頁，且只有在開啟 DevTools 後才會執行。為此你會使用內容腳本和背景服務工作人員。

內容腳本會在檢查網頁的上下文中執行。就像網頁載入其他腳本一樣，內容腳本也能存取 DOM 並能更改它。
背景服務工作者是瀏覽器在獨立執行緒中執行的腳本。此腳本可存取 Microsoft Edge 擴充 API。

DevTools 頁面、檢查頁面、內容腳本與背景服務工作者可整合成一個擴充功能：

顯示 DevTools 擴充功能的結構圖

在教學的這一部分，你會透過內容腳本偵測使用者點擊網頁。內容腳本會將這些資訊傳達到檔案， devtools.js 資料會同時顯示在主控台和 DevTools 擴充面板中。

請在檔案中 manifest.json 附加以下程式碼：
```
"content_scripts": [{
  "matches": [
    "http://*/*",
    "https://*/*"
  ],
  "run_at": "document_idle",
  "js": [
    "content_script.js"
  ]
}],
"background": {
    "service_worker": "background.js"
}
```
機碼值

matches 指定該內容腳本將注入哪些頁面。

run_at 表示瀏覽器何時將腳本注入頁面。

js 要注入的 JavaScript 檔案。

content_script.js：
建立一個名為 content_script.js.

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

將以下程式碼複製並貼上至 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);
    }
  );
});

上述程式碼片段會在腳本注入頁面時，向主控台列印訊息。它還會在頁面新增點擊事件監聽器，透過 API 傳送滑鼠點擊頁面的 chrome.runtime.sendMessage 訊息。

panel.html：

在檔案中 panel.html ，請新增一個 sayHello 按鈕和 youClickedOn 標籤，如下：
```
<button id="sayHello">Say Hello to the inspected page!</button>
<h2><span id="youClickedOn"></span></h2>
```
上述兩個元素用來示範被檢查頁面、DevTools 面板與背景服務工作者之間的互動。當使用者點擊 sayHello DevTools 擴充功能中的按鈕時，會在檢查視窗中顯示問候訊息。當使用者在檢查頁面中任意點擊時，會顯示 DevTools 擴充面板中滑鼠點擊位置的訊息。

devtools.js：

在 devtools.js 檔案 (中，如下方所示) ，使用 chrome.runtime.connect 該方法建立與背景服務工作者的連線，然後使用此方法將檢查視窗 tabId 傳送給服務工作者 backgroundPageConnection.postMessage 。最後，在檔案中定義panel.html的按鈕和youClickedOn標籤中新增事件監聽器sayHello，如下所示：

let youClickedOn; 
chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
    // code invoked on panel creation
    panel.onShown.addListener( (extPanelWindow) => {
        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");');
        });             
    });
});

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 = `You clicked on position (${request.xPosition}, ${request.yPosition}) in the inspected page.`;
        }
        sendResponse({
            xPosition: request.xPosition,
            yPosition: request.yPosition
        });
    }
});

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

// Relay the tab ID to the background service worker
backgroundPageConnection.postMessage({
    name: 'init',
    tabId: chrome.devtools.inspectedWindow.tabId
});

當使用者點擊 sayHello 按鈕時，DevTools 擴充功能會在檢查視窗中執行一段程式碼 alert("Hello from the DevTools Extension"); 片段，方法是調用 eval() 檢查視窗 chrome.devtools.inspectedWindow的方法。

當使用者在檢查視窗中點擊任意位置時，DevTools 擴充功能會收到來自背景服務工作者的訊息，內容包含 request.click == true 滑鼠位置資訊。

background.js：

建立一個名為 background.js.

將以下程式碼複製並貼上至 background.js：

let id = null;
const connections = {};

chrome.runtime.onConnect.addListener(devToolsConnection => {
    // Assign the listener function to a variable so we can remove it later
    let devToolsListener = (message, sender, sendResponse) => {
        if (message.name == "init") {
            id = message.tabId;
            connections[id] = devToolsConnection;
            // Send a message back to DevTools
            connections[id].postMessage("Connected!");
        }
    };

    // Listen to messages sent from the DevTools page
    devToolsConnection.onMessage.addListener(devToolsListener);

    devToolsConnection.onDisconnect.addListener(() => {
        devToolsConnection.onMessage.removeListener(devToolsListener);
    });
});

上述程式碼將背景服務工作者與 DevTools 頁面連結起來。它會監聽 DevTools 頁面何時連線，儲存連線，然後回傳回應給 DevTools 頁面。

當你的背景服務工作者在背景收集資料或執行你希望在 DevTools 擴充套件中提供的資料時，這非常有用。

重新載入並測試 DevTools 擴充套件

測試新 sayHello 按鈕：

移至edge://extensions/。
找到你在步驟 1 中載入的未壓縮擴充功能條目。
點擊 重新裝填 按鈕。
開啟一個新的瀏覽器分頁， (F12) 開啟 DevTools，然後點擊 Sample Panel 工具 (分頁) 。
點擊「 向檢查頁面問好！ 」按鈕。

檢查頁面會顯示警示：
點擊確定按鈕關閉警報。
在檢查頁面中任意點選。

擴充面板顯示訊息： 您在檢查頁面中點擊位置 (199,509) ：
選擇 控制台 工具。

控制台 工具中 出現訊息：收到回應 >{xPosition： 199， yPosition： 509}：

這完成了 DevTools 擴充套件的教學與程式碼攻略，該擴充功能在 Microsoft Edge 的 DevTools 中新增工具分頁和面板。

另請參閱:

內容腳本

另請參閱

developer.chrome.com：

GitHub：

Demos-main.zip - 下載 MicrosoftEdge > Demos 的倉庫，而不是複製它。
/devtools-extension/ - 範例的原始碼。
- /devtools-extension/sample 1/ - 範例的第一階段。
- /devtools-extension/sample 2/ - 範例的第二階段。
- /devtools-extension/sample 3/ - 範例的第三階段。
- /devtools-extension/sample 4/ - 範例的第四階段。

工具：

Visual Studio Code

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-11-27

共用方式為

建立一個 DevTools 擴充功能，新增自訂工具分頁和面板

下載、安裝並執行 DevTools 擴充套件範例

步驟 1：建立一個基本的 Microsoft Edge 擴充功能，並擁有 DevTools 網頁

manifest.json

devtools.html

安裝並測試基本的 Microsoft Edge 擴充功能

步驟 2：在 DevTools 中新增自訂工具

重新載入並測試 DevTools 擴充套件

步驟 3：透過呼叫擴充 API 顯示記憶體資訊

重新載入並測試 DevTools 擴充套件

步驟 4：在網頁與 DevTools 之間互動

重新載入並測試 DevTools 擴充套件

另請參閱

意見反應

其他資源