Сегодня мы увидим, как сделать расширение для Google Chrome и как оно взаимодействует с домом текущей страницы. Расширение простое, в нем будет вход, в котором можно написать метку и при нажатии кнопки эти элементы, которые есть на странице, будут добавляться в красную рамку.

Полный код можно найти в этом репозитории

Файлы

Создайте в папке проекта следующие файлы:

  • manifest.json
  • всплывающее окно.html
  • всплывающее окно.js
  • фон.js

Манифест.json

Давайте начнем с создания файла manifest.json, который будет содержать сведения о нашем расширении, такие как (имя, описание), включая его разрешения.

{
  "name": "Gettin started example",
  "description": "i build a example for getting started",
  "version": "1.0.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html"
  }
}

сначала указываем имя описание и версии, продолжая чтение мы увидим свойство background › service_worker что очень важно так как мы должны зарегистрировать файл который будет выполняться в фоновом режиме в данном случае у нас есть файл который будет вызываться фон.js

Здесь вы можете более подробно посмотреть, что вы можете указать в своем манифесте.

Фон.js

Мы создадим файл с именем background.js, чтобы посмотреть, как он работает.

// background.js
chrome.runtime.onInstalled.addListener(function () {
  console.log("Hello from background");
});

Начните с включения события прослушивателя для runtime.onInstalled в ваш фоновый сценарий. Внутри прослушивателя onInstalled расширение покажет консольное сообщение, здесь мы также можем установить постоянные переменные и т. д.

Загрузите расширение в наш браузер

Мы собираемся перейти к диспетчеру расширений нашего браузера и активировать режим разработки.

Мы нажмем кнопку с надписью «Загрузить распакованное» и выберем папку, в которой находятся наши файлы.

Мы должны увидеть загруженное расширение, как на картинке

Теперь мы нажмем на представление проверки, где указано, что сервисный работник, откроется вкладка, и в консоли мы сможем увидеть наше сообщение Hello from background

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

Всплывающее окно.html

Как вы, возможно, уже заметили, у нас в манифесте есть свойство action: default_popup, в котором мы указываем файл с именем popup.html, в который мы собираемся поместить html-код с нашей формой:

<!DOCTYPE html>
<html>
  <body>
    <p>Tag for change the border</p>
    <input type="text" id="tagcolor" />
    <button id="changeColor">Change</button>
    <script src="popup.js"></script>
  </body>
</html>

У нас есть скрипт, который мы собираемся создать, с именем popup.js, и именно здесь мы собираемся написать логику, но давайте просмотрим содержимое нашего html, в котором есть ввод и кнопка с соответствующими идентификаторами, чтобы получить их с помощью js и уметь делать логику.

Popup.js

В этом файле мы собираемся сделать несколько вещей, первая — выбрать нашу кнопку по идентификатору.

let changeColor = document.getElementById("changeColor");

Теперь мы добавим событие click к этой кнопке, и в асинхронной функции мы выберем наш ввод и, таким образом, получим значение, которое мы записываем.

changeColor.addEventListener("click", async() => {
   let inputtag = document.querySelector("#tagcolor");
   chrome.storage.sync.set({ inputtag: inputtag.value });
   let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
   chrome.scripting.executeScript({
     target: { tabId: tab.id },
     function: setBorderColor,
   });
});
function setBorderColor() {
   chrome.storage.sync.get("inputtag", ({ inputtag }) => {
     document.querySelectorAll(inputtag).forEach((element) => {
       element.style.border = "1px solid red";
     });
   });
}

Мы отправим значение того, что мы пишем в нашем вводе, в наш storage.sync, чтобы позже получить к нему доступ из функции setBorderColor.

chrome.storage.sync.set({ inputtag: inputtag.value });

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

let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

Отправим на выполнение скрипт на экран, в котором находимся со следующим кодом

chrome.scripting.executeScript({
     target: { tabId: tab.id },
     function: setBorderColor,
   });

Внутри этой функции setBorderColor документ, в котором мы будем делать выборку, уже тот, что на вкладке, которую мы указали, это уже не наш дом popup.html, это должно быть ясно, вне функции документ был эквивалентен документ popup.html нашего расширения.

Наконец, в функции setBorderColor мы получаем созданное нами постоянное значение, которое должно быть именем метки, идентификатора или класса, и в качестве обратного вызова мы выполним querySelectorAll, пройдемся по элементам и изменить свойство стиля. граница:

function setBorderColor() {
   chrome.storage.sync.get("inputtag", ({ inputtag }) => {
     document.querySelectorAll(inputtag).forEach((element) => {
       element.style.border = "1px solid red";
     });
   });
}

Теперь мы собираемся перейти на любую страницу и поставим имя метки, в этом случае я буду использовать div

Полученные результаты :

Здесь, как видите, мы используем различные инструменты Chrome, такие как хранилище, сценарии и вкладки, поэтому мы определяем их с самого начала в файле manifest.json.

Я надеюсь, что это действительно помогло вам, теперь ваша очередь практиковаться и исследовать.