在 Microsoft Edge DevTools 中添加自定义工具

本文介绍自定义 DevTools 示例的代码。若要首先安装和运行示例，请参阅示例：自定义 DevTools 工具。

简介

与常规扩展一样，DevTools 扩展具有清单文件。开发扩展入门中介绍了这一点，其中提供了一个可以从开始的基本扩展示例。

扩展 DevTools 的扩展还包括：

要显示在 DevTools 工具面板中的呈现的 HTML 文件。
未呈现的 HTML 文件，在打开 DevTools 时运行，通常处理自定义 DevTools 工具和已检查网页之间的通信。

此 DevTools 扩展示例在 DevTools 和已检查的网页之间进行通信，并调用 DevTools API。

DevTools 扩展示例显示 DevTools 中的自定义工具，包括活动栏中的“自定义”选项卡和连接到选项卡的面板：

自定义选项卡

面板是 Microsoft Edge DevTools 中的工具页，以及活动栏中的工具选项卡。

另请参阅：

文件概述

DevTools 扩展示例包含以下文件：

文件	说明
`manifest.json`	有关扩展的信息：名称、说明、版本、清单版本和要在 DevTools 中显示的 HTML 页面。
`panel.html`	要显示在 DevTools 中的自定义面板中的网页。
`devtools.html`	打开 DevTools 时运行的未呈现 HTML 文件，用于加载扩展的 JavaScript 文件。
`devtools.js`	自定义 DevTools 页的主逻辑。
`content_script.js`	扩展在检查的网页中注入的代码。将单击事件侦听器添加到将发送具有鼠标单击位置的消息的页面。 `devtools.js` 侦听此消息并显示自定义面板中的位置。
`icon.png`	在 DevTools 的“活动”栏和“ 更多工具 ”菜单中的工具选项卡上显示的图标。
`README.md`	开发人员有关如何使用示例的基本信息。

详细信息如下所示。

网页与 DevTools 之间的交互

需要多个文件才能在检查的网页和 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 中。

使用内容脚本检测用户在网页上的单击。内容脚本将此信息中继到 devtools.js 文件，其中数据显示在 DevTools 控制台 和 DevTools 自定义 工具（Microsoft Edge 扩展）中。

自定义 DevTools 工具的代码

自定义 DevTools 示例包含以下文件和代码。与检查的网页交互的代码执行以下操作：

在 自定义 DevTools 工具中显示内存信息。
单击网页时，显示 自定义 DevTools 工具中的鼠标单击位置。
在自定义 DevTools 工具中单击“Say Hello”按钮时，在检查的网页中显示问候语警报。

`manifest.json`

有关扩展的信息：名称、说明、版本、清单版本和要在 DevTools 中显示的 HTML 页面。

清单文件包含键/值对。顶级键称为成员。

扩展名需要此文件。清单包含有关扩展的以下信息：

成员	说明
`name`	将在下 `edge://extensions/`显示的扩展的名称。
`description`	将在扩展名称下显示的扩展的说明。
`version`	将在扩展名称旁边显示的扩展版本。
`manifest_version`	确定扩展将使用的功能集，例如网络请求修改。当前版本为版本 `3`。若要详细了解此版本以及版本的差异 `2`，请参阅迁移到清单 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"
    ]
}

中的permissionsmanifest.json清单成员定义扩展需要用户哪些权限。使用某些扩展 API 需要一些权限。 system-memory需要权限才能使用扩展 API。特定 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.createdevtools.js引用。网页 panel.html 包含自定义工具面板的用户界面。

上述元素演示了所检查页面与 DevTools 面板之间的交互。

当用户单击 sayHello DevTools 扩展中的按钮时，检查的窗口中会显示一个警报。

当用户单击所检查页中的任何位置时，鼠标单击坐标将显示在 DevTools 自定义工具中。

另请参阅：

panel.html - 存储库中的源文件。

`devtools.html`

打开 DevTools 时运行的未呈现的 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()在 DevTools 中创建新的自定义工具选项卡和面板。
当工具 (侦听器) 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
        });
    }
});

方法 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请将事件侦听器添加到sayHello文件中定义的panel.html按钮和youClickedOn标签。

当用户单击该按钮时 sayHello ， devtools.js 使用 chrome.devtools.inspectedWindow.eval() 方法直接在检查的窗口中运行代码。

当用户单击所检查窗口中的任意位置时，DevTools 扩展会收到一条消息，其中包含 request.click == true 和鼠标位置信息。

另请参阅：

devtools.js - 存储库中的源文件。
Microsoft Edge 扩展支持的 API
- chrome.devtools.panels
  - create ()

`content_script.js`

自定义 DevTools 工具在检查的网页中注入的代码。包含注入到所检查网页 (任何网页) 的 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`

在 DevTools 的“活动”栏和“ 更多工具 ”菜单中的工具选项卡上显示的图标。

icon.png 是可在 DevTools 的活动栏 和 “更多工具 ”菜单中的工具选项卡上显示的图标：

另请参阅：

icon.png - 存储库中的源文件。

另请参阅

Chrome 扩展文档：

存储库中的源文件：

反馈

此页面是否有帮助？

Last updated on 2026-06-13

在 Microsoft Edge DevTools 中添加自定义工具

简介

文件概述

网页与 DevTools 之间的交互

自定义 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`