Как создать ваше первое расширение для Firefox
Создание расширения для Firefox может показаться сложной задачей, но с Manifest V3 и современными API WebExtensions вы можете создать своё первое рабочее расширение менее чем за 10 минут. Это руководство по созданию расширений для Firefox проведёт вас через процесс создания функционального MV3-расширения, которое модифицирует веб-страницы и включает всплывающий интерфейс.
Ключевые выводы
- Создайте рабочее расширение для Firefox с использованием Manifest V3 менее чем за 10 минут
- Разработайте content scripts, которые безопасно модифицируют веб-страницы в изолированных контекстах
- Реализуйте всплывающие интерфейсы для взаимодействия с пользователем через обмен сообщениями
- Следуйте лучшим практикам безопасности с минимальными разрешениями и внешними скриптами
Что такое WebExtensions и зачем нужен Manifest V3?
WebExtensions — это кроссбраузерные совместимые дополнения, созданные с использованием стандартных веб-технологий: HTML, CSS и JavaScript. Firefox WebExtensions Manifest V3 представляет собой текущий стандарт разработки расширений, предлагающий улучшенную безопасность через service workers, лучшую производительность с декларативными API и более высокую кроссбраузерную совместимость.
Хотя Firefox всё ещё поддерживает Manifest V2, начало работы с Manifest V3 гарантирует, что ваше расширение останется совместимым с будущими обновлениями браузера и соответствует архитектуре расширений Chrome, Edge и Safari. Это руководство сосредоточено исключительно на лучших практиках MV3.
Настройка структуры проекта расширения для Firefox
Давайте создадим ваше первое расширение для Firefox шаг за шагом. Создайте новую папку с именем my-first-extension и добавьте следующие необходимые файлы:
Создание конфигурации Manifest V3
Файл manifest.json — это сердце любого расширения. Создайте этот файл со следующей конфигурацией Manifest V3:
{
"manifest_version": 3,
"name": "My Page Enhancer",
"version": "1.0.0",
"description": "Enhances web pages with custom styling",
"action": {
"default_popup": "popup.html",
"default_icon": {
"48": "icon.png"
}
},
"content_scripts": [
{
"matches": ["*://*.example.com/*"],
"js": ["content.js"]
}
],
"icons": {
"48": "icon.png"
}
}Обратите внимание на использование "action" вместо устаревшего "browser_action" — это ключевое требование для Firefox MV3. Манифест следует принципам минимальных разрешений, что является основной лучшей практикой расширений Firefox.
Создание Content Script для модификации страниц
MV3 content scripts выполняются в изолированном контексте, защищая код вашего расширения от вредоносных скриптов страницы. Создайте content.js:
// content.js - Runs on matching pages
console.log('Extension loaded on:', window.location.href);
// Add a subtle border to all paragraphs
document.querySelectorAll('p').forEach(paragraph => {
paragraph.style.border = '2px solid #4A90E2';
paragraph.style.padding = '8px';
paragraph.style.borderRadius = '4px';
});
// Listen for messages from the popup
browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === 'changeColor') {
document.body.style.backgroundColor = request.color;
}
});Это демонстрирует, как Manifest V3 изолирует код расширения от контекста страницы, предотвращая уязвимости безопасности, распространённые в старых архитектурах расширений.
Discover how at OpenReplay.com.
Создание всплывающего интерфейса Firefox Action
Компонент всплывающего окна action обеспечивает взаимодействие с пользователем. Создайте popup.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
width: 300px;
padding: 16px;
font-family: system-ui, -apple-system, sans-serif;
}
button {
width: 100%;
padding: 8px;
margin: 4px 0;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Page Enhancer</h2>
<button id="blue">Blue Background</button>
<button id="green">Green Background</button>
<script src="popup.js"></script>
</body>
</html>Добавьте соответствующий popup.js для обработки взаимодействий пользователя:
// popup.js - Handles popup interactions
document.getElementById('blue').addEventListener('click', () => {
sendColorChange('#E3F2FD');
});
document.getElementById('green').addEventListener('click', () => {
sendColorChange('#E8F5E9');
});
async function sendColorChange(color) {
const [tab] = await browser.tabs.query({
active: true,
currentWindow: true
});
browser.tabs.sendMessage(tab.id, {
action: 'changeColor',
color: color
});
}Загрузка и тестирование вашего JavaScript-дополнения для Firefox
Чтобы протестировать ваше JavaScript-дополнение для Firefox:
- Откройте Firefox и перейдите на страницу
about:debugging - Нажмите «This Firefox» на левой боковой панели
- Нажмите «Load Temporary Add-on»
- Выберите любой файл из папки вашего расширения
Значок вашего расширения появится на панели инструментов. Посетите любую страницу example.com, чтобы увидеть content script в действии. Нажмите на значок расширения, чтобы открыть всплывающее окно и протестировать изменение цвета фона.
При изменении файлов нажмите «Reload» в about:debugging, чтобы мгновенно применить изменения — перезапуск браузера не требуется.
Лучшие практики расширений Firefox для разработки на MV3
Следование этим лучшим практикам расширений Firefox гарантирует, что ваше расширение пройдёт проверку и обеспечит безопасный пользовательский опыт:
- Минимальные разрешения: Запрашивайте только
activeTab, когда вам нужен доступ к текущей вкладке, избегая широких разрешений хоста - Никакого встроенного JavaScript: Content Security Policy MV3 блокирует встроенные скрипты — всегда используйте внешние
.jsфайлы - Service Workers: Для фоновых задач используйте service workers (здесь не рассматривается, но необходимо для продвинутых функций)
- Безопасная коммуникация: Используйте
browser.runtime.sendMessage()для связи между компонентами
Заключение
Вы успешно создали рабочее расширение для Firefox с использованием Manifest V3. Переход от простых content scripts к полнофункциональным расширениям следует той же схеме: изолированные контексты, обмен сообщениями и минимальные разрешения. Освойте эти основы, и вы будете создавать безопасные, производительные расширения, которым доверяют пользователи.
Чтобы расширить свои навыки, изучите Storage API для сохранения пользовательских настроек, реализуйте фоновые service workers для сложной обработки событий и ознакомьтесь с последней документацией MDN WebExtensions для обновлений API.
Часто задаваемые вопросы
Да, WebExtensions, использующие Manifest V3, в значительной степени совместимы между браузерами. Существуют небольшие различия в пространствах имён API, где Chrome использует chrome, а Firefox использует browser, но Firefox поддерживает оба варианта для совместимости.
Файл manifest.json указывает шаблоны соответствия в секции content_scripts. Измените массив matches, чтобы включить другие домены, или используйте более широкие шаблоны, такие как *://*/*, для всех сайтов, хотя это требует тщательного рассмотрения вопросов безопасности.
Упакуйте ваше расширение в ZIP-файл, создайте учётную запись разработчика на addons.mozilla.org, отправьте расширение на проверку и дождитесь одобрения. Firefox обычно проверяет расширения в течение 24-48 часов.
Content scripts выполняются в контекстах веб-страниц и могут получать доступ и изменять элементы DOM. Background scripts в MV3 используют service workers, которые обрабатывают события и вызовы API, но не могут напрямую получать доступ к содержимому страницы, требуя обмена сообщениями для коммуникации.
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
