Расширения Chrome — что это такое?
Расширения — это программы, созданные на основе веб-технологий (таких как HTML, CSS и JavaScript), которые позволяют пользователям настраивать работу браузера Chrome.
Расширения Chrome довольно легко создавать, и они действительно могут расширить возможности вашего браузера и решить повторяющиеся задачи.
Обзор архитектуры
всплывающее окно.
Страницы пользовательского интерфейса расширения
background.js
фоновый скрипт — это обработчик событий расширения; он содержит прослушиватели событий браузера, которые важны для расширения.
contentscript.js
Расширения, которые читают или пишут на веб-страницы, используют сценарий контента.
Давайте создадим расширение для Chrome прямо сейчас.
Давайте сделаем расширение Chrome, чтобы быстро закрыть все открытые вкладки и открыть новую. Это займет менее 10 строк кода.
Щелкнув значок расширения, мы закрываем все открытые вкладки. Когда вы нажимаете на расширение, приложение должно прочитать все открытые вкладки и удалить их, а также создать новую вкладку.
Для этого примера нам не нужен какой-либо пользовательский интерфейс, и мы не изменяем и не читаем данные с вкладок пользовательского браузера. Таким образом, для расширения Chrome не требуется скрипт содержимого. Мы просто слушаем клики по значку расширения. Для этого нам понадобится файл background.js.
Шаг 1:
Создать новый каталог
Откройте терминал, создайте новый каталог с именем «close-all-tabs» и откройте свой любимый текстовый редактор.
mkdir close-all-tabs
Чтобы Chrome мог загрузить ваш плагин, файлы расширения должны быть указаны в папке на вашем компьютере. В этот каталог вы можете добавить все файлы, необходимые для вашего расширения.
Шаг 2
Создайте файл с именем manifest.json во вновь созданной папке.
Файл manifest.json содержит информацию о расширении. Он написан в формате JSON. В этом примере используется V3.
Подробнее о том, что он содержит, можно прочитать в документации для разработчиков Google Chrome: Формат файла манифеста
{ "manifest_version": 3, "name": "Close All Tabs", "description": "Close all open tabs and create an empty tab", "version": "0.0.1", "icons": { "48": "icons/48.png", "128": "icons/128.png" }, "background": { "service_worker": "background.js" }, "action": {} }
Шаг 3
Создайте background.js
он содержит прослушиватели событий браузера, которые важны для расширения. Он бездействует до тех пор, пока не будет запущено событие, а затем выполнит указанную логику. Эффективный фоновый скрипт загружается только тогда, когда он необходим, и выгружается, когда он простаивает.
// toolbar button event listener chrome.action.onClicked.addListener(function (thisTab) { chrome.tabs.create({}, function (newTab) { let querying = chrome.tabs.query({}, function (tabs) { for (let tab of tabs) { if (tab.id !== newTab.id) chrome.tabs.remove(tab.id); } }); }); });
Шаг 4
Создайте папку под названием icons и сохраните в ней значок нашего расширения в 3 разных размерах.
manifest.json
"icons": { "16": "icons/16.png", "48": "icons/48.png", "128": "icons/128.png" },
Шаг 5
Загрузить расширение в хром
- Перейдите на страницу chrome://extensions в браузере.
- Чтобы включить режим разработчика, установите флажок в правом верхнем углу, как показано выше:
- Чтобы загрузить распакованное расширение, щелкните Загрузить распакованное расширение, чтобы открыть диалоговое окно выбора файла.
- Расширение будет загружено и активировано, как только оно станет действительным! Сообщение появится в верхней части страницы, если он недействителен. Пожалуйста, исправьте ошибку и повторите попытку.
Пришло время протестировать наше расширение для Chrome.
- Закрепить расширение в браузере
- Открыть несколько вкладок
- Нажмите на расширение
Исходный код
Дополнительные ресурсы
Официальное руководство Google для начинающих — создайте расширение для браузера Chrome