Chrome扩展开发中如何从JS调用Python函数并传递参数获取返回结果

可以实现，常用两种方案可选：

方案1：本地Python启动轻量HTTP服务（开发成本最低） #

原理是本地跑一个简易Python Web服务，扩展JS通过HTTP请求把id传给服务端执行逻辑，处理完成后返回结果再执行后续JS逻辑。

第一步：修改Python代码，添加Web接口 #

from flask import Flask, request
from youtube_transcript_api import YouTubeTranscriptApi

app = Flask(__name__)

@app.route('/get_transcript', methods=['POST'])
def get_transcript():
    yt_id = request.json.get('id')
    transcript_list = YouTubeTranscriptApi.get_transcript(yt_id)
    data = '<html>\n<head>\n<link rel="stylesheet" href="styles.css">\n</head>\n<body>\n<p>\n' 
    for i in transcript_list:
        data += i.get('text') + ' '
    data += '</p>\n</body>\n</html>'
    # frame.html需要放在扩展可访问的对应路径下
    with open('frame.html','w', encoding='utf-8') as html_file:
        html_file.write(data)
    return {"status": "success"}

if __name__ == '__main__':
    # 本地启动服务，端口选未被占用的即可
    app.run(port=5000, debug=False)

第二步：修改扩展JS代码，发起HTTP请求 #

chrome.browserAction.onClicked.addListener(function(activeTab){ 
  chrome.tabs.getSelected(null, async function(tab) {
    var tabId = tab.id;
    var tabUrl = tab.url;
    var id = tabUrl.split("=")[1];
    // 调用本地Python服务
    await fetch('http://localhost:5000/get_transcript', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({id: id})
    })
    // 等待Python处理完成后再打开新标签
    var newURL = "frame.html";
    chrome.tabs.create({ url: newURL});
  });
});

使用说明 #

• 先安装依赖：pip install flask
• 每次使用扩展前先运行修改后的Python脚本启动本地服务即可

方案2：Chrome原生消息通信（Native Messaging，更正式） #

如果不想额外开服务，可以用Chrome官方提供的Native Messaging机制，直接让扩展和本地Python程序通信，不需要启动Web服务，但是需要做额外配置：

• 修改Python代码，从标准输入读取扩展传过来的参数，处理后从标准输出返回结果
• 在系统里注册Native Messaging Host配置文件，指定Python程序路径、允许通信的扩展ID
• 扩展的manifest.json里添加nativeMessaging权限，调用chrome.runtime.sendNativeMessage接口触发Python程序执行

替代方案（完全不用Python） #

你当前的需求只是获取YouTube字幕生成HTML，完全可以用JS直接调用YouTube的公开字幕接口实现，不需要跨语言调用，使用起来更方便，不需要用户额外运行Python程序。

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