Введение в WebExtensions

Если вы когда-нибудь задумывались, как настроить браузер Firefox так, чтобы он делал всё, что вы можете себе представить, вы попали по адресу. WebExtensions — это ключ к раскрытию этого потенциала, и в этой статье мы подробно рассмотрим, как вы можете создавать собственные расширения для Firefox с помощью API WebExtensions.

Что такое WebExtensions?

WebExtensions — это кроссбраузерная технология, которая позволяет создавать расширения для браузера Firefox, а также для других браузеров, таких как Google Chrome, Opera и Microsoft Edge. Это означает, что при небольшой доработке ваше расширение может работать на нескольких платформах, что делает ваши усилия по разработке более универсальными.

Базовая структура WebExtension

Прежде чем мы начнём программировать, давайте взглянем на базовую структуру проекта WebExtension. Вот что вам обычно нужно:

├── index.js
├── index.html (Необязательно)
├── icons
│ └── icon.png
└── manifest.json

manifest.json

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

{
  "manifest_version": 2,
  "name": "Моё первое расширение",
  "version": "0.0.1",
  "description": "Простое расширение для начала работы",
  "browser_action": {
    "default_icon": "icons/icon.png",
    "default_title": "Моё первое расширение"
  },
  "background": {
    "scripts": ["index.js"]
  },
  "permissions": ["tabs"]
}

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

Написание вашего первого расширения

Настройка проекта

Для начала создайте новую директорию для своего проекта и перейдите в неё:

mkdir my-extension
cd my-extension
touch manifest.json index.js

Написание фонового скрипта

В файле index.js вы будете писать логику для своего расширения. Вот простой пример «Hello World»:

console.log("Hello, World!");

Однако сам по себе этот код мало что даст. Давайте сделаем его интереснее, добавив действие браузера, которое копирует заголовок и URL текущей вкладки в буфер обмена при нажатии.

Действие браузера

Сначала обновите файл manifest.json, добавив действие браузера:

{
  "browser_action": {
    "default_icon": "icons/icon.png",
    "default_title": "Копировать заголовок и URL вкладки",
    "default_popup": "popup.html"
  }
}

Создайте файл popup.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Копировать заголовок и URL вкладки</title>
    <style>
      body {
        width: 200px;
        height: 100px;
        font-family: Arial, sans-serif;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Копировать заголовок и URL вкладки</h1>
    <button id="copy-btn">Копировать</button>
    <script src="popup.js"></script>
  </body>
</html>

И файл popup.js:

document.addEventListener("DOMContentLoaded", function () {
  const copyBtn = document.getElementById("copy-btn");

  copyBtn.addEventListener("click", function () {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      const tab = tabs[0];
      const markdownLink = `[${tab.title}](${tab.url})`;
      navigator.clipboard.writeText(markdownLink).then(function () {
        console.log("Текст скопирован в буфер обмена");
      }, function (err) {
        console.error("Не удалось скопировать текст: ", err);
      });
    });
  });
});

Тестирование вашего расширения

Чтобы протестировать своё расширение, выполните следующие действия:

  1. Откройте Firefox и перейдите на страницу about:debugging.
  2. Нажмите «Этот Firefox», а затем «Загрузить временное дополнение».
  3. Выберите файл manifest.json из директории вашего расширения.

Теперь вы должны увидеть значок вашего расширения на панели инструментов. При нажатии на него откроется всплывающее окно, а нажатие кнопки «Копировать» скопирует заголовок и URL текущей вкладки в ваш буфер обмена.

Расширенные темы

Разрешения и безопасность

При разработке расширений крайне важно запрашивать только те разрешения, которые вам нужны. Это не только повышает безопасность, но и вызывает доверие у пользователей. Вот пример запроса разрешений для API tabs:

{
  "permissions": ["tabs", "clipboardWrite"]
}

Скрипты содержимого

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

{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.js"]
    }
  ]
}

А вот пример contentScript.js:

console.log("Загружен скрипт содержимого");

// Пример: изменить цвет фона страницы
document.body.style.backgroundColor = "lightblue";

Компоненты пользовательского интерфейса

WebExtensions предоставляют различные компоненты пользовательского интерфейса, которые вы можете использовать, такие как действия браузера, действия страницы и всплывающие окна. Вот диаграмма последовательности, показывающая работу действия браузера:

sequenceDiagram participant Пользователь participant Браузер participant Расширение Пользователь->>Браузер: Нажимает действие браузера Браузер->>Расширение: Запускает popup.html Расширение->>Браузер: Загружает popup.html Браузер->>Пользователь: Показывает всплывающее окно Пользователь->>Браузер: нажимает кнопку во всплывающем окне Браузер->>Расширение: запускает скрипт в popup.js Расширение->>Браузер: копирует текст в буфер обмена Браузер->>Пользователь: уведомляет о копировании текста

Отладка и инструменты разработки

Отладка вашего расширения имеет решающее значение для обеспечения его корректной работы. Вот несколько инструментов и методов, которые помогут вам:

about:debugging

Страница about:debugging — это то место, где вы можете загрузить и отладить временные расширения. Вы также можете использовать её для проверки и отладки фоновых скриптов и скриптов содержимого вашего расширения.

Инструмент web-ext

Инструмент web-ext — это утилита командной строки, которая упрощает процесс разработки. Вы можете использовать его для запуска своего расширения, автоматической перезагрузки при изменениях и даже упаковки для распространения.

npm install -g web-ext
cd my-extension
web-ext run

Эта команда запустит Firefox с установленным расширением и автоматически перезагрузит расширение при каждом внесении изменений в код.

Содействие и сообщество

Если вы заинтересованы в содействии экосистеме WebExtensions или вам нужна помощь с вашим проектом, существует несколько ресурсов:

  • Веб-документы MDN: официальная документация по WebExtensions, включая руководства, учебные пособия и справочные материалы по API.
  • Форум сообщества дополнений: место, где можно задавать вопросы, делиться знаниями и получать помощь от других разработчиков.
  • Комната дополнений в Matrix: чат-комната сообщества, где вы можете связаться с другими разработчиками и получить помощь в режиме реального времени.

Заключение

Разработка расширений для Firefox с использованием API WebExtensions — это мощный способ настроить и улучшить ваш опыт просмотра веб-страниц. Имея под рукой правильные инструменты, немного JavaScript, HTML и CSS, вы можете создавать расширения, которые делают практически всё. Независимо от того, являетесь ли вы опытным разработчиком или только начинаете, API WebExtensions предлагает гибкое и совместимое с разными браузерами решение, которое трудно превзойти.

Так что дерзайте и проявляйте творческий подход. Интернет ждёт вашего следующего блестящего расширения.