Chrome扩展错误:未定义Require

Chrome extension error: Require is not defined

本文关键字：未定义 Require 错误 扩展 Chrome      更新时间：2023-09-26

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

var example = require('example');

但在我的谷歌Chrome扩展中，它不起作用，它抛出了错误：

未定义Require。

这取决于您是想在后台页面还是在内容脚本中使用它，但我认为您谈论的是后台页面。

在清单文件中：

"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>

Quick&与esbuild的简单绑定

如果您的项目需求允许，可以考虑使用类似esbuild的bundler，通过将语法转换为浏览器兼容的代码来帮助避免兼容性问题。设置很快，与webpack等其他捆绑器不同，不需要设置配置文件。

循序渐进

esbuild是一款快速、现代化的捆扎机。parcel等其他捆扎机也可以工作（请参阅详细指南）。

  1. 安装Bundler

    运行以下命令将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这样的bundler会将文件转换为与浏览器兼容的ES语法，这意味着它可以处理混合使用ES和CommonJS语法的文件或仅使用CommonJS语法文件的情况（请参阅文档）。

浏览器兼容性

如果ES语法不是受支持的版本，或者脚本中的导入和导出没有一致使用，浏览器可能会返回错误。为了处理版本不兼容性，我们可以通过在esbuild中使用--target标志来针对ES语法的特定版本（请参阅文档）。

Chrome扩展支持内容脚本中的ES6模块。您可以使用import语句来包含模块：

import example from './path-to-node-modules/example';

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

  1. npm install-g节点检查器（用于安装节点调试模块）
  2. node-debug app.js（用于运行node-debug）

然后，chrome将打开一个调试窗口，您可以使用http://localhost:8080/debug?port=5858；这个调试是基于Chrome本身的v8调试。

相关文章：