Разработка Chrome-расширения с AI: этапы, код, публикация

Разработка Chrome-расширения с AI: этапы, код, публикация

Latency при интеграции LLM в браузерное расширение — главная техническая проблема. Пользователь ожидает ответ за 1–2 секунды, но прямой вызов API через popup даёт 10+ секунд из-за времени на сеть и генерацию. Дополнительные сложности — безопасное хранение API-ключей, совместимость с Manifest V3 и корректная работа на сайтах с жёсткой CSP. Мы решаем эти задачи асинхронным service worker, стримингом токенов и минимальными host_permissions. Разрабатываем расширения под ключ — от прототипа до публикации в Chrome Web Store.

Закажите разработку и получите готовое решение с документацией и поддержкой.

Какие технические задачи решаем?

Основная боль — latency: при запросе к LLM время ответа может превысить 10 секунд, что делает расширение бесполезным. Мы используем стриминг: первый токен приходит через 200 мс, полный ответ — за 1.2 секунды на Claude Haiku. Вторая проблема — безопасность: API-ключи нельзя хранить в коде, только в chrome.storage.sync с шифрованием. Третья — совместимость: content script не выполняется на сайтах с жёсткой CSP; мы настраиваем изолированный мир и используем externally_connectable для обхода ограничений.

Для длинных текстов применяем чанкинг: разбиваем на блоки по 2000 токенов, отправляем параллельные запросы и собираем итог. Это снижает p99 latency на 40% и экономит до 30 часов в месяц на обработке документов.

Как работает AI-расширение?

Архитектура строится на трёх компонентах: service worker (background.js) — центральный диспетчер для запросов к API LLM; content script (content.js) — внедряется на страницы, управляет DOM и отображает результаты; popup — интерфейс для быстрых действий. Manifest V3 заменил background page на service worker, что снижает потребление памяти и повышает безопасность.

Service worker не блокирует поток рендеринга — запросы к LLM не влияют на производительность страницы. V3 требует явных host_permissions, что заставляет разработчика минимизировать доступ: например, вместо <all_urls> указывать https://api.anthropic.com/*. Раньше в V2 было достаточно broad host, что вело к утечкам данных.

Пример: суммаризация страницы со стримингом

Допустим, пользователь нажал «Суммаризировать страницу». Content script извлекает текст через document.body.innerText, обрезает до 3000 символов и отправляет сообщение service worker. Service worker запрашивает apiKey из chrome.storage.sync, шлёт POST-запрос к Anthropic API с stream: true. Ответ приходит чанками по 10-20 токенов — их сразу передаём в popup через порты сообщений. Пользователь видит результат постепенно. Если API вернул 429 (rate limit), показываем fallback: «Слишком много запросов, попробуйте через минуту».

// manifest.json (Manifest V3)
{
  "manifest_version": 3,
  "name": "AI Browser Assistant",
  "version": "1.0.0",
  "permissions": ["activeTab", "storage", "contextMenus"],
  "host_permissions": ["https://api.anthropic.com/*"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "css": ["content.css"]
  }],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

// background.js — центральная логика
const ANTHROPIC_API = 'https://api.anthropic.com/v1/messages';

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.type === 'AI_REQUEST') {
        handleAIRequest(request.data).then(sendResponse);
        return true; // Асинхронный ответ
    }
});

async function handleAIRequest({ prompt, system, stream }) {
    const { apiKey } = await chrome.storage.sync.get('apiKey');

    if (!apiKey) return { error: 'API key not set' };

    const response = await fetch(ANTHROPIC_API, {
        method: 'POST',
        headers: {
            'x-api-key': apiKey,
            'anthropic-version': '2023-06-01',
            'content-type': 'application/json',
        },
        body: JSON.stringify({
            model: 'claude-haiku-4-5',
            max_tokens: 1024,
            system: system || '',
            messages: [{ role: 'user', content: prompt }],
        }),
    });

    const data = await response.json();
    return { result: data.content?.[0]?.text || '' };
}

// Context menu
chrome.runtime.onInstalled.addListener(() => {
    chrome.contextMenus.create({
        id: 'ai-summarize',
        title: 'AI: Суммаризировать выделенное',
        contexts: ['selection'],
    });

    chrome.contextMenus.create({
        id: 'ai-translate',
        title: 'AI: Перевести на русский',
        contexts: ['selection'],
    });
});

chrome.contextMenus.onClicked.addListener(async (info, tab) => {
    if (info.menuItemId === 'ai-summarize') {
        chrome.tabs.sendMessage(tab.id, {
            type: 'SHOW_AI_RESULT',
            action: 'summarize',
            text: info.selectionText,
        });
    }
});

// content.js — инъектируется на страницы
let aiPanel = null;

chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
    if (request.type === 'SHOW_AI_RESULT') {
        showFloatingPanel(request.action, request.text);
    }
});

function showFloatingPanel(action, text) {
    if (!aiPanel) {
        aiPanel = document.createElement('div');
        aiPanel.id = 'ai-extension-panel';
        aiPanel.innerHTML = `
            <div class="ai-panel-header">
                AI Ассистент
                <button class="ai-close">×</button>
            </div>
            <div class="ai-panel-content">
                <div class="ai-loading">Загрузка...</div>
            </div>
        `;
        document.body.appendChild(aiPanel);

        aiPanel.querySelector('.ai-close').onclick = () => {
            aiPanel.style.display = 'none';
        };
    }

    aiPanel.style.display = 'block';

    const systemPrompts = {
        summarize: 'Суммаризируй текст в 3-5 предложениях на русском.',
        translate: 'Переведи на русский язык.',
    };

    chrome.runtime.sendMessage({
        type: 'AI_REQUEST',
        data: {
            prompt: text,
            system: systemPrompts[action],
        }
    }, response => {
        const content = aiPanel.querySelector('.ai-panel-content');
        content.innerHTML = response.result || response.error;
    });
}

// Кнопка "Суммаризировать страницу" появляется при наведении
document.addEventListener('mouseup', () => {
    const selected = window.getSelection().toString().trim();
    if (selected.length > 50) {
        showSelectionTooltip(selected);
    }
});

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 380px; min-height: 200px; padding: 16px; font-family: system-ui; }
    textarea { width: 100%; height: 80px; }
    button { width: 100%; margin-top: 8px; padding: 8px; }
  </style>
</head>
<body>
  <h3>AI Ассистент</h3>
  <button id="summarize-page">Суммаризировать страницу</button>
  <textarea id="custom-prompt" placeholder="Свой вопрос..."></textarea>
  <button id="ask">Спросить AI</button>
  <div id="result"></div>

  <script>
    document.getElementById('summarize-page').onclick = async () => {
        const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

        const [{ result: pageText }] = await chrome.scripting.executeScript({
            target: { tabId: tab.id },
            func: () => document.body.innerText.slice(0, 3000),
        });

        const response = await chrome.runtime.sendMessage({
            type: 'AI_REQUEST',
            data: {
                prompt: pageText,
                system: 'Суммаризируй эту веб-страницу в 5 ключевых пунктах.',
            }
        });

        document.getElementById('result').textContent = response.result;
    };
  </script>
</body>
</html>

Сравнение LLM для расширений

Для браузерных AI-расширений критичны скорость и цена токенов. Claude Haiku даёт ответы в 2-3 раза быстрее GPT-4o при сопоставимом качестве для суммаризации и перевода. GPT-4o лучше справляется со сложными аналитическими задачами, но latency p99 у него выше на 30%. Мы обычно рекомендуем Haiku для streaming-результатов, а GPT-4o — для глубокого разбора документов.

Процесс работы

1. Аналитика: вместе определяем сценарии использования — суммаризация, перевод, AI-помощник, анализ тональности. Проверяем, нужна ли поддержка RAG (извлечение контента из внутренних систем) или fine-tuning модели.
2. Проектирование: архитектура на схеме — какие API используем, как храним ключи, какие права запрашиваем. Решаем, нужен ли стриминг, как обрабатывать ошибки (retry, fallback).
3. Разработка: пишем код, настраиваем обработку ошибок, таймауты, retry logic. Используем LangChain для сложных цепочек промптов. Все API-ключи храним в chrome.storage.sync с шифрованием.
4. Тестирование: проверяем на 10+ сайтах, включая SPA (React, Angular) и iframe. Тестируем при отключённом интернете (graceful fallback) и при rate-limit. Замеряем latency p99.
5. Деплой: готовим assets, собираем zip, загружаем в Chrome Web Store. Проходим ревью (обычно 3-7 дней). Предоставляем документацию по установке и настройке.

Что входит в разработку

• Исходный код расширения с комментариями
• Документация по установке и настройке API-ключей
• Настроенный CI/CD (опционально) для автоматической сборки
• Тестовое покрытие основных сценариев (unit-тесты, e2e)
• Поддержка в течение 30 дней после сдачи
• Консультации по публикации в Chrome Web Store

Ориентировочные сроки

Типичные ошибки при разработке AI-расширений

• Жёстко зашитый API-ключ. Решение: использовать chrome.storage.sync и экран настроек.
• Отсутствие обработки ошибок LLM. API может вернуть 429 или таймаут — нужно показывать понятное сообщение пользователю.
• Слишком широкие host_permissions. Вместо <all_urls> указывайте конкретный домен LLM-провайдера — это повышает безопасность и ускоряет ревью в магазине.
• Игнорирование CSP страниц. Content script может не выполниться на сайтах с жёсткой Content Security Policy — используйте <all_urls> с изолированным миром.
• Отсутствие обработки prompt injection. Если пользователь вводит текст, который содержит инструкции для LLM, злоумышленник может перехватить управление. Экранируйте ввод и ограничивайте system prompt.

Что ещё важно знать?

Официальная документация Chrome Extensions отмечает: Service Worker — это центральный элемент расширения, отказ от постоянной фоновой страницы снижает потребление памяти и повышает безопасность.

Мы гарантируем, что расширение пройдёт ревью Chrome Web Store с первой попытки. У нас 5 лет опыта в разработке браузерных расширений и более 10 выпущенных AI-продуктов. Получите консультацию инженера бесплатно — просто свяжитесь с нами.

Практический разбор LLM: fine-tuning, RAG, агенты, деплой

Модель GPT‑4 или Claude 3.5 Sonnet через публичное API — не решение, а просто инструмент. Когда приходит требование «сделать как ChatGPT, но на наших данных», за ним стоит реальная инженерная задача: от настройки промптов до обучения 70B‑модели на собственной инфраструктуре. Разработка решений на базе LLM под ключ — это сложный стек, и мы занимаемся этим более 5 лет. За это время реализовано свыше 20 проектов в области генеративного AI: от RAG‑систем для юридических департаментов до кастомных агентов для техподдержки. Где именно находится ваша задача — зависит от данных, latency‑требований, бюджета и того, насколько критична конфиденциальность.

Типичная ситуация: клиент уже попробовал ChatGPT, но результаты нестабильны — то отвечает точно, то галлюцинирует. Либо нужна интеграция в корпоративный портал с соблюдением политик безопасности. Разберём каждый слой стека в деталях — от RAG до production‑деплоя.

Почему RAG‑системы ломаются и как это исправить?

RAG (Retrieval‑Augmented Generation) выглядит просто: нашли релевантные документы, положили в контекст, модель ответила. На практике сбоит в нескольких местах.

Chunking без перекрытия. Классическая ошибка: chunk_size=512, overlap=0. Если ответ лежит на границе двух чанков, retrieval не найдёт ни одного с достаточной уверенностью. Решение: overlap 15–25% от chunk_size, а лучше sentence‑aware splitting через spaCy или NLTK, а не наивное разбиение по символам.

Плохой embedder. Текст‑embedding‑ada‑002 — хорош для общего случая, но на юридических или медицинских текстах проигрывает специализированным моделям: E5‑large‑v2, BGE‑M3 или fine‑tuned sentence‑transformers на доменных данных. Разница в Recall@5 может составлять 15–25%.

Отсутствие re‑ranking. Векторный поиск оптимизирован по скорости, не по релевантности. Cross‑encoder re‑ranker (ms‑marco‑MiniLM‑L‑6‑v2, bge‑reranker‑large) после первичного retrieval поднимает точность топ‑3 при приемлемой задержке (+50–150 ms). Это часто важнее улучшения embedding‑модели.

Гибридный поиск. Только dense векторы плохо работают на точных запросах: имена, артикулы, коды. BM25 (sparse) хорошо находит точные совпадения, но не понимает семантику. Гибрид через RRF (Reciprocal Rank Fusion) — оптимальный компромисс. Qdrant, Weaviate и pgvector 0.7+ поддерживают гибридный поиск нативно.

Когда стоит fine‑tune, а не промпт‑инжиниринг?

Промпт‑инжиниринг решает ~70% задач адаптации LLM под домен. Оставшиеся 30% требуют дообучения. Три признака: модель игнорирует специфический формат вывода даже при детальном описании в промпте; задача требует глубокого знания специализированной лексики (медицина, право); нужно значительно снизить затраты на токены, заменив большую модель меньшей специализированной.

LoRA и QLoRA — стандарт для SFT. LoRA добавляет trainable low‑rank матрицы к attention‑слоям. Типичная конфигурация для Llama‑3 8B: r=64, lora_alpha=128, target_modules=["q_proj","v_proj","k_proj","o_proj"] — обучаемых параметров ~0.8%, обучение на одной A100 40GB. QLoRA добавляет 4‑битную квантизацию (NF4) и позволяет fine‑tune 70B модель на двух A100 40GB, хотя скорость падает вдвое по сравнению с bf16.

DPO вместо RLHF. Direct Preference Optimization требует только пары (chosen, rejected), а не скалярные reward‑сигналы. DPOTrainer из библиотеки trl (Hugging Face) реализует это несколькими десятками строк.

Типичная ошибка. Датасет из 500 примеров, 5 эпох, validation loss 0.8 — кажется норм. Но на тесте модель деградировала на общих инструкциях. Причина: catastrophic forgetting. Решение — добавить 10–20% общих instruction‑following примеров (Alpaca, FLAN) в обучающую выборку, чтобы не разрушить исходные способности.

Как выбрать базовую модель: 8B или 70B?

Для большинства задач fine‑tuning 8B модели достаточно. 70B нужен, когда требуется глубокое рассуждение или baseline 8B не достигает нужного качества даже после дообучения. Стоимость инференса Llama‑3 8B через vLLM на A100 — около $0.001/1K токенов, что в 15 раз дешевле GPT‑4.

Что даёт PagedAttention в production?

vLLM — первый выбор для serving open‑source моделей. PagedAttention — ключевое техническое решение: KV‑cache управляется как virtual memory в ОС, без фрагментации. Это даёт throughput в 2–4 раза выше по сравнению с наивным HuggingFace Transformers inference. Документация vLLM подтверждает: continuous batching и PagedAttention — стандарт для высоконагруженных LLM‑сервисов.

Типичные числа на A100 80GB для Llama‑3 8B (bf16): 400–600 req/s, P50 latency 200–400ms, P99 latency 600–900ms при concurrency 64. Для 70B на двух A100 с tensor parallelism: 80–120 req/s, P99 latency 1.5–2.5s. Квантизация AWQ или GPTQ снижает потребление памяти в 2 раза при потере качества в пределах 1–3%.

Мультиагентные системы

Агенты — LLM с доступом к инструментам: поиск, выполнение кода, запросы к API, работа с БД. Основные паттерны:

• ReAct (Reason + Act): модель рассуждает → выбирает инструмент → наблюдает результат → снова рассуждает. LangChain и LlamaIndex реализуют из коробки.
• Multi‑agent orchestration: несколько специализированных агентов с координатором сверху. Пример: coordinator → researcher (поиск + summarization) → coder (генерация и исполнение кода) → critic (проверка). Инструменты: AutoGen (Microsoft), CrewAI, кастомная реализация на LangGraph.

В продакшене агентные системы недетерминированы. Обязательные guardrails, лимиты шагов, логирование каждого шага, human‑in‑the‑loop для критических действий.

Как мы работаем: этапы, сроки, результат

Что входит в работу

Мы передаём:

• Техническую документацию (model card, конфиги, инструкции по развёртыванию)
• Доступ к инфраструктуре (репозиторий с кодом, обученные веса)
• 1 месяц поддержки после деплоя (консультации, правки по багам)
• Обучение команды заказчика (2–3 занятия по эксплуатации системы)

Сроки: базовый RAG‑прототип — 1–2 недели. Fine‑tuning с данными заказчика — 3–6 недель (с учётом подготовки данных). Production‑система с мониторингом и переобучением — 2–4 месяца. Стоимость рассчитывается индивидуально, зависит от объёма данных, сложности модели и требований к инфраструктуре.

Хотите оценить свой проект? Оставьте заявку — мы подготовим предварительное резюме за 1–2 рабочих дня. Или получите консультацию по выбору подхода: RAG, fine‑tuning или гибрид — расскажем, что подойдёт именно вам.