Розробка розширення Firefox
Розширення Firefox засновані на WebExtensions API — тій же специфікації, що й Chrome Extensions. Більшість Chrome-розширень можна перенести на Firefox з мінімальними змінами. Але є різниці в деталях: підтримка API, процедура підписання, рушій розширень.
Відмінності Firefox від Chrome
| Аспект | Firefox | Chrome |
|---|---|---|
| API namespace | browser.* (Promise) + chrome.* |
chrome.* (Callback) |
| Manifest | MV2 та MV3 (MV3 додано у Firefox 109+) | Тільки MV3 (MV2 застарів) |
| Background | Постійна фонова сторінка (MV2) або SW (MV3) | Тільки Service Worker |
| Підпис | Обов'язково через AMO | Не потрібно |
browser_style |
Підтримується | Не підтримується |
Manifest V2 (Firefox — найбільш стабільний варіант)
{
"manifest_version": 2,
"name": "My Firefox Add-on",
"version": "1.0.0",
"description": "Опис дополнення",
"permissions": [
"storage",
"tabs",
"activeTab",
"https://*.example.com/*"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"48": "icons/icon48.png",
"96": "icons/icon96.png"
}
},
"content_scripts": [{
"matches": ["https://*.target-site.com/*"],
"js": ["content.js"]
}],
"options_ui": {
"page": "options.html",
"open_in_tab": false
}
}
Promise-based API
Firefox підтримує нативні Promise у browser.*. Полід webextension-polyfill робить код сумісним з Chrome:
import browser from 'webextension-polyfill';
// Firefox — нативні проміси
const tabs = await browser.tabs.query({ active: true, currentWindow: true });
const tab = tabs[0];
// Виконати скрипт (MV2)
await browser.tabs.executeScript(tab.id, {
code: 'document.body.style.background = "yellow"',
});
// Сховище
await browser.storage.local.set({ key: 'value' });
const result = await browser.storage.local.get('key');
Content Script: обмеження та обходи
У Firefox Content Scripts працюють в ізольованому світі (Xray wrapper) — вони не мають прямого доступу до об'єктів JavaScript на сторінці. Для взаємодії зі сторінкою потрібен window.postMessage або CustomEvent:
// Content script -> Page script
window.postMessage({ source: 'myExtension', type: 'REQUEST_DATA' }, '*');
// Page script обробник
window.addEventListener('message', (e) => {
if (e.data?.source === 'myExtension' && e.data?.type === 'REQUEST_DATA') {
window.postMessage({
source: 'myPage',
type: 'RESPONSE_DATA',
payload: window.__MY_APP_STATE__,
}, '*');
}
});
Підпис та публікація
Firefox вимагає підпису від Mozilla для будь-якого розширення, що розповсюджується не через AMO:
# web-ext — офіційний CLI від Mozilla
npm install -g web-ext
# Розробка з hot reload
web-ext run --source-dir ./dist --firefox-binary "/path/to/firefox"
# Збирання
web-ext build --source-dir ./dist --artifacts-dir ./artifacts
# Підпис (потрібні AMO API ключі)
web-ext sign \
--source-dir ./dist \
--api-key $AMO_JWT_ISSUER \
--api-secret $AMO_JWT_SECRET
Для отримання API ключів: addons.mozilla.org/developers/addon/api/key/.
Тимчасова установка для тестування
Без підпису розширення можна встановити тільки через about:debugging:
- Відкрити
about:debugging#/runtime/this-firefox - «Завантажити тимчасове дополнення»
- Вибрати
manifest.json - Працює до перезапуску браузера
Для корпоративного деплою без AMO — використовувати policies.json у Firefox Enterprise.
Специфіка Firefox: contextualIdentities (контейнери)
Firefox підтримує Containers — ізольовані контексти з різними кукі. Доступ через API:
const containers = await browser.contextualIdentities.query({});
// { cookieStoreId, name, color, icon }
// Відкрити вкладку в конкретному контейнері
await browser.tabs.create({
url: 'https://example.com',
cookieStoreId: 'firefox-container-1',
});
Терміни
Firefox Add-on, адаптований з Chrome-розширення, з підписом та публікацією на AMO — 2–3 додаткових дні до готового Chrome-розширення. Розробка нового дополнення з нуля — 4–8 днів залежно від функціональності.