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

Question

我尝试过，但出现“要求未定义”错误。我找不到这方面的信息，有人可以启发我的菜鸟吗？

Answer 1

有可能，但你必须小心。尝试 require() 一个包意味着节点将尝试在您的文件系统中查找其文件。 Chrome 扩展只能访问您在清单中声明的文件，而不能访问您的文件系统。

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

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

Answer 2

2022 年更新答案

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

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

使用它们的好处：

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

  npm

  来安装您需要的任何软件包/依赖项。

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

Answer 3

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

Answer 4

是的，使用 esm npm 包是可能的。

require

是commonjs模块加载器。
浏览器不支持 commonjs 模块系统
这样就出现了这个错误。

方法一：

1. 运行 npm init -y 并在 package.json 中添加 "type" :"module" 。

2. 创建path.js文件

3. 在path.js中添加这一行

   const fullPath =等待 import.meta.resolve("npm-pkg-name"); const 路径 = fullPath?.match(/(/node_modules.*)/)[0]; 控制台.log(路径);

4. 在 package.json 中添加此行

   “路径”：“节点--实验导入元解析路径.js”，

5. 复制控制台输出文本。将包名称替换为复制的路径。

方法二： 安装其他npm包来查找和替换
npm 包的虚拟路径到真实路径，以便 chrome 浏览器能够找到它。
安装Path-fixxer
在path.js中添加这一行

import setAllPkgPath from "path-fixxer";
setAllPkgPath();

然后运行命令：

npm run path

。
现在打开浏览器来测试一下。

Answer 5

是的，使用 webpack 或简单地使用 chrome-extension-cli

chrome-extension-cli

包通过安装和预配置webpack解决了这个问题。这使您可以轻松导入包或模块

立即开始

您不需要安装或配置Webpack。
Webpack 已预先配置，以便您可以专注于代码。

只需创建一个项目，就可以开始了。

了解更多：https://github.com/dutiyesh/chrome-extension-cli