Cet article détaille le processus de création d'une extension chromée à l'aide de Next.js, en se concentrant sur la réaction de réaction pour la fenêtre contextuelle et une organisation de code efficace. L'auteur partage leur expérience de réécriture d'un projet de thème Twitter comme une extension suivante.js, mettant en évidence les avantages de la structure de next.js sur des alternatives comme Create React App.

Le principal avantage cité est l'organisation de code améliorée, minimisant la baillire. Alors que les fonctionnalités Next.js comme l'exportation HTML statique, le préchargement JavaScript et le routage sont bénéfiques, la motivation principale était le code plus propre.

L'auteur décrit une structure de dossier pratique:

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

Un aspect crucial est le script de construction personnalisé. Le standard Exportant suivant a besoin de modifications pour gérer les spécificités de l'extension Chrome. Le script exporte l'application Next.js vers le répertoire d'extension, renomnait les fichiers (supprimant les principaux soulignements) et gère les actifs du dossier public . Le script de construction final et complet, y compris la manipulation des actifs, est fourni.

Le fichier manifest.json est configuré pour utiliser le mot-clé action (manifest v3) pour spécifier le fichier html popup généré par 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"
  }
}

Les limitations importantes sont notées: les fonctionnalités de serveur next.js (par exemple, next / image ) sont incompatibles avec les extensions chromées.

Les étapes finales impliquent la création de l'extension en utilisant npm run build (ou yarn build ), chargeant l'extension déballée dans chrome ( chrome: // extensions ), et activer le mode développeur.

En conclusion, l'article fournit un guide pratique pour les développeurs cherchant à tirer parti des forces de Next.js pour créer des extensions de chrome, offrant un processus de développement rationalisé et une organisation de code améliorée. Il souligne l'importance d'un processus de construction personnalisé et met en évidence des pièges potentiels à éviter.