Последнее обновление: 5 ноября 2021 г.
В этом посте я собираюсь обобщить некоторые основные концепции разработки расширений Chrome, используя расширение Resource Download Chrome в качестве примера кода.
Репозиторий Github: https://github.com/sarettasarda/resources_download
В таблетках
При разработке расширений Chrome нужно знать 4 основных понятия:
- Всплывающее окно, которое вы видите, когда щелкаете значок расширения на панели инструментов.
- Сценарий содержимого, который запускается поверх существующих веб-страниц.
- Фоновый скрипт, работающий в фоновом режиме Google Chrome.
- Манифест, который связывает все вместе
Расскажи мне больше
Мы можем представить, что части, составляющие расширение 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.
Удачного развития!