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 на