Поделиться через

Создание расширения DevTools, добавление пользовательской вкладки инструментов и панели

  • Статья

В этой статье представлен пример и пошаговое руководство по коду для расширения Microsoft Edge, которое добавляет вкладку инструментов и панель в devTools.

В этой статье сначала показано, как установить и запустить предоставленный пример расширения DevTools, который добавляет вкладку средства "Пример панели " в средствах разработки в Microsoft Edge. Пример представляет собой работающее расширение DevTools, которое создает собственную панель и взаимодействует с API Средства разработки.

Затем в этой статье представлено руководство, в которое показано, как при необходимости можно создать этот пример с нуля, а также объясняется каждый шаг разработки примера и как работает добавленный код. Эти инструкции по учебнику — это хороший способ испытать все, что необходимо для типичной разработки.

См. также:

Скачивание, установка и запуск примера расширения DevTools

Чтобы скачать, установить, запустить и протестировать предоставленный готовый пример расширения DevTools:

  1. Скачайте окончательный код расширения, щелкнув Demos-main.zip , а затем извлекив его содержимое в папку на компьютере.

  2. Откройте Microsoft Edge и перейдите по адресу edge://extensions/.

  3. Включите переключатель режим разработчика .

  4. Щелкните Загрузить неупакованным и перейдите в папку, в которой вы извлекли ZIP-файл. В этой папке выберите Demos-main>devtools-extension>sample 4 и нажмите кнопку Выбрать папку.

    Страница edge://extensions в Microsoft Edge с кнопками

    Загружается расширение DevTools.

  5. В Microsoft Edge откройте новую вкладку.

  6. Откройте средства разработки (F12).

  7. Выберите инструмент "Пример панели" (вкладка).

    Откроется инструмент "Пример панели ":

    Microsoft Edge, где на боковой стороне отображаются средства разработки с выбранным примером панели расширения

  8. Нажмите кнопку Сказать Hello на проверенную страницу.

    На проверенной странице отображается оповещение:

    Microsoft Edge с новой панелью расширений в средствах разработки сбоку и диалоговое окно оповещений

  9. Нажмите кнопку ОК , чтобы закрыть оповещение.

  10. Щелкните в любом месте проверяемой страницы.

    На панели расширения отобразится сообщение: вы щелкнули позицию (199, 509) на проверенной странице:

    Пример панели в средствах разработки, на которой отображается сообщение о позиции, нажатой

  11. Выберите средство Консоль .

    В средстве Консоли появится сообщение: Получено ответ >{xPosition: 199, yPosition: 509}:

    Средство консоли DevTools с сообщением о позиции, нажатой

Вы скачали, установили, запустили и протестировали предоставленный готовый пример расширения DevTools. На следующих шагах вы создадите тот же пример, начиная с пустого каталога. В следующих разделах объясняется, как работает код.

Шаг 1. Создание базового расширения Microsoft Edge с веб-страницей DevTools

Если вы хотите создать файлы для каждого основного шага ниже, установите редактор кода, например Visual Studio Code, чтобы выполнить приведенные ниже инструкции по созданию приведенного выше примера расширения DevTools вручную. Вы можете прочитать приведенное ниже пошаговое руководство по коду, представленное в виде четырех основных этапов или этапов.

Базовое расширение для Microsoft Edge состоит из файла манифеста (manifest.json). Так как это конкретное расширение расширяет возможности DevTools, это расширение также содержит файл веб-страницы , devtools.html. Эти два файла находятся в каталоге репозитория Microsoft Edge / Demos>/devtools-extension/sample 1/ . Каталог содержит файлы:

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

devtools.html

devtools.html соответствует члену devtools_page в файле манифеста:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    A Basic DevTools Extension.
  </body>
</html>

На следующем шаге вы добавите <script> элемент в файл выше, чтобы загрузить файл JavaScript. Этот HTML-файл не отображается в средствах разработки.

Установка и тестирование базового расширения Microsoft Edge

Локальная загрузка и тестирование расширения Edge иногда называется загрузкой неопубликованного расширения, а не распространением расширения среди пользователей.

Чтобы загрузить и протестировать базовое расширение локально в Microsoft Edge:

  1. В Microsoft Edge перейдите по адресу edge://extensions/.

  2. Включите переключатель режим разработчика .

  3. Щелкните Загрузить неупакованное, перейдите в папку, в которой вы написали код для расширения, а затем нажмите кнопку Выбрать папку .

    Расширение DevTools загружено.

  4. Откройте новую вкладку.

  5. Откройте средства разработки (F12).

