创建 DevTools 扩展，添加自定义工具选项卡和面板

项目
11/22/2024

本文提供在 DevTools 中添加工具选项卡和面板的 Microsoft Edge 扩展的示例和代码演练。

本文首先介绍如何安装和运行提供的 DevTools 扩展示例，该示例在 Microsoft Edge 内的 DevTools 中添加了“ 示例面板 工具”选项卡。此示例是一个工作 DevTools 扩展，用于创建自己的面板，并与 DevTools API 交互。

然后，本文演示了一个教程，演示如何选择性地从头开始创建该示例，并介绍了开发示例的每个步骤，以及添加的代码的工作原理。这些教程步骤是体验典型开发所需的一切的好方法。

另请参阅：

DevTools 概述

下载、安装和运行 DevTools 扩展示例

若要下载、安装、运行和测试提供的已完成的 DevTools 扩展示例，请执行以下操作：

单击 “Demos-main.zip ”，然后将其内容提取到计算机上的文件夹中，下载最终扩展代码。
打开 Microsoft Edge 并转到 edge://extensions/。
打开 “开发人员模式 ”切换。
单击“ 加载解压缩 ”并导航到解压缩 zip 文件的文件夹。在此文件夹中，选择“Demos-main>devtools-extension>示例 4”，然后单击“选择文件夹”。

DevTools 扩展已加载。
在 Microsoft Edge 中，打开一个新选项卡。
打开 DevTools (F12) 。
选择“ 示例面板” 工具 (选项卡) 。

此时会打开 示例面板 工具：
单击“对已检查页面说Hello”按钮。

“已检查”页中会显示一个警报：
单击“ 确定” 按钮关闭警报。
单击检查页中的任何位置。

扩展面板中显示一条消息： 单击了所检查页面中 (199、509) 的位置：
选择 “控制台” 工具。

控制台工具中会显示一条消息：接收的响应 >{xPosition： 199， yPosition： 509}：

你下载、安装、运行并测试了提供的已完成的 DevTools 扩展示例。在后续步骤中，从空目录开始创建同一示例。以下部分介绍了代码的工作原理。

步骤 1：创建具有 DevTools 网页的基本 Microsoft Edge 扩展

如果要为以下每个主要步骤创建文件，请安装代码编辑器（如 Visual Studio Code），以按照下面的教程步骤手动重新创建上述示例 DevTools 扩展。可以阅读下面的代码演练，其中介绍了四个主要步骤或阶段。

