Расширения Chrome — что это такое?

Расширения — это программы, созданные на основе веб-технологий (таких как HTML, CSS и JavaScript), которые позволяют пользователям настраивать работу браузера Chrome.

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

Обзор архитектуры

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

Страницы пользовательского интерфейса расширения

background.js

фоновый скрипт — это обработчик событий расширения; он содержит прослушиватели событий браузера, которые важны для расширения.

contentscript.js

Расширения, которые читают или пишут на веб-страницы, используют сценарий контента.

Давайте создадим расширение для Chrome прямо сейчас.

Давайте сделаем расширение Chrome, чтобы быстро закрыть все открытые вкладки и открыть новую. Это займет менее 10 строк кода.

Щелкнув значок расширения, мы закрываем все открытые вкладки. Когда вы нажимаете на расширение, приложение должно прочитать все открытые вкладки и удалить их, а также создать новую вкладку.

Для этого примера нам не нужен какой-либо пользовательский интерфейс, и мы не изменяем и не читаем данные с вкладок пользовательского браузера. Таким образом, для расширения Chrome не требуется скрипт содержимого. Мы просто слушаем клики по значку расширения. Для этого нам понадобится файл background.js.

Источник Github.

Шаг 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

Загрузить расширение в хром

  1. Перейдите на страницу chrome://extensions в браузере.
  2. Чтобы включить режим разработчика, установите флажок в правом верхнем углу, как показано выше:
  3. Чтобы загрузить распакованное расширение, щелкните Загрузить распакованное расширение, чтобы открыть диалоговое окно выбора файла.
  4. Расширение будет загружено и активировано, как только оно станет действительным! Сообщение появится в верхней части страницы, если он недействителен. Пожалуйста, исправьте ошибку и повторите попытку.

Пришло время протестировать наше расширение для Chrome.

  1. Закрепить расширение в браузере
  2. Открыть несколько вкладок
  3. Нажмите на расширение

Исходный код

закрыть все вкладки

Дополнительные ресурсы

Официальное руководство Google для начинающих — создайте расширение для браузера Chrome

Справочник по API платформы Chrome

Обзор архитектуры расширений Chrome