Content Script: модифікація сторінок у браузерному розширенні

let lastUrl = location.href;
const urlObserver = new MutationObserver(() => {
  if (location.href !== lastUrl) {
    lastUrl = location.href;
    onNavigate(location.href);
  }
});
urlObserver.observe(document.querySelector('title') ?? document.head, {
  subtree: true,
  characterData: true,
  childList: true
});

Робота з DOM

Content script бачить повний DOM, включаючи Shadow DOM. Для обробки динамічного контенту (SPA) обов'язковий MutationObserver. Приклад — підсвічування всіх цін на сторінці:

function highlightPrices() {
    const walker = document.createTreeWalker(
        document.body,
        NodeFilter.SHOW_TEXT,
        {
            acceptNode(node) {
                return /\$[\d,]+\.?\d{0,2}/.test(node.textContent) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
            }
        }
    );
    const nodes = [];
    while (walker.nextNode()) nodes.push(walker.currentNode);
    nodes.forEach(node => {
        const span = document.createElement('span');
        span.innerHTML = node.textContent.replace(
            /(\$[\d,]+\.?\d{0,2})/g,
            '<mark class="ext-price-highlight">$1</mark>'
        );
        node.parentNode.replaceChild(span, node);
    });
}

const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
        if (mutation.addedNodes.length > 0) highlightPrices();
    }
});
observer.observe(document.body, { childList: true, subtree: true });
highlightPrices();

У проєктах ми тестуємо до 10 цільових сайтів, обробляючи до 1000 DOM-вузлів за один прогін.

Спілкування з background service worker

Content script не має прямого доступу до chrome.tabs, тому використовуйте messaging. Для двостороннього потоку — встановлення порту:

// content/injected.js
const port = chrome.runtime.connect({ name: 'content-stream' });
port.onMessage.addListener((msg) => {
  if (msg.type === 'DATA_CHUNK') appendChunk(msg.data);
});
port.postMessage({ type: 'START_STREAM', url: location.href });

Основний сценарій — одноразовий запит через chrome.runtime.sendMessage. Background має повернути true у колбеку, якщо відповідь асинхронна.

Як уникнути конфліктів стилів при впровадженні content script?

Два підходи: Shadow DOM для повної ізоляції інтерфейсу розширення або CSS з високою специфічністю та унікальними префіксами класів (наприклад, ext-). Якщо сторінка використовує строгу CSP, додавайте стилі через chrome.scripting.insertCSS з service worker.

Передача даних зі сторінки в content script

Оскільки JS-контексти ізольовані, використовуйте window.postMessage зі скрипта сторінки (або MAIN world) і ловіть повідомлення в content script з перевіркою event.source === window.

Що входить у роботу

Розробка content script під ключ включає:

• Налаштування маніфесту та декларацію скриптів.
• Обробку SPA-навігації та динамічного контенту.
• Інтеграцію з background service worker через messaging.
• Ізоляцію стилів та роботу з CSP.
• Тестування на цільових сторінках (до 10 сайтів).
• Документацію щодо використання та API розширення.

Типові проблеми та їх вирішення

Часта проблема — content script не спрацьовує після SPA-переходу. Рішення — MutationObserver на