Chrome 扩展程序错误：未定义 Require

Question

我的目标是包含一个位于 node_modules/ 中的文件夹。使用 Node.js 我可以做到：

var example = require('example');

但是在我的 Google Chrome 扩展中它不起作用，它会抛出错误：

未定义要求。

Answer 1

取决于您是否想在后台页面或内容脚本中使用它，但我假设您正在谈论后台页面。

在清单文件中：

"background": {
    "scripts": [ "scripts/require.js","scripts/main.js"]
}

在main.js中：

require.config({
    baseUrl: "scripts"
});

require( [ /*...*/ ], function(  /*...*/ ) {
    /*...*/

});

然后在background.html中：

<script data-main="scripts/main.js" src="scripts/require.js>

Answer 2

快速简单的捆绑

esbuild

如果您的项目要求允许，请考虑使用像

esbuild

这样的捆绑器，通过将语法转换为浏览器兼容的代码来帮助避免兼容性问题。设置速度很快，与其他捆绑器（例如

webpack

）不同，不需要设置配置文件。

一步一步

esbuild

是一款快速、现代的捆绑器，可快速设置。其他捆绑器（如

parcel

）也可以工作（请参阅详细指南）。

1. 安装捆绑器

   运行以下命令将

   esbuild

   安装为依赖项（请参阅 文档）：

   npm install --save-exact esbuild
   

2. 捆绑脚本

   安装后，您可以在根目录（即

   package.json

   所在的位置）执行以下命令来捆绑您的客户端代码：

   esbuild src/content.js --bundle --outfile=dist/bundle.js
   

   使用

   esbuild

   捆绑

   content.js

   将处理所有导入的模块，包括

   my-script.js

   ，并将它们包含在输出

   bundle.js

   中。

   请注意，

   src

   应替换为

   content.js

   的正确文件路径，我认为它是单个入口点。根据您的项目要求，

   esbuild

   也支持设置多个入口点（请参阅文档）。

说明

检查语法

使用像

esbuild

这样的打包器默认会将文件转译为浏览器兼容的 ES 语法，这意味着它可以处理混合使用 ES 和 CommonJS 语法的文件或仅包含 CommonJS 语法的文件的情况（请参阅文档） .

浏览器兼容性

如果 ES 语法不是受支持的版本，或者在脚本中导入和导出时使用的语法不一致，则浏览器可能会返回错误。为了处理版本不兼容问题，我们可以使用

--target

中的

esbuild

标志来定位特定版本的 ES 语法（请参阅 文档）。

Answer 3

我没有找到在Chrome的snippet中直接运行node模块的方法。但是，您可以改为运行节点调试。

1. npm install -g node-inspector（安装节点调试模块）
2. node-debug app.js（运行节点调试）

然后，chrome 会打开一个调试窗口，你可以使用 http://localhost:8080/debug?port=5858 的 url 自行查询； 而这个调试是基于Chrome本身的v8调试。