Ручний збір даних з десятків сайтів, моніторинг цін у реальному часі, автоматизація повторюваних операцій — завдання, які без розширення вирішуються годинами. Chrome Extension працює в кількох контекстах: popup для інтерфейсу, content script для взаємодії з DOM сторінки, service worker для фонової обробки. Ми проектуємо архітектуру так, щоб кожен модуль виконував свою функцію без зайвого навантаження на браузер.
За 10 років ми реалізували понад 50 розширень для Chrome, Firefox та Edge — від простих інтеграцій до складних систем із перехопленням трафіку та workbox. Ми працюємо з Manifest V3 (актуальна версія) та забезпечуємо сумісність із Safari через polyfill. Усі розширення публікуються в Chrome Web Store після проходження рев'ю.
Кожне розширення тестується на реальних сайтах, перевіряється час завантаження (LCP, TTFB) та відповідність Core Web Vitals. Це гарантує стабільну роботу навіть при інтенсивному використанні. Ми також допомагаємо з реєстрацією облікового запису розробника та подальшими оновленнями.
Проблеми, які вирішуємо
Інтеграція з веб-сервісами
Розширення має обмінюватися даними з вашим сервером, CRM або API. Обмеження CORS, несумісність протоколів — типові болі. Ми використовуємо background worker для проксування запитів та обробки відповідей. Наприклад, в одному проєкті розширення передавало дані з CRM в 1С через REST API, скоротивши час введення на 80%.
Продуктивність при великих обсягах даних
Парсинг тисяч сторінок або моніторинг у реальному часі вимагає оптимізації: debounce, кешування в chrome.storage.local, асинхронні черги. Без цього розширення гальмує браузер. Ми застосовуємо throttling та batch-обробку — навантаження на CPU знижується в 3 рази.
Безпека та відповідність політикам
Розширення не повинно порушувати CSP сайтів, витікати дані або використовувати застарілі API. Ми суворо дотримуємося рекомендацій Manifest V3, використовуємо declarativeNetRequest замість webRequest для блокування та уникаємо eval. Всі скрипти статичні.
Як ми це робимо: кейс парсингу маркетплейсу
В одному проєкті ми розробили розширення для автоматичного збору цін з маркетплейсу. Стек: Manifest V3, Service Worker для фонової синхронізації, Content Script для вилучення даних, chrome.storage.local для кешування. Архітектура: Content Script збирає дані та надсилає їх через chrome.runtime.sendMessage до Service Worker, який агрегує та відправляє на сервер через fetch. Час збору скоротився в 10 разів, а навантаження на браузер — мінімальне.
Порівняння Manifest V2 та V3
| Характеристика | Manifest V2 | Manifest V3 |
|---|---|---|
| Фоновий процес | Background Page (постійний) | Service Worker (за подією) |
| Блокування запитів | webRequest (динамічна) |
declarativeNetRequest (декларативна) |
| Віддалений код | Дозволено (eval) |
Заборонено (тільки статичні скрипти) |
| Безпека | Нижча | Вища |
Розширення на Manifest V3 запускається в 2 рази швидше, ніж на V2, завдяки Service Worker, який не споживає ресурси в простої. За даними Chrome Developers, перехід на V3 підвищує безпеку та знижує витрати батареї.
Як працює обмін повідомленнями в Chrome Extension?
Контексти виконання ізольовані: Service Worker, Popup, Content Script та Options Page не мають спільної пам'яті. Спілкування — через chrome.runtime.sendMessage та chrome.runtime.onMessage. Для постійного з'єднання використовуємо chrome.runtime.connect та порти.
// Content script -> Background chrome.runtime.sendMessage( { type: 'FETCH_DATA', url: window.location.href }, (response) => console.log('Got:', response) ); // Background (service worker) chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { if (message.type === 'FETCH_DATA') { fetch(message.url) .then(r => r.json()) .then(data => sendResponse({ data })); return true; // сигнал, що відповідь буде асинхронною } }); Для потокової передачі або довготривалих з'єднань краще використовувати порти:
// Popup const port = chrome.runtime.connect({ name: 'popup' }); port.postMessage({ type: 'START_STREAM' }); port.onMessage.addListener(msg => updateUI(msg)); // Background chrome.runtime.onConnect.addListener(port => { if (port.name === 'popup') { port.onMessage.addListener(msg => { /* обробка */ }); } }); Що таке Manifest V3 і чому це важливо?
Google перевів всі нові розширення на Manifest V3. Це підвищує безпеку та продуктивність, але вимагає змін в архітектурі: Service Worker замість Background Page, декларативне блокування запитів, заборона віддаленого коду. Ми адаптуємо існуючі розширення під V3 та розробляємо нові з урахуванням усіх вимог.
{ "manifest_version": 3, "name": "My Extension", "version": "1.0.0", "description": "Опис розширення", "permissions": ["storage", "tabs", "activeTab", "scripting"], "host_permissions": ["https://*.example.com/*"], "background": { "service_worker": "background.js", "type": "module" }, "action": { "default_popup": "popup.html", "default_icon": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } }, "content_scripts": [ { "matches": ["https://*.target-site.com/*"], "js": ["content.js"], "css": ["content.css"], "run_at": "document_idle" } ], "options_page": "options.html", "icons": { "48": "icons/icon48.png", "128": "icons/icon128.png" } } Як зареєструвати обліковий запис розробника?
- Перейдіть на Chrome Web Store Developer Dashboard та увійдіть в обліковий запис Google.
- Оплатіть одноразовий реєстраційний внесок (діє для всього облікового запису).
- Заповніть профіль розробника: ім'я, email, країна.
- Після підтвердження ви зможете завантажувати та публікувати розширення.
Ми допомагаємо з реєстрацією та проходженням рев'ю — це входить в послугу.
Процес розробки розширення Chrome
| Етап | Тривалість | Результат |
|---|---|---|
| Аналітика | 1–2 дні | Технічне завдання з описом функцій та UX |
| Проектування | 1–2 дні | Архітектура, схема даних, прототип інтерфейсу |
| Розробка | 5–10 днів | Popup, content script, service worker, інтеграція з API |
| Тестування | 2–3 дні | Перевірка на реальних сайтах, заміри LCP та TTFB |
| Деплой | 1–2 дні | Публікація в Chrome Web Store, проходження рев'ю |
Терміни орієнтовно
Просте розширення з popup, storage та content script — 3–4 робочих дні. Розширення з перехопленням запитів, бічною панеллю, налаштуваннями та публікацією — 7–12 днів. Точну оцінку надаємо після брифінгу.
Що входить в розробку Chrome Extension
- Вихідний код з коментарями та документацією.
- Інструкція з публікації та подальшої підтримки.
- Консультації з оновлень та доопрацювань протягом місяця.
- Допомога з реєстрацією облікового запису розробника.
Типові помилки при розробці розширень
- Невикористання асинхронних методів у Service Worker — призводить до втрати подій.
- Неправильне закриття портів — витік пам'яті.
- Ігнорування обмежень CSP цільових сайтів — блокування скриптів.
- Занадто часті запити до
chrome.storage— падіння продуктивності.
Ми враховуємо ці нюанси та проектуємо розширення правильно з першого разу.
Обговоріть ваш проєкт з нами. Отримайте консультацію — ми оцінимо завдання та запропонуємо рішення протягом одного робочого дня. Замовте розробку розширення Chrome прямо зараз.