В этой статье подробно описывается процесс создания расширения Chrome с использованием Next.js, сосредоточенного на использовании реагирования для всплывающего окна и достижения эффективной организации кода. Автор делится своим опытом переписывания тематического проекта Twitter в качестве расширения Next.js, подчеркивая преимущества структуры Next.js по сравнению с альтернативами, такими как Create React App.

Ключевым приведенным преимуществом является улучшенная организация кода, минимизирующая шаблон. В то время как Next.js, такие как Static HTML -экспорт, предварительная загрузка JavaScript и маршрутизация полезны, основной мотивацией была более чистая код.

автор описывает практическую структуру папок:

? extension
  ? manifest.json
? next-app
  ? pages
  ? public
  ? styles
  ? package.json
README.md

важнейшим аспектом является индивидуальный сценарий сборки. Стандарт Next Export нуждается в модификации для обработки специфики расширения Chrome. Сценарий экспортирует приложение Next.js в каталог расширения, переименовал файлы (удаление ведущих подчеркиваний) и управляет активами из папки public . Окончательный, комплексный сценарий сборки, включая обработку активов, предоставляется.

файл manifest.json настроен на использование ключевого слова (Manifest v3) для указания всплывающего html -файла, сгенерированного Next.js:

{
  "name": "Next Chrome",
  "description": "Next.js Chrome Extension starter",
  "version": "0.0.1",
  "manifest_version": 3,
  "action": {
    "default_title": "Next.js app",
    "default_popup": "index.html"
  }
}

важные ограничения отмечены: Server-Side Next.js функции (например, Next/image ) несовместимы с хромированными расширениями.

Последние шаги включают в себя построение расширения с использованием npm Run Build (или jarn build ), загрузка распакованного расширения в Chrome ( chrome: // endensions ) и способный режим разработчика.

]