Розробка розширення Chrome
Розширення Chrome — це веб-програми, які запускаються у контексті браузера та мають доступ до вкладок, запитів, сховища, закладок та DOM сторінок. Архітектура розширення відрізняється від звичайного сайту: кілька ізольованих контекстів виконання, власна система повідомлень та окремена пісочниця.
Manifest V3
Google вимагає Manifest V3 для всіх нових розширень з 2023 року. Ключові відмінності від MV2: Service Worker замість Background Page, декларативний declarativeNetRequest замість динамічного webRequest.
{
"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" }
}
Контексти виконання
| Контекст | Доступ до DOM | Доступ до Chrome API | Тривалість життя |
|---|---|---|---|
| Service Worker | Ні | Повний | За подією |
| Popup | Тільки своє вікно | Повний | Поки відкрито |
| Content Script | Сторінка вкладки | Обмежений | Поки вкладка жива |
| Options Page | Тільки своє вікно | Повний | Поки відкрито |
Передача повідомлень
Контексти не мають спільної пам'яті. Спілкування — через chrome.runtime.sendMessage / chrome.runtime.onMessage:
// 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; // сигнал, що відповідь буде асинхронною
}
});
Для постійного з'єднання — chrome.runtime.connect / Port:
// 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 => {
// обробка
});
}
});
Робота з вкладками
// Отримати активну вкладку
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
// Виконати скрипт на вкладці (MV3)
const results = await chrome.scripting.executeScript({
target: { tabId: tab.id },
func: () => document.title,
});
// Внести CSS
await chrome.scripting.insertCSS({
target: { tabId: tab.id },
css: 'body { background: #fff !important; }',
});
Сховище
chrome.storage.local — синхронізується між контекстами розширення, не очищається при перезавантаженні:
// Запис
await chrome.storage.local.set({ settings: { theme: 'dark', enabled: true } });
// Читання
const { settings } = await chrome.storage.local.get('settings');
// Підписка на зміни
chrome.storage.onChanged.addListener((changes, area) => {
if (area === 'local' && changes.settings) {
applySettings(changes.settings.newValue);
}
});
chrome.storage.sync — синхронізується між пристроями користувача через Google акаунт (ліміт 100 KB, 512 байт на ключ).
Декларативна блокування запитів (MV3)
// rules.json
[{
"id": 1,
"priority": 1,
"action": { "type": "block" },
"condition": {
"urlFilter": "||ads.example.com^",
"resourceTypes": ["script", "image"]
}
}]
// manifest.json
"declarative_net_request": {
"rule_resources": [{
"id": "ruleset_1",
"enabled": true,
"path": "rules.json"
}]
}
Терміни
Базове розширення Chrome з popup та content script: 3–5 днів. Складне розширення з фоновою синхронізацією, інтеграцією користувацького API та публікацією в App Store: 2–3 тижні.