Вы когда-нибудь задумывались, что такое расширения для браузера и как они разрабатываются? Ответ проще, чем вы думаете. Они в основном написаны на javascript с небольшим количеством HTML и CSS и позволяют разработчикам расширять функциональные возможности браузера Chrome!

В этой статье мы рассмотрим процесс создания расширения для Chrome. Расширения для других браузеров работают так же, за исключением небольших отличий, поэтому не стесняйтесь исследовать их подробнее. Я постараюсь упростить свое объяснение, так что если вы не понимаете или думаете, что какую-то часть можно рассказать проще; не стесняйтесь сказать мне в разделе комментариев!

Основные ингредиенты

«Должен существовать» файл для каждого расширения — manifest.json. Это основа (и своего рода файл config) для вашего расширения. Кроме того, есть «фоновые сценарии», которые работают в фоновом режиме (например, сервис-воркер); «Сценарии контента», которые можно запускать на веб-страницах, «Компоненты пользовательского интерфейса» — это некоторые компоненты, такие как всплывающее окно (небольшое окно, которое открывается при нажатии на значок расширения), страница параметров и т. д. некоторые другие разделы, которые мы рассмотрим наиболее важными.

Манифест

В основе каждого расширения Chrome лежит файл manifest.json. Этот файл служит основой и файлом конфигурации для вашего расширения. Он содержит важную информацию и настройки, которые Chrome использует для понимания вашего расширения и управления им. Давайте рассмотрим ключевые поля, найденные в файле manifest.json:

  • manifest_version: указывает версию используемого формата файла манифеста. В современных расширениях Chrome рекомендуется использовать манифест V3. (Необходимый)
  • имя: определяет имя вашего расширения. Выберите описательный и лаконичный заголовок, точно отражающий цель расширения. (Необходимый)
  • версия: указывает номер версии вашего расширения. Увеличивайте это число всякий раз, когда вы хотите выпустить новую версию. (Необходимый)
  • описание: содержит краткое описание вашего расширения, которое отображается на странице «Управление расширениями» в настройках Chrome.
  • значки: позволяет определить значки, используемые для вашего расширения. Включите значки разных размеров, чтобы обеспечить правильное отображение во всех контекстах.
  • разрешения: указывает разрешения, необходимые вашему расширению для доступа к определенным API Chrome или пользовательским данным. Перечислите необходимые разрешения в зависимости от функциональности вашего расширения.

Ниже вы увидите простой файл manifest.json:

{
  "name": "My Extension",
  "description": "My first Chrome extension which i don't what it is going to do yet!",
  "manifest_version": 3,
  "version": "1.0.1",
  "icons": {
    "16": "/icons/ext-icon-16.png",
    "48": "/icons/ext-icon-48.png",
    "128": "/icons/ext-icon-128.png"
  },
  "permissions": ["tabs", "storage", "webNavigation"]
}

Чтобы загрузить расширение в Chrome, откройте chrome://extensions в браузере. Включите «Режим разработчика» в правом верхнем углу, а затем нажмите «Загрузить распакованное». Затем выберите каталог расширения, и если все настроено правильно, вы увидите свое расширение рядом с другими расширениями.

Как я упоминал ранее, попробуйте использовать манифест v3, как говорит Документы Google:

Поскольку Manifest V3 приближается к полнофункциональному паритету с V2, мы будем постепенно отказываться от Manifest V2 в 2023 году.

Фоновые скрипты (Service Worker)

Фоновые скрипты можно назвать сердцем вашего расширения. В основном они состоят из некоторых прослушивателей событий, которые могут запускаться действиями пользователя, другими частями расширения или самим браузером. Фоновые скрипты могут хранить данные, выполнять вызовы API и взаимодействовать с различными API Chrome. Здесь вы можете получить доступ к различным API Chrome, например chrome.storage или chrome.tabs .

Например, давайте рассмотрим прослушиватель событий, запускаемый при установке расширения:

chrome.runtime.onInstalled.addListener(() => {
  console.log("Hello World!");
});

В этом фрагменте кода «Hello World!» будет напечатан в вашей фоновой консоли после установки расширения.

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

chrome.runtime.onMessage.addListener( // this is the message listener
    function(message, sender, sendResponse) {
        fetch(`https://example.com/api/${message.string}`)
          .then((res) => res.json())
          .then(data => sendResponse(data))
    }
);

Не забудьте включить фоновый скрипт в файл манифеста:

