在 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 控制台 和作为 Microsoft Edge 扩展的 DevTools 自定义 工具中。

自定义 DevTools 工具的代码

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

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

`manifest.json`

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

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

此文件对于扩展是必需的。清单包含有关扩展的以下信息：

成员	说明
`name`	将显示 `edge://extensions/`在下面的扩展名。
`description`	将在扩展名称下显示的扩展的说明。
`version`	将显示在扩展名称旁边的扩展版本。
`manifest_version`	确定扩展将使用的功能集，例如网络请求修改。当前版本是 `3`version . 若要了解有关此版本以及不同版本 `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"
    ]
}

permissions中的manifest.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在的方法devtools.js调用中chrome.devtools.panels.create引用。 panel.html网页包含自定义工具面板的用户界面。

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

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

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

另请参阅：

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()在 DevTools 中创建新的自定义工具选项卡和面板。
当该工具显示 (panel.onShown 侦听器) 时， availableMemoryCapacity 将从 DOM 检索 and 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将事件侦听器添加到文件中panel.html定义的sayHello按钮和youClickedOn标签。

当用户单击该 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 其中坐标显示在 控制台工具和 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-08-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`