Розробка розширення для браузера Firefox (Firefox Add-on)

При портуванні Chrome-розширення на Firefox багато розробників стикаються з неочевидними відмінностями: різний API namespace, обов'язковий підпис через AMO та особливості Content Script. На основі нашого досвіду понад 10 років та більше ніж 50 успішних проєктів ми пропонуємо розробку Firefox Add-on під ключ з урахуванням цих нюансів. Понад 90% API збігається, але деталі вирішують.

Firefox Add-ons засновані на WebExtensions API — тій самій специфікації, що й Chrome Extensions. Більшість Chrome-розширень можна перенести на Firefox з мінімальними правками. Але є відмінності в деталях: підтримка API, процедура підпису, двигун розширень.

Відмінності Firefox від Chrome та складності портування

Перехід з chrome.* на browser.* — перший підводний камінь. Firefox використовує нативні Promise, тоді як Chrome покладається на callback'и. Без webextension-polyfill код не буде однаково працювати в обох браузерах. Content Script у Firefox ізольовані через Xray wrapper — прямий доступ до об'єктів сторінки неможливий, доводиться використовувати window.postMessage. Також обов'язковий підпис на AMO уповільнює release cycle, якщо не налаштувати CI з API-ключами.

Чому варто використовувати webextension-polyfill?

Поліфіл дозволяє писати код один раз, використовуючи browser.* API з Promise, і він буде працювати в Chrome. Це скорочує обсяг коду в 3 рази порівняно з дублюванням для кожного браузера. Однак потрібне тестування: деякі Chrome-специфічні функції можуть не мати аналогів.

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 } } 

Що таке Xray wrapper і як з ним працювати?

Xray wrapper — це механізм ізоляції Content Script у Firefox. Він запобігає прямому доступу до 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__, }, '*'); } }); 

Promise-based API і Content Script

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'); 

У Firefox Content Scripts працюють в ізольованому світі (Xray wrapper) — вони не мають доступу до JavaScript-об'єктів сторінки безпосередньо. Для взаємодії зі сторінкою потрібен window.postMessage або CustomEvent.

Публікація, підпис і тестування через CI

Firefox вимагає підпису від Mozilla для будь-якого розширення, що поширюється не через AMO. Використовуйте web-ext — офіційний CLI від Mozilla — і налаштуйте підпис у CI (наприклад, GitHub Actions):

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:

1. Відкрити about:debugging#/runtime/this-firefox
2. «Завантажити тимчасове доповнення»
3. Вибрати manifest.json
4. Працює до перезапуску браузера

Для корпоративного деплою без AMO — використовувати policies.json у Firefox Enterprise.

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?

Наші інженери з 10+ річним досвідом і більш ніж 50 успішними проєктами проходять через стандартний процес: аудит вимог, проєктування архітектури, реалізація з використанням TypeScript і React або vanilla JS, тестування в кількох версіях Firefox (включаючи Developer Edition і Nightly), автоматичний підпис через CI та публікація на AMO. Результат — повністю готове до використання розширення з документацією. Завдяки використанню webextension-polyfill розробка йде в 2 рази швидше порівняно з роздільною реалізацією, а обсяг коду скорочується на 60%.

Що входить у розробку Firefox Add-on

Терміни та вартість

Firefox Add-on, адаптований з Chrome-розширення, з підписом і публікацією на AMO — 2–3 робочих дні додатково до готового Chrome-розширення. Розробка нового доповнення з нуля — 4–8 днів залежно від функціональності. Вартість розраховується індивідуально і залежить від складності — зв'яжіться з нами для точної оцінки.

Замовте розробку Firefox Add-on: отримайте консультацію наших фахівців вже сьогодні. Ми гарантуємо сумісність з останніми версіями Firefox та повну документацію. Зв'яжіться з нами, щоб обговорити деталі вашого проєкту — ми надамо попередню оцінку протягом 24 годин.