{
  // ...
  "background": {
    "service_worker": "background.js"
  }
}

Скрипты контента

Скрипты содержимого позволяют вам вставлять файлы JavaScript в веб-страницы, что дает вам возможность манипулировать DOM и взаимодействовать с целевым веб-сайтом. Вы можете изменять элементы DOM, применять стили, добавлять или удалять элементы и даже взаимодействовать с фоновым сценарием для получения дополнительной функциональности.

Чтобы использовать сценарии содержимого, вы должны объявить поле content_scripts в файле манифеста.

{
  //...
  "content_scripts": [
    {
      "matches": ["https://www.google.com/"],
      "js": ["./content_scripts.js"]
    }
  ]
}

свойство matches определяет, на каких страницах должны запускаться сценарии. Вы даже можете добавить несколько файлов css для стилизации дополнительных элементов, которые вы добавляете в документ, используя свойство css.

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

//content_scripts.js
document.body.style.backgroundImage = "url(https://cdn.britannica.com/84/73184-050-05ED59CB/Sunflower-field-Fargo-North-Dakota.jpg)"

Теперь перейдите на страницу «Управление расширениями» в Chrome и обновите расширение. Вы должны увидеть, как фоновое изображение страницы Google изменится соответствующим образом:

Разрешения

Чтобы использовать некоторые API-интерфейсы Chrome, вам необходимо объявить соответствующие разрешения в свойстве разрешений манифеста. Некоторые часто используемые разрешения включают в себя:

  • «вкладки»: доступ к вкладкам Chrome.
  • «хранилище»: доступ к хранилищу браузера.
  • «activeTab»: доступ к текущей активной вкладке.
  • «bookmarks»: доступ к закладкам пользователя.
  • «уведомления»: отображать уведомления в браузере.

Действия

В файле манифеста ключ action помогает вам управлять поведением расширения на панели инструментов Chrome.

{
  //...
  "action": {
    "default_title": "Click Me!",
    "default_popup": "popup.html"
  }
}

После добавления вышеуказанной конфигурации в ваш манифест при наведении курсора на значок расширения на панели инструментов Chrome отобразится сообщение «Click Me!» заголовок. Щелчок по значку расширения откроет указанный «popup.html» во всплывающем окне.

Чтобы использовать эти функции, давайте добавим новый функционал в наше расширение. Когда пользователь нажимает кнопку во всплывающем окне, мы меняем цвет фона текущей веб-страницы.

Давайте создадим файл popup.html с кнопкой.

<!-- popup.html -->
<html>
  <head>
    <style></style>
  </head>
  <body>
    <h1>Change Google Background Image</h1>
    <button>Click to Change!</button>

    <script src="popup.js"></script>
  </body>
</html>

В файл popup.js добавьте следующий код для отправки сообщения в фоновый скрипт при нажатии кнопки:

document.querySelector("button").addEventListener("click", changeBackground);

function changeBackground() {
    chrome.runtime.sendMessage({message: "change-background"}, (response) => {
        // do sth here if you want
    });
}

При нажатии на кнопку будет выполнена функция changeBackground, которая отправляет сообщение с ключевым словом "change-background”.

Теперь давайте добавим файл background.js для получения сообщения и запустим скрипт на активной вкладке (главная страница Google), чтобы изменить фон.

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.message === "change-background") {
    chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
      chrome.scripting.executeScript({
        target: { tabId: tab.id },
        files: ["content_scripts.js"],
      });
    });
  }
});

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

Не забудьте обновить файл манифеста с необходимыми разрешениями:

{
  //...
  "permissions": ["scripting", "activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "Click to view popup",
    "default_popup": "popup.html"
  }
}

Убедитесь, что вы добавили разрешения, если вы не столкнетесь с ошибкой.

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

Доступные веб-ресурсы

Если вы хотите использовать какие-либо активы или ресурсы в своих кодах, убедитесь, что вы добавили их в свойство web_accessible_resources в файле манифеста. Вы можете указать отдельные ресурсы или использовать шаблоны для сопоставления.

{
  "web_accessible_resources": [{
    "resources": ["*.png", "*.svg"],
    "matches": ["https://*/*"]
  }]
}

Заключение

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

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

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

И так, чего же ты ждешь? Начните создавать расширение для Chrome сегодня и раскройте потенциал инноваций, автоматизации и упрощения просмотра веб-страниц.