it Новости Разработка расширений для браузеров: как создать расширение?

Разработка расширений для браузеров: как создать расширение?

6 166

27 марта 2025 в 13:59

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

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

В этой статье мы подробно разберём, как создать простое расширение, которое будет работать как в Google Chrome, так и в Mozilla Firefox, используя WebExtensions API — унифицированный стандарт, поддерживаемый обоими браузерами.

Что такое WebExtensions?

WebExtensions — это кроссбраузерный API, разработанный для создания расширений, совместимых сразу с несколькими браузерами. Он основан на стандартных веб-технологиях: HTML, CSS и JavaScript. Используя WebExtensions, вы можете написать расширение один раз, а затем адаптировать его под Chrome, Firefox, Edge и даже Opera с минимальными изменениями.

Структура расширения

Типичное расширение состоит из следующих файлов:

manifest.json — конфигурационный файл, описывающий расширение.
background.js — фоновый скрипт, управляющий логикой расширения.
popup.html и popup.js — интерфейс всплывающего окна.
icons/ — папка с иконками расширения.

Шаг 1: Создаём манифест

Файл manifest.json — это сердце любого расширения. Вот базовый пример:

{
	"manifest_version": 3,
	"name": "My First Extension",
	"version": "1.0",
	"description": "Простое расширение для браузера",
	"action": {
		"default_popup": "popup.html",
		"default_icon": {
			"16": "icons/icon16.png",
			"48": "icons/icon48.png",
			"128": "icons/icon128.png"
		}
	},
	"permissions": ["storage", "activeTab", "scripting"],
	"background": {
		"service_worker": "background.js"
	}
}

Chrome использует manifest_version: 3. Firefox также поддерживает его, но с некоторыми отличиями (например, в работе фоновых скриптов).

Шаг 2: Интерфейс расширения (popup.html)

Создайте файл popup.html — это то, что увидит пользователь при клике на иконку расширения.

<!DOCTYPE html>
<html>
<head>
	<title>My Extension</title>
</head>
<body style="padding: 10px;">
	<h3>Привет, мир!</h3>
	<button id="btn">Сделать что-то</button>
	<script src="popup.js"></script>
</body>
</html>

Шаг 3: Поведение кнопки (popup.js)

Теперь добавим немного логики. Пусть кнопка меняет заголовок текущей вкладки.

document.getElementById('btn').addEventListener('click', async () => {
	const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
	chrome.scripting.executeScript({
		target: { tabId: tab.id },
		func: () => document.title = "Заголовок изменён!"
	});
});

Шаг 4: Фоновый скрипт (background.js)

Фоновый скрипт может обрабатывать события браузера, например — при установке расширения:

chrome.runtime.onInstalled.addListener(() => {
	console.log("Расширение установлено");
});

Шаг 5: Иконки расширения

В папке icons/ разместите изображения 16x16, 48x48 и 128x128 пикселей. Это требуется для отображения иконки в разных интерфейсах браузера.

Шаг 6: Установка расширения в Chrome

1. Откройте chrome://extensions/ в адресной строке.

2. Включите "Режим разработчика".

3. Нажмите "Загрузить распакованное расширение" и выберите папку с файлами расширения.

Шаг 7: Установка расширения в Firefox

1. Откройте about:debugging#/runtime/this-firefox.

2. Нажмите "Загрузить временное дополнение".

3. Выберите manifest.json.

Советы по совместимости между Chrome и Firefox

Хотя оба браузера поддерживают WebExtensions, есть нюансы:

Firefox поддерживает manifest_version: 2 дольше, чем Chrome.
Некоторые API работают по-разному или требуют префиксов (например, browser. вместо chrome.).
Рекомендуется использовать библиотеку webextension-polyfill для унификации синтаксиса.

Публикация расширения

В Chrome Web Store:

Создайте аккаунт разработчика и оплатите единоразовый сбор (5$).
Перейдите на панель разработчика.
Загрузите ZIP-архив с расширением и заполните описание.
Пройдите модерацию и получите ссылку на расширение.

В Firefox Add-ons (AMO):

Зарегистрируйтесь на addons.mozilla.org.
Загрузите расширение в формате ZIP или XPI.
Подпишите и опубликуйте его через интерфейс разработчика.

Заключение

Создание расширений для браузеров — отличный способ прокачать свои навыки, решить конкретную задачу или даже создать продукт с тысячами пользователей. С помощью WebExtensions вы можете разработать одно расширение и легко адаптировать его под Chrome, Firefox и другие браузеры. Начать просто: достаточно базовых знаний HTML, CSS и JavaScript.

Если вы хотите углубиться — изучите API WebExtensions и возможности взаимодействия с DOM, вкладками, контекстным меню и другими компонентами браузера. А дальше — всё зависит от вашей фантазии и задач.

Больше интересных новостей

Сравнение популярных языков программирования: что и когда выбрать?

Изучение Tailwind CSS за час! Разработка проекта с нуля

5 лучших систем управления базами данных

Кому «за 40»: нужны ли такие программисты IT-компаниям?

Комментарии