是否可以在chrome扩展中要求npm模块？

Question

我试过了,但我有一个'require is not defined'错误.我找不到相关的信息,有人可以开导我的菜鸟吗？

Answer 1

2022 年更新答案

简短的回答：是的，您可以要求/导入包。现在您可以使用构建工具来为 Chrome 扩展创建样板“脚手架”，而不是自行设置和配置像 Webpack 这样的捆绑器（特别是如果您没有使用它们的经验）的繁琐工作：

• 扩展 CLI——这个有详细的文档记录，您还可以参考一些使用此工具的 Chrome 扩展的源代码（阅读：了解其他人如何设置其代码）。
• Chrome 扩展 CLI

使用它们的好处：

• 新项目以默认项目文件结构启动。超级有帮助。
• 它们支持现代 Javascript（ES6、ES2021），因此模块可以正常工作。
• 他们已经集成并预先配置了捆绑器（我认为在上述两种情况下都是 Webpack）。因此，您无需自行安装和配置任何内容。
• 您可以npm像平常一样安装您需要的任何软件包/依赖项。

当然，让Chrome 扩展的官方文档指导您完成剩下的事情。

Answer 2

这是可能的,但你必须要小心.尝试require()一个包意味着该节点将尝试在您的文件系统中找到它的文件.chrome扩展只能访问您在清单中声明的​​文件,而不是文件系统.

要解决这个问题,请使用像Webpack这样的模块捆绑器,它将生成一个javascript文件,其中包含通过require()包含的所有包的所有代码.您必须为chrome扩展的每个组件生成一个单独的模块(例如,一个用于后台页面,一个用于内容脚本,一个用于弹出窗口),并在清单中声明每个生成的模块.

为了避免尝试设置构建系统以使用require()成为可能,我建议从一个样板项目开始.您可以查看我的扩展程序,看看我是如何做到的.

Answer 3

不可能直接在 Chrome 扩展中需要节点模块。但是，可以将节点应用程序和包捆绑到浏览器中以与您的扩展一起使用。请参阅此处了解更多信息：是否可以使用 node.js 开发 Google Chrome 扩展？