Microsoft Edge 的基本扩展由清单文件 (manifest.json) 组成。由于此特定扩展扩展了 DevTools，因此此扩展还包括网页文件 devtools.html。存储库 /devtools-extension/sample 1/ 目录中提供了Microsoft Edge / Demos>这两个文件。目录包含文件：

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`，请参阅迁移到清单 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 文件。 DevTools 中不显示此 HTML 文件。

安装和测试基本 Microsoft Edge 扩展

在本地加载和测试 Edge 扩展有时称为 旁加载 扩展，而不是向用户分发扩展。

若要在 Microsoft Edge 中本地加载并测试基本扩展，请执行以下操作：

在 Microsoft Edge 中，转到 edge://extensions/。
打开 “开发人员模式 ”切换。
单击“ 解压缩的加载”，导航到为扩展编写代码的文件夹，然后单击“ 选择文件夹 ”按钮。

DevTools 扩展已加载。
打开新选项卡。
打开 DevTools (F12) 。

扩展已加载，但尚未显示在 DevTools 中，因为你尚未为扩展创建面板。

另请参阅：

旁加载扩展以在本地安装和测试它

步骤 2：在 DevTools 中添加自定义工具

此步骤将在 DevTools 中 (工具选项卡) 创建新的面板。您可以：

复制并粘贴存储库 >/devtools-extension/sample 2/ 目录中的代码Microsoft Edge / Demos。该目录包含以下文件：
- devtools.html
- devtools.js - 在步骤 2 中添加。
- manifest.json
- panel.html - 在步骤 2 中添加。
复制并粘贴以下代码列表中的代码。

面板是 DevTools 中main工具栏中的工具选项卡，类似于如下所示的“元素”、“控制台”和“源”工具：

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
- create ()

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：
创建在上chrome.devtools.panels.create一panel.html个方法调用中引用的文件。此网页将包含扩展要添加到 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 扩展示例旁边，单击“ 重新加载”：

DevTools 扩展已重新加载，现在使用上面创建的文件，而不是下载的提供的示例。
在 Microsoft Edge 中打开新选项卡。
打开 DevTools (F12) 。
在 “活动”栏中，选择“ 示例面板” 工具 (选项卡) ：

步骤 3：通过调用扩展 API 显示内存信息

在此步骤中，你将使用扩展 API 在 DevTools 面板中显示内存信息。为此，我们需要更新 permissions 清单文件、面板界面和 devtools 脚本中的。可以从存储库 >/devtools-extension/sample 3/ 目录复制此步骤Microsoft Edge / Demos的源代码文件，也可以按照以下说明自行创建文件。目录包含文件：

devtools.html
devtools.js - 在步骤 3 中更新。
manifest.json - 在步骤 3 中更新。
panel.html - 在步骤 3 中更新。

在 permissions 文件中使用清单成员 manifest.json 。此成员定义扩展需要用户哪些权限。使用某些扩展 API 需要一些权限。
```
"permissions": [
  "system.memory",
]
```
需要 system-memory 权限才能使用本教程稍后将使用的扩展 API。若要了解有关可用 API 和关联权限的详细信息，请参阅扩展 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 将从 DOM 检索和 totalMemoryCapacity 元素。
设置一个计时器，以在显示面板后每秒运行一次代码。
当计时器触发时， chrome.system.memory.getInfo 方法用于检索设备的可用和总内存容量，这些值显示在相应的 DOM 元素中。

重新加载并测试 DevTools 扩展

若要在 Microsoft Edge 中测试更改，请从 edge://extensions/ 页面重新加载扩展：

转到 edge://extensions/。
在 DevTools 扩展旁边，单击“ 重新加载”。

DevTools 扩展已重新加载。
打开新选项卡。
打开 DevTools (F12) 。
选择 “示例面板” 工具。

DevTools 扩展显示可用内存容量和总内存容量：

另请参阅：

API 参考

步骤 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。
将以下代码复制并粘贴到中 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);
    }
  );
});
```
在页面中注入脚本时，上述代码片段会将消息输出到控制台。它还向页面添加一个单击事件侦听器，该侦听器将使用 chrome.runtime.sendMessage API 在检查的页面中使用鼠标单击位置发送消息。

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：

键	值
`matches`	指定此内容脚本将注入到哪些页面。
`run_at`	指示浏览器何时将脚本注入页面。
`js`	要注入的 javascript 文件。

在 devtools.js 文件 (中，如) 所示，使用 chrome.runtime.connect 方法创建与后台服务辅助角色的连接，然后使用方法将检查的窗口 tabId 发送到服务辅助角色 backgroundPageConnection.postMessage 。最后，将事件侦听器添加到sayHello文件中定义的panel.html按钮和youClickedOn标签，如下所示：

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 扩展将通过调用eval()检查窗口的方法，在检查的窗口中chrome.devtools.inspectedWindow运行代码片段alert("Hello from the DevTools Extension");。

当用户单击所检查窗口中的任意位置时，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 中加载的解压缩扩展条目。
单击“ 重载 ”按钮。
打开新的浏览器选项卡，打开 DevTools (F12) ，然后单击 示例面板 工具 (选项卡) 。
单击“说Hello到”检查页！“按钮。

“已检查”页中会显示一个警报：
单击“ 确定” 按钮关闭警报。
单击检查页中的任何位置。

扩展面板中显示一条消息： 单击了所检查页面中 (199、509) 的位置：
选择 “控制台” 工具。

控制台工具中会显示一条消息：接收的响应 >{xPosition： 199， yPosition： 509}：

完成创建 DevTools 扩展的教程和代码演练，该扩展可在 Microsoft Edge 的 DevTools 中添加工具选项卡和面板。

另请参阅：

Chrome 扩展文档中的内容脚本。

通过

创建 DevTools 扩展，添加自定义工具选项卡和面板

下载、安装和运行 DevTools 扩展示例

步骤 1：创建具有 DevTools 网页的基本 Microsoft Edge 扩展

manifest.json

devtools.html

安装和测试基本 Microsoft Edge 扩展

步骤 2：在 DevTools 中添加自定义工具

重新加载并测试 DevTools 扩展

步骤 3：通过调用扩展 API 显示内存信息

重新加载并测试 DevTools 扩展

步骤 4：网页与 DevTools 之间的交互

重新加载并测试 DevTools 扩展

另请参阅

反馈

其他资源