Este artigo detalha o processo de criação de uma extensão do Chrome usando o Next.js, concentrando -se na alavancagem do reagem para o pop -up e alcançando a organização de código eficiente. O autor compartilha sua experiência reescrevendo um projeto de tema do Twitter como uma extensão Next.js, destacando as vantagens da estrutura do Next.JS em alternativas como Create React App.

O principal benefício citado é a organização de código aprimorada, minimizando a caldeira. Enquanto o próximo.js apresenta recursos como exportação estática em HTML, pré -carregamento de JavaScript e roteamento são benéficos, a motivação principal foi o código mais limpo.

O autor descreve uma estrutura prática da pasta:

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

Um aspecto crucial é o script de construção personalizado. O padrão a seguir exporta precisa de modificação para lidar com os específicos do Chrome Extension. O script exporta o aplicativo Next.js para o diretório de extensão, renomeia arquivos (removendo sublinhados principais) e gerencia ativos da pasta public . O script de construção final e abrangente, incluindo o manuseio de ativos, é fornecido.

O arquivo manifest.json está configurado para utilizar a palavra -chave action (manifesto v3) para especificar o arquivo html pop -up gerado por 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"
  }
}

limitações importantes são observadas: os recursos do lado do servidor. As etapas finais envolvem a construção da extensão usando npm run build

yarn build ), carregando a extensão não embalada em Chrome ( Chrome: // Extensions Em conclusão, o artigo fornece um guia prático para desenvolvedores que buscam alavancar os pontos fortes do Next.JS para a construção de extensões de cromo, oferecendo um processo de desenvolvimento simplificado e uma organização de código aprimorada. Ele enfatiza a importância de um processo de construção personalizado e destaca possíveis armadilhas a serem evitadas.