Расширение загружено, но пока не отображается в средствах разработки, так как вы еще не создали панель для расширения.

См. также:

Шаг 2. Добавление пользовательского средства в средства разработки

На этом шаге вы создадите новую панель (вкладку инструментов) в средствах разработки. Вы можете:

  • Скопируйте и вставьте код из каталога репозитория Microsoft Edge / Demos>/devtools-extension/sample 2/ . Этот каталог содержит следующие файлы:

    • devtools.html
    • devtools.js — добавлено на шаге 2.
    • manifest.json
    • panel.html — добавлено на шаге 2.

  • Скопируйте и вставьте код из приведенных ниже списков.

Панель — это вкладка инструментов на панели инструментов main в средствах разработки, аналогичная приведенным ниже средствам "Элементы", "Консоль" и "Источники".

Панели и боковые панели DevTools

Чтобы создать базовое расширение DevTools с примером панели, выполните приведенные ниже действия.

  1. Создайте файл с именем devtools.js.

  2. Скопируйте и вставьте следующий код в 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.
)

    Ссылка:

    devtools.html:

  3. Создайте файл с именем devtools.html.

  4. Скопируйте и вставьте следующий код в 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:

  5. Создайте файл, panel.html на который вы ссылались в предыдущем chrome.devtools.panels.create вызове метода. Эта веб-страница будет содержать пользовательский интерфейс панели, добавляемой расширением в Средства разработки.

    <!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/ :

  1. Перейдите по адресу edge://extensions/.

  2. Рядом с примером расширения DevTools, который вы установили перед написанием собственного кода, щелкните Перезагрузить:

    Страница расширений Microsoft Edge, показывающая, где находится кнопка

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

  3. Откройте новую вкладку в Microsoft Edge.

  4. Откройте средства разработки (F12).

  5. На панели действий выберите инструмент Пример панели (вкладка):

    Вкладка и панель нового инструмента в средствах разработки

Шаг 3. Отображение сведений о памяти путем вызова API расширений

На этом шаге вы будете использовать API расширений для отображения сведений о памяти на панели Средства разработки. Для этого необходимо обновить в файле манифеста permissions , интерфейсе панели и скрипте средств разработки. Файлы исходного кода для этого шага можно скопировать из Microsoft Edge / Demos каталога репозитория >/devtools-extension/sample 3/ или создать файлы самостоятельно, следуя приведенным ниже инструкциям. Каталог содержит файлы:

  • devtools.html
  • devtools.js — Обновлено на шаге 3.
  • manifest.json — Обновлено на шаге 3.
  • panel.html — Обновлено на шаге 3.

  1. Используйте элемент манифеста permissions в файле manifest.json . Этот член определяет, какие разрешения требуются вашему расширению от пользователя. Для использования определенных API расширений требуются некоторые разрешения.

    "permissions": [
  "system.memory",
]

    Разрешение system-memory требуется для использования API-интерфейсов расширений, которые вы будете использовать далее в этом руководстве. Дополнительные сведения о доступных API и связанных разрешениях см. в справочнике по API расширений.

    panel.html:

  2. Добавьте следующий код в текст файла, panel.html чтобы отобразить данные на панели.

    <div>
  Available Memory Capacity: <span id="availableMemoryCapacity"></span>
</div>
<div>
  Total Memory Capacity: <span id="totalMemoryCapacity"></span>
</div>

    devtools.js:

  3. Обновите 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);

Приведенный выше фрагмент кода выполняет следующие действия:

  1. Создает новую панель Sample Panel в средствах разработки.

  2. При отображении панели (panel.onShown прослушиватель) availableMemoryCapacity элементы и totalMemoryCapacity извлекаются из модели DOM.

  3. Задает таймер для выполнения кода каждую секунду после отображения панели.

  4. При срабатывании таймера chrome.system.memory.getInfo метод используется для получения доступной и общей емкости памяти устройства, и эти значения отображаются в соответствующих элементах DOM.

Перезагрузка и тестирование расширения DevTools

