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

В этой статье описывается код примера пользовательских средств разработки. Сведения о том, как сначала установить и запустить пример, см. в разделе Пример: пользовательское средство devTools.

Введение

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

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

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

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

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

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

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

См. также:

Общие сведения о файлах

Пример расширения DevTools содержит следующие файлы:

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

Подробные сведения приведены ниже.

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

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

devtools.js выполняется в контексте настраиваемой панели инструментов в средствах разработки.
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.js файл, где данные отображаются как в консоли DevTools, так и в пользовательском средстве DevTools, которое является расширением Microsoft Edge.

Средство Code for Custom DevTools

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

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

`manifest.json`

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

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

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

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

Член манифеста permissions в manifest.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 содержит пользовательский интерфейс панели пользовательского средства.

Приведенные выше элементы демонстрируют взаимодействие между проверяемой страницей и панелью 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().
При отображении средства (panel.onShown прослушиватель) availableMemoryCapacity элементы и 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() метода .

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

См. также:

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

`content_script.js`

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

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

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

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

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

Введение

Общие сведения о файлах

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

Средство Code for Custom 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`