Последнее обновление: 5 ноября 2021 г.

В этом посте я собираюсь обобщить некоторые основные концепции разработки расширений Chrome, используя расширение Resource Download Chrome в качестве примера кода.

Репозиторий Github: https://github.com/sarettasarda/resources_download

В таблетках

При разработке расширений Chrome нужно знать 4 основных понятия:

  1. Всплывающее окно, которое вы видите, когда щелкаете значок расширения на панели инструментов.
  2. Сценарий содержимого, который запускается поверх существующих веб-страниц.
  3. Фоновый скрипт, работающий в фоновом режиме Google Chrome.
  4. Манифест, который связывает все вместе

Расскажи мне больше

Мы можем представить, что части, составляющие расширение Chrome, живут в своих собственных мирах.
Различные слова могут передавать отправку сообщений и настройку слушателей: https://developer.chrome.com/docs/extensions/mv3/messaging.

Мир № 1: всплывающее окно
Всплывающее окно — это просто мини-веб-страница. Тот, который появляется при нажатии на кнопку расширения. Он может быть создан с помощью HTML и CSS и выполняет JavaScript.
popup.js работает только в мире всплывающих окон, например, если мы запускаем

document.body.style.background = “red”;

всплывающий фон станет красным.

Мир #2: сценарий содержимого
Мы можем читать и изменять веб-страницы, на которых работает наше расширение Chrome, внедряя JavaScript и даже CSS, взаимодействуя с исходным кодом разработчика.
content.js выполняется внутри веб-страницы, на которой активно расширение. Добавление

document.body.style.background = “red”;

фон веб-страницы, на которой запущено расширение, станет красным.

Мир №3: фоновый скрипт
Название говорит само за себя: он работает в фоновом режиме браузера Chrome. Если расширение активно (переключатель расширения в вашем chrome://extensions/ включен), ваш фоновый скрипт будет бездействовать в фоновом режиме браузера Chrome до тех пор, пока не будет получено событие или не изменится статус.
В фоновый скрипт, мы можем обрабатывать такие события, как открытие новых вкладок, загрузка элементов, взаимодействие с историей браузера и т. д.
Подробнее на https://developer.chrome.com/docs/extensions/reference.

Манифест
В этом файле json мы объявляем информацию о расширении, это наш проект.
Если он используется, нам нужно объявить пути к наш фон, контент, скрипты всплывающих окон. Нам нужно объявить название расширений и другие обязательные поля. И мы можем настроить ограничения или исключения для наших расширений, например, объявив, на каких веб-страницах должно работать наше расширение. Подробнее на https://developer.chrome.com/docs/extensions/mv3/manifest.

Покажи мне код

В примере кода загружаются все ресурсы, соответствующие фильтру.

// popup.js
// in our popup html we define a searchBox, 
// in the js we get the input value
let filter = searchBox.value;
// to send a message we need to retrieve the id of 
// the active tab where the extension is running
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  var tabId = tabs[0].id;
  // from the popup world we send a message with the 
  // user input data (the filter) as request parameter
  chrome.tabs.sendMessage(tabId, filter)
});

— —

// content.js
// in the content script we set a message listener
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   // this function reads all links in the webpage 
   // where the extension is running,
   // content script in fact runs in the web page world, 
   // so it’s able to read the web page content
   // (see github repo for function details)
   var pageLinks = getLinksInWebpage(request.data);
   // from the current web page world 
   // we send a message with the list of the links 
   // that match the filter as request parameter
   chrome.runtime.sendMessage(pageLinks);
});

— —

// background.js
// also in the background script we set a message listener
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   // from the request, we retrieve the list of 
   // the links to download
   let filesToDownload = request.pageLinks;
   
   for (var i = 0; i < filesToDownload.length; i++) {
      // download each file
      chrome.downloads.download(url: filesToDownload[i]);
   }
});

Подробную информацию о расширении Chrome и примеры можно найти в официальной документации Google, а также в хорошо написанном посте Aggelos Arvanitakis.

Удачного развития!