Чтобы протестировать изменения в Microsoft Edge, перезагрузите расширение со страницы edge://extensions/ :

  1. Перейдите по адресу edge://extensions/.

  2. Рядом с расширением DevTools щелкните Перезагрузить.

    Расширение DevTools перезагрузится.

  3. Откройте новую вкладку.

  4. Откройте средства разработки (F12).

  5. Выберите инструмент Пример панели .

    В расширении DevTools отображаются доступные и общие объемы памяти:

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

См. также:

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

На этом шаге руководства вы добавите код, взаимодействующий с проверяемой веб-страницей. Этот код:

  1. Прослушивайте события щелчков, происходящие на веб-странице, и войдите в консоль DevTools.
  2. Отображение положения щелчка мыши на панели расширений DevTools.
  3. Когда пользователь нажимает кнопку на панели расширения DevTools, отображается оповещение о приветствии на проверенной веб-странице.

Вы можете скопировать файлы, которые являются конечным результатом этого шага, из Microsoft Edge / Demos каталога репозитория >/devtools-extension/sample 4/ или создать файлы самостоятельно, следуя приведенным ниже инструкциям. Каталог содержит файлы:

  • background.js — добавлено на шаге 4.
  • content_script.js — добавлено на шаге 4.
  • devtools.html
  • devtools.js — обновлено на шаге 4.
  • manifest.json — обновлено на шаге 4.
  • panel.html — обновлено на шаге 4.

Средство DevTools (панель), созданное на данный момент, не имеет прямого доступа к проверенной веб-странице и не запускается, пока не откроется DevTools. Для этого используется скрипт содержимого и фоновая рабочая роль службы.

  • Скрипт содержимого выполняется в контексте проверенной веб-страницы. Так же, как другие скрипты загружаются веб-страницей, скрипт содержимого имеет доступ к DOM и может изменить его.
  • Фоновая рабочая роль службы — это скрипт, который браузер выполняет в отдельном потоке. Этот скрипт имеет доступ к API расширений Microsoft Edge.

Страница DevTools, проверенная страница, скрипт содержимого и фоновая рабочая роль службы объединяются в расширение:

Схема, показывающая структуру расширения DevTools

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

  1. Добавьте следующий код в 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:

  2. Создайте файл с именем content_script.js.

  3. Скопируйте и вставьте следующий код в 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:

  4. panel.html Добавьте в файл кнопку sayHello и метку youClickedOn следующим образом:

    <button id="sayHello">Say Hello to the inspected page!</button>
<h2><span id="youClickedOn"></span></h2>

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

    devtools.js:

  5. devtools.js В файле (как показано ниже) используйте chrome.runtime.connect метод , чтобы создать подключение к фоновой рабочей роли службы, а затем отправить проверенное окно tabId в рабочую роль службы с помощью backgroundPageConnection.postMessage метода . Наконец, добавьте прослушиватели событий в кнопку sayHello и youClickedOn метку, определенную в panel.html файле, как показано ниже:

    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 запустит фрагмент alert("Hello from the DevTools Extension"); кода в проверяемом окне, вызвав eval() метод проверяемого окна chrome.devtools.inspectedWindow.

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

    background.js:

  6. Создайте файл с именем background.js.

  7. Скопируйте и вставьте следующий код в 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 кнопку, выполните следующие действия:

  1. Перейдите по адресу edge://extensions/.

  2. Найдите неупакованную запись расширения, загруженную на шаге 1.

  3. Нажмите кнопку Перезагрузить .

  4. Откройте новую вкладку браузера, откройте DevTools (F12) и щелкните инструмент Пример панели (вкладка).

  5. Нажмите кнопку Скажите Hello на проверенную страницу!

    На проверенной странице отображается оповещение:

    Microsoft Edge с новой панелью расширений в средствах разработки сбоку и диалоговое окно оповещений

  6. Нажмите кнопку ОК , чтобы закрыть оповещение.

  7. Щелкните в любом месте проверяемой страницы.

    На панели расширения отобразится сообщение: вы щелкнули позицию (199, 509) на проверенной странице:

    Пример панели в средствах разработки, на которой отображается сообщение о позиции, нажатой

  8. Выберите средство Консоль .

    В средстве Консоли появится сообщение: Получено ответ >{xPosition: 199, yPosition: 509}:

    Средство консоли DevTools с сообщением о позиции, нажатой

Это руководство и пошаговое руководство по созданию расширения DevTools, которое добавляет вкладку инструментов и панель в Средства разработки в Microsoft Edge.

См. также:

См. также