Peut être réécrit comme suit : Est-il possible d'utiliser des modules npm dans les extensions Chrome ?

Question

J'ai essayé, mais j'ai obtenu une erreur « l'exigence n'est pas définie ». Je ne trouve pas d'informations sur cette erreur, quelqu'un peut-il me l'expliquer ?

Answer 1

Réponses mises à jour pour 2022

Réponse courte : Oui, vous pouvez exiger/importer des packages. Plutôt que d'installer et de configurer laborieusement vous-même un outil de packaging comme Webpack (surtout si vous ne les avez pas utilisés), il existe désormais des outils de build que vous pouvez utiliser pour créer du code passe-partout pour les extensions Chrome :

• Extension CLI - Cet outil est bien documenté, et vous pouvez également vous référer au code source de certaines Extensions Chrome qui utilisent cet outil (lire : découvrez comment d'autres configurent le leur).
• CLI d'extension Chrome

Avantages de leur utilisation :

• Les nouveaux projets initialiseront une structure de fichiers de projet par défaut, ce qui est très utile.
• Ils prennent en charge le JavaScript moderne (ES6, ES2021) afin que les modules fonctionnent correctement.
• Ils ont des outils de packaging intégrés et préconfigurés (je pense que c'était Webpack dans les deux cas ci-dessus). Par conséquent, vous n’avez pas besoin d’installer et de configurer des outils vous-même.
• Vous pouvez utiliser npm comme d'habitude pour installer tous les packages/dépendances dont vous avez besoin.

Ensuite, bien sûr, laissez-vous guider par la Documentation officielle de l'extension Chrome pour le reste.

Answer 2

C'est possible, mais il faut être prudent. Tenter d'utiliser require() pour charger un package signifie que Node tentera de localiser ses fichiers dans votre système de fichiers. Les extensions Chrome ne peuvent accéder qu'aux fichiers que vous déclarez dans votre manifeste, pas à votre système de fichiers.

Pour résoudre ce problème, utilisez un outil de regroupement de modules comme Webpack, qui générera un seul fichier JavaScript contenant le code de tous les packages introduits via require(). Vous devez générer un module distinct pour chacune de vos extensions Chrome (par exemple, pages d'arrière-plan, scripts de contenu, popups) et déclarer chaque module généré dans le manifeste.

Pour éviter d'essayer de configurer le système de construction pour rendre require() disponible, je recommande de commencer par un projet passe-partout. Vous pouvez consulter mon extension pour voir comment je procède.