可以重写为：是否可以在Chrome扩展中使用npm模块？

Question

我尝试了，但是出现了一个“require is not defined”错误。我找不到关于这个错误的信息，请问有人可以给我解释一下吗？

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()可用，我建议从一个样板项目开始。你可以查看我的扩展来看我是如何做的。