Chrome扩展内容脚本跨文件函数调用失败求助

核心原因分析 #

你的问题大概率和Chrome扩展内容脚本的作用域隔离机制或Manifest版本配置有关：

• 若使用Manifest V3且开启了ES模块模式（配置"type": "module"），每个脚本会作为独立模块运行，模块级作用域相互隔离，即使挂载window也无法共享。
• 若使用Manifest V2，同一扩展的内容脚本默认共享全局作用域，出现undefined通常是script1存在语法错误导致代码未执行，或脚本加载顺序异常。

具体解决方法 #

1. 移除ES模块配置（Manifest V3优先尝试）

检查你的manifest.json，如果content scripts配置了"type": "module"，直接删除这一项：

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["content-scripts/script1.js", "content-scripts/script2.js"]
    // 删除 "type": "module" 这一行
  }
]

修改后，两个脚本会运行在同一个全局作用域，script1中定义的函数无需挂载window，可直接在script2中调用。

2. 用模块导入导出共享函数（需保留模块模式时）

如果必须使用ES模块，调整脚本为模块化写法：

• script1.js：

export function myFunction() {
  // 你的函数逻辑
}

• script2.js：

import { myFunction } from './script1.js';
console.log(myFunction); // 可正常访问

同时在manifest.json中只需要引入入口脚本（script2），并保留模块配置：

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["content-scripts/script2.js"],
    "type": "module"
  }
]

3. 排查语法错误（通用步骤）

打开Chrome开发者工具的Console面板，检查script1.js是否有语法报错（比如括号不匹配、变量未定义等）。这类错误会导致脚本中断执行，window.myFunction自然无法被赋值。

4. 验证脚本加载顺序

在两个脚本开头添加日志，确认执行顺序：

• script1.js：

console.log('script1 已加载');
function myFunction(){/*...*/}
window.myFunction = myFunction;

• script2.js：

console.log('script2 已加载');
console.log(myFunction, window.myFunction);

如果日志中script2先输出，说明manifest.json中js数组的顺序被错误设置，调整为["content-scripts/script1.js", "content-scripts/script2.js"]即可。

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