Добавление пользовательского инструмента в средства разработчика Microsoft Edge

В этой статье описан код примера Custom DevTools. Чтобы сначала установить и запустить пример, см . Пример: Настраиваемое средство разработчика.

Введение

Как и обычное расширение, расширение средств разработчика содержит файл манифеста. Это описано в руководстве " Начало разработки расширения", в котором представлен базовый пример расширения, с которого можно начать.

Расширение, расширяющее средства разработчика, дополнительно включает:

Отрисованный HTML-файл для отображения на панели средства в средствах разработчика.
Неотрисованный HTML-файл, который запускается при открытии средств разработчика и обычно обрабатывает взаимодействие между настраиваемым средством средств разработчика и проверяемой веб-страницей.

Этот пример расширения средств разработчика обменивается данными между средствами разработчика и проверяемой веб-страницей и вызывает API средств разработчика.

В примере расширения средств разработчика отображается настраиваемое средство в средствах разработчика, включая настраиваемую вкладку на панели действий и панель, подключенную к вкладке:

Настраиваемая вкладка

Панель — это страница инструментов в средствах разработчика Microsoft Edge вместе с вкладкой средства на панели действий.

См. также:

Обзор файлов

Пример расширения средств разработчика содержит следующие файлы:

Файл	Описание
`manifest.json`	Сведения о расширении: имя, описание, версия, версия манифеста и HTML-страница для отображения в средствах разработчика.
`panel.html`	Веб-страница для отображения на настраиваемой панели в средствах разработчика.
`devtools.html`	Неотрисованный HTML-файл, который запускается при открытии средств разработчика для загрузки файлов JavaScript расширения.
`devtools.js`	Основная логика для настраиваемой страницы средств разработчика.
`content_script.js`	Код, который расширение вставляет в проверяемую веб-страницу. Добавляет на страницу прослушиватель события щелчка, который будет отправлять сообщение с положением щелчка мыши. `devtools.js` Прослушает это сообщение и отобразит положение на настраиваемой панели.
`icon.png`	Значок для отображения на вкладке средства на панели действий средств разработчика и в меню "Дополнительные инструменты ".
`README.md`	Основные сведения для разработчиков об использовании примера.

Подробности см. ниже.

Взаимодействие между веб-страницей и средствами разработчика

Для взаимодействия между проверяемой веб-страницей и средствами разработчика требуется несколько файлов. Эти файлы выполняются в разных контекстах:

devtools.js запускается в контексте настраиваемой панели инструментов в средствах разработчика.
content_script.js является сценарием содержимого, что означает, что он выполняется в контексте проверяемой веб-страницы. Подобно тому, как другие сценарии загружаются веб-страницей, сценарий содержимого имеет доступ к 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
  });
});

Сценарий содержимого передает эти сведения в devtools.js файл, где данные отображаются в средствах разработчика, в инструменте "Пользовательский " и в средстве "Консоль ".

Обнаружение переходов пользователя на веб-странице с помощью сценария содержимого. Сценарий содержимого передает эти сведения в devtools.js файл, где данные отображаются как в консоли средств разработчика, так и в пользовательском средстве средств разработчика — расширении Microsoft Edge.

Код для инструмента DevTools

Пример Custom DevTools состоит из следующих файлов и кода. Код, который взаимодействует с проверяемой веб-страницей, делает следующее:

Отображает сведения о памяти в средстве Custom DevTools.
Отображает положение щелчка мышью в инструменте Custom DevTools при щелчке веб-страницы.
Отображение приветственного оповещения на проверенной веб-странице при нажатии кнопки приветствия в инструменте DevTools .

`manifest.json`

Сведения о расширении: имя, описание, версия, версия манифеста и HTML-страница для отображения в средствах разработчика.

Файл манифеста содержит пары ключ-значение. Клавиши верхнего уровня называются участниками.

Этот файл требуется для расширения. Манифест содержит следующие сведения о расширении:

Member	Описание
`name`	Имя расширения, которое будет отображаться в разделе `edge://extensions/`.
`description`	Описание расширения, которое будет отображаться под именем расширения.
`version`	Версия расширения, которая будет отображаться рядом с именем расширения.
`manifest_version`	Определяет набор функций, которые будет использовать расширение, например изменение сетевого запроса. Текущая версия — это версия `3`. Дополнительные сведения об этой версии и различиях с версией `2`см. в разделе Сроки перехода на Manifest V3.
`devtools_page`	Путь к HTML-файлу, который запускается при каждом открытии DevTools и загружает файлы 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"
    ]
}

Участник permissionsmanifest.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 ссылается в вызове chrome.devtools.panels.create метода в devtools.js. Веб-страница panel.html содержит пользовательский интерфейс панели пользовательского инструмента.

Приведенные выше элементы демонстрируют взаимодействие между проверяемой страницей и панелью средств разработчика.

Когда пользователь нажимает кнопку sayHello в расширении средств разработчика, в проверяемом окне отображается оповещение.

Когда пользователь щелкает в любом месте на проверяемой странице, координаты щелчка мышью отображаются в специальном средстве 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.js делает следующее:

Создает новую настраиваемую панель инструментов и вкладку в средствах разработчика с помощью chrome.devtools.panels.create().
При отображении средства (panel.onShown прослушивателя) availableMemoryCapacity элементы and totalMemoryCapacity извлекаются из DOM.
Устанавливает таймер для выполнения кода каждую секунду после отображения панели.
При срабатывании таймера метод 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 кнопке и youClickedOn метке, определенным в файле panel.html .

Когда пользователь нажимает sayHello кнопку, devtools.js запускает код непосредственно в проверяемом окне с помощью метода chrome.devtools.inspectedWindow.eval() .

Когда пользователь щелкает в любом месте в проверяемом окне, расширения средств разработчика получают сообщение с информацией о request.click == true положении мыши.

См. также:

devtools.js — исходный файл в репозитории.
Поддерживаемые API для расширений Microsoft Edge
- chrome.devtools.panels
  - create()

`content_script.js`

Код, вставляемый настраиваемым инструментом DevTools в проверяемую веб-страницу. Содержит JavaScript, внедренный в проверяемую веб-страницу (любую веб-страницу).

Этот файл выполняет следующие действия:

Добавляет прослушиватель событий click на проверенную веб-страницу, который отправляет сообщение, содержащее положение щелчка мыши, путем вызова chrome.runtime.sendMessage.
Прослушивает событие щелчка страницы через прослушиватель событий.

Сценарий содержимого передает координаты щелчка мышью в devtools.js файл, где координаты отображаются как в средстве "Консоль ", так и в средстве "Другое " в средствах разработчика.

Сценарий содержимого выполняется в контексте проверяемой веб-страницы. Подобно тому, как другие сценарии загружаются веб-страницей, сценарий содержимого имеет доступ к 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

Введение

Обзор файлов

Взаимодействие между веб-страницей и средствами разработчика

Код для инструмента 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`