Chrome扩展：内容脚本中require未定义及引入require.js问题

这个报错的核心原因很明确：Chrome的内容脚本运行在独立的浏览器环境里，完全不支持Node.js的模块系统——require是Node专属的API，浏览器（包括内容脚本）默认没有这个全局函数，而且像wordnet这类Node模块本身依赖Node核心API（比如fs文件系统），直接在内容脚本里引用肯定行不通。

下面给你几个可行的解决方案，按推荐优先级排序：

方案1：打包Node模块为浏览器兼容格式 #

这是最靠谱的做法，能把Node模块转换成浏览器/内容脚本能识别的代码：

• 用Browserify或者Webpack这类工具，把wordnet及其依赖打包成一个独立的UMD格式脚本（比如wordnet-browser.js）。
  • 以Browserify为例，命令大概是：browserify node_modules/wordnet/index.js -o scripts/wordnet-browser.js --standalone wordnet
• 把打包好的脚本放到你的扩展目录里（比如scripts/文件夹）。
• 修改manifest.json的内容脚本配置，直接加载这个打包后的脚本，不需要require.js：

  "content_scripts": [
    {
      "matches": ["https://www.reddit.com/r/design_critiques/*"],
      "run_at": "document_end",
      "js": [
        "scripts/wordnet-browser.js",
        "scripts/content.js"
      ]
    }
  ]
  

• 然后在content.js里直接用全局暴露的wordnet对象：

  // 现在wordnet是全局变量了
  wordnet.lookup('design').then(results => {
    console.log('同义词结果：', results);
  });
  

方案2：正确配置Require.js（如果坚持要用） #

如果你一定要用Require.js，得注意两个关键点：Require.js的模块语法和Node的require不一样，而且必须先处理wordnet的浏览器兼容问题：

1. 先按方案1的步骤，把wordnet打包成UMD格式（Require.js能识别的模块）。
2. 修改manifest.json，确保Require.js是第一个加载的脚本：

   "content_scripts": [
     {
       "matches": ["https://www.reddit.com/r/design_critiques/*"],
       "run_at": "document_end",
       "js": [
         "scripts/require.js",
         "scripts/content.js"
       ]
     }
   ]
   

3. 在content.js开头配置Require.js的模块路径，然后用Require.js的异步加载语法：

   // 告诉Require.js去哪里找wordnet模块
   require.config({
     paths: {
       "wordnet": "../scripts/wordnet-browser" // 对应打包后的脚本路径
     }
   });
   
   // 异步加载wordnet并使用
   require(['wordnet'], function(wordnet) {
     wordnet.lookup('critique').then(results => {
       console.log(results);
     });
   });
   

重要提醒：关于WordNet的词典文件 #

wordnet模块默认依赖本地的词典文件，而内容脚本没有访问本地文件系统的权限。你需要：

• 把WordNet的词典文件（比如dict文件夹里的内容）复制到你的扩展目录中。
• 修改打包后的wordnet-browser.js代码，让它从扩展的静态资源路径读取词典文件，而不是本地路径。
• 或者换用一个基于Web API的同义词库服务，避免处理本地文件的问题。

内容的提问来源于stack exchange，提问作者suku22z