Chrome扩展开发中如何通过JavaScript调用Python函数获取返回值

Chrome扩展运行在浏览器沙箱环境中，无法直接读取、执行本地Python文件，最易落地、适配初学者的方案是：在本地启动一个轻量Python接口服务，扩展端用原生fetch发请求获取函数返回值，无需引入jQuery，不存在第三方依赖加载失败的问题。

第一步：编写并启动Python本地服务 #

1. 先安装两个必需的Python依赖，打开终端/命令提示符执行以下命令：

pip install flask
pip install flask-cors

2. 修正你原有external.py的语法错误（Python函数声明行末尾必须加冒号），补充接口逻辑，完整代码如下：

from flask import Flask, request
from flask_cors import CORS

# 初始化服务，配置跨域允许Chrome扩展请求
app = Flask(__name__)
CORS(app)

# 你原本的自定义函数
def name(x):
    return "your " + x

# 定义对应接口，供JS调用
@app.route('/get_name', methods=['GET'])
def get_name():
    # 接收JS传来的参数
    input_x = request.args.get('x', '')
    # 执行自定义函数拿到结果
    res = name(input_x)
    # 把结果返回给JS
    return {"data": res}

if __name__ == '__main__':
    # 本地启动服务，端口选5678，避免和其他服务冲突
    app.run(port=5678)

3. 在终端进入external.py所在文件夹，执行命令启动服务：

python external.py

看到输出Running on http://127.0.0.1:5678就说明服务启动成功，后续使用时不要关闭这个终端窗口，关闭则服务停止。

第二步：扩展端配置+JS调用代码 #

1. 先修改扩展的manifest.json文件，添加本地地址请求权限，否则扩展会拦截请求，配置参考如下（原有其他配置保持不变即可）：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "host_permissions": [
    "http://127.0.0.1/*"
  ]
}

2. 在index.js中用原生fetch调用接口即可，不需要引入任何额外库：

// 封装调用Python函数的方法
async function callPyName(x) {
  // 向本地Python服务发请求，携带参数
  const resp = await fetch(`http://127.0.0.1:5678/get_name?x=${encodeURIComponent(x)}`);
  // 解析返回结果
  const result = await resp.json();
  // 返回Python函数的执行结果
  return result.data;
}

// 实际调用示例
async function main() {
  const data = await callPyName("John");
  console.log(data); // 控制台输出 "your John"，就是你需要的返回值
  // 后续所有需要用到data的业务逻辑，都写在这个函数里即可
}

// 执行逻辑
main();

注意：网络请求属于异步操作，不能直接写同步赋值的代码（比如你示例里的data = "external.py".name("John")），必须放在async函数中用await等待结果返回，上面给出的写法是最适合新手理解的异步写法，直接套用即可。

常见问题说明 #

• 你之前引入jQuery失败是因为Chrome扩展Manifest V3默认的内容安全策略禁止加载未打包的外部脚本，且这个需求完全不需要jQuery，原生fetch足够实现，少引入依赖可以避免很多环境兼容问题。
• 如果需要新增更多Python自定义函数，只需要在external.py里按照/get_name的格式新增对应接口，在JS里新增对应的请求封装即可，逻辑完全一致。
• 如果服务启动后请求报错，先检查终端有没有报错信息，再确认manifest里的权限是否配置正确。

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