Kann umgeschrieben werden als: Ist es möglich, npm-Module in Chrome-Erweiterungen zu verwenden?

Question

Ich habe es versucht, aber es kam die Fehlermeldung „Anforderung ist nicht definiert“. Ich kann keine Informationen zu diesem Fehler finden. Kann mir das bitte jemand erklären?

Answer 1

2022年的更新答案

简短回答：是的，你可以要求/导入包。而不是自己费力地设置和配置像Webpack这样的打包工具（特别是如果你没有使用过它们），现在有一些构建工具可以用来创建Chrome扩展的样板代码：

• Extension CLI - 这个工具有很好的文档，你还可以参考一些使用了这个工具的Chrome扩展的源代码（阅读：学习其他人如何设置他们的代码）。
• Chrome Extension CLI

使用它们的好处：

• 新项目会初始化一个默认的项目文件结构，非常有帮助。
• 它们支持现代JavaScript（ES6、ES2021），所以模块可以正常工作。
• 它们已经集成并预配置了打包工具（我认为上述两种情况下都是Webpack）。因此，你不需要自己安装和配置任何工具。
• 你可以像平常一样使用npm安装任何你需要的包/依赖。

然后，当然，让Chrome扩展的官方文档引导你完成剩下的部分。

Answer 2

这是可能的，但你必须小心。尝试使用require()来加载一个包意味着Node将尝试在你的文件系统中定位它的文件。Chrome扩展只能访问你在清单中声明的文件，而不能访问你的文件系统。

为了解决这个问题，使用像Webpack这样的模块打包工具，它将生成一个包含通过require()引入的所有包的代码的单个JavaScript文件。你需要为你的每个Chrome扩展组件生成一个单独的模块（例如背景页、内容脚本、弹出窗口），并在清单中声明每个生成的模块。

为了避免尝试设置构建系统以使require()可用，我建议从一个样板项目开始。你可以查看我的扩展来看我是如何做的。