如何在浏览器扩展中调用另一服务器JS文件中的函数？

问题原因 #

浏览器扩展的默认内容安全策略（CSP）限制了脚本来源，你的扩展配置中script-src仅允许'self'和'wasm-unsafe-eval'，因此无法加载http://localhost:3000/weather.js这类外部脚本。

可行解决方案 #

1. 合规修改扩展CSP配置（视Manifest版本而定）

• Manifest V2：在manifest.json中更新content_security_policy，将外部脚本源加入白名单：

{
  "content_security_policy": "script-src 'self' http://localhost:3000 'wasm-unsafe-eval'; object-src 'self'"
}

• Manifest V3：V3对CSP限制更严格，不允许直接添加非HTTPS的外部源（localhost为HTTP）。若仅用于开发测试，可通过Chrome开发者工具的"允许不安全内容"临时绕过，但正式发布必须使用HTTPS源，或改用其他方案。

2. 动态获取并注入脚本内容

通过fetch获取外部脚本代码，再动态注入到页面中执行（需确保CSP允许unsafe-inline或脚本内容符合规则）：

document.querySelector(".btn-test").onclick = async () => {
  try {
    // 获取外部脚本内容
    const res = await fetch("http://localhost:3000/weather.js");
    const scriptCode = await res.text();
    
    // 创建script标签注入
    const script = document.createElement("script");
    script.textContent = scriptCode;
    document.body.appendChild(script);
    
    // 执行目标方法
    main();
  } catch (err) {
    console.error("加载脚本失败:", err);
  }
};

3. 将外部脚本打包到扩展中（最安全合规）

直接将weather.js下载到扩展本地目录，引用本地脚本即可完全符合CSP的'self'限制：

<script src="/weather.js"></script>

保留你的按钮点击逻辑即可正常执行main方法，这种方式无安全风险，是官方推荐的做法。

注意事项 #

加载外部脚本存在安全风险，若外部源不可信可能导致恶意代码注入。优先选择本地打包的方式，若必须使用外部脚本，务必确保源的可信度，并在CSP中严格限定允许的域名。

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