Как сделать AI-расширение Chrome, которое пересказывает открытую страницу

Расширение может прочитать активную вкладку по клику и попросить встроенный Summarizer API сократить текст, не отправляя страницу на случайный внешний сервер. API доступен не во всех версиях и конфигурациях Chrome, поэтому рабочий проект обязан проверять availability. Если встроенная модель недоступна, расширение покажет простой локальный пересказ из первых содержательных предложений.

AI-функция выглядит эффектно только в счастливом сценарии. На практике есть четыре состояния: API отсутствует, модель доступна сразу, её можно скачать или она недоступна на устройстве. Кроме того, расширение не должно читать все вкладки постоянно. Мы используем activeTab, поэтому доступ появляется после явного клика пользователя по иконке.

Как popup общается с активной вкладкой

manifest.json объявляет popup, разрешения activeTab и scripting. По нажатию кнопки popup получает активную вкладку и инъецирует короткую функцию. Она выполняется в контексте страницы, но возвращает только title и первые 12 тысяч символов innerText. Затем summarize проверяет наличие глобального Summarizer и вызывает availability.

У проекта есть один главный маршрут: получить входные данные, проверить их, выполнить действие и показать результат. Если каждый этап можно проверить отдельно, ошибка перестаёт быть загадкой.

От входных данных до видимого результата. Доступ появляется после явного клика пользователя

Собираем Manifest V3 и пересказ

Создайте каталог с manifest.json, popup.html и popup.js из исходников. Откройте chrome://extensions, включите режим разработчика и выберите «Загрузить распакованное расширение». Откройте обычную статью, нажмите иконку расширения и кнопку пересказа. Встроенные AI API Chrome могут требовать поддерживаемую версию, совместимое устройство и загруженную модель. Код ниже не предполагает, что они есть у каждого пользователя.

async function getPageText() {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  if (!tab?.id) throw new Error("Активная вкладка не найдена");

  const [{ result }] = await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: () => ({
      title: document.title,
      text: document.body.innerText.replace(/\s+/g, " ").slice(0, 12_000),
    }),
  });
  return result;
}

function extractiveFallback(text) {
  return text.split(/(?<=[.!?])\s+/).filter((part) => part.length > 40).slice(0, 3).join(" ");
}

async function summarize(text) {
  if (!("Summarizer" in globalThis)) return extractiveFallback(text);
  const availability = await Summarizer.availability();
  if (availability === "unavailable") return extractiveFallback(text);

  const session = await Summarizer.create({
    type: "key-points",
    format: "markdown",
    length: "short",
  });
  try {
    return await session.summarize(text);
  } finally {
    session.destroy();
  }
}

Fallback не изображает искусственный интеллект и не обещает одинаковое качество. Он даёт полезный минимальный результат и делает ограничение прозрачным. Пользователь всегда понимает, что расширение не отправляло страницу наружу.

Что отличает устойчивый проект от случайного успеха. Функция должна запрашивать ровно те права, которые использует

Проверяем доступность встроенной модели

Popup является короткоживущей страницей расширения. activeTab выдаёт временный доступ к вкладке после жеста пользователя. scripting.executeScript выполняет сериализуемую функцию в изолированном мире и возвращает данные. Мы не передаём DOM-узлы, только строки. Summarizer API использует встроенную модель, если среда соответствует требованиям.

document.body.innerText может содержать меню, рекламу и комментарии. Для качества сначала попробуйте article.innerText, затем main.innerText и только потом body. Ограничивайте объём, чтобы не перегружать контекст. Не читайте поля ввода, буфер обмена, историю и другие вкладки без отдельной необходимости.

Тестируем пустую страницу, запрет и длинный текст

Проверьте расширение на короткой заметке, длинной статье, странице без article и вкладке chrome://extensions. Для каждого случая статус должен быть явным. Добавьте сначала извлечение article или main, а затем body. Покажите счётчик символов, переданных в summarize. После этого создайте переключатель длины short/medium и передавайте его в Summarizer.create.

Устойчивое AI-расширение начинается с честной проверки возможностей. Оно полезно и на совместимом устройстве, и без модели, а пользователь видит, какой путь дал результат.

Четыре проверки перед следующим шагом. Отсутствие модели является обычным сценарием

Улучшаем расширение без лишних разрешений

Следующий шаг: добавить выделение текста. contextMenus может запускать пересказ только выбранного фрагмента, что уменьшает объём и улучшает релевантность. Затем сохраните настройки длины через chrome.storage, но не содержимое страниц. Для публикации подготовьте иконки, описание permissions и политику приватности.

Как изучить тему в Кодике

В Кодике сначала закрепите DOM, события и массивы строк. Затем сделайте обычное расширение с popup без AI. После этого добавьте проверку возможности и два маршрута результата. Так новый API оказывается одной заменяемой функцией, а не центром всего проекта.

Не пытайтесь запомнить весь API. В тренажёре Кодика сначала воспроизведите чистую логику без библиотеки, затем восстановите подключение и обработку ошибок. Финальный тест: объяснить проект по памяти и добавить одну свою функцию.

Что получится в итоге

Popup читает содержательную часть активной вкладки, показывает режим и возвращает короткое резюме через встроенную модель или локальный fallback.