Chrome扩展开发：JavaScript与Python本地通信问题及代码调试

核心问题分析 #

你当前的代码存在两个关键问题：

1. Chrome扩展的JavaScript运行在浏览器沙箱环境中，无法直接使用Node.js的child_process模块，这是代码无法运行的根本原因。
2. Python脚本逻辑混乱，存在重复输出、错误的JSON解析方式，未遵循标准的跨进程通信流程。

解决方案：使用Chrome Native Messaging API #

Chrome扩展要和本地程序通信，必须通过官方的Native Messaging API，以下是完整实现步骤：

1. 编写修正后的Python脚本（test.py） #

import sys
import json

def main():
    try:
        # 读取Chrome Native Messaging的输入（Chrome会发送带固定长度前缀的JSON）
        raw_length = sys.stdin.read(4)
        if not raw_length:
            sys.exit(0)
        message_length = int.from_bytes(raw_length, byteorder='little')
        message = sys.stdin.read(message_length)
        input_data = json.loads(message)

        # 处理数据并生成返回结果
        input_data['data_returned'] = 'Send this to Chrome extension.'
        
        # 发送结果给Chrome（需添加长度前缀）
        output_json = json.dumps(input_data)
        output_length = len(output_json).to_bytes(4, byteorder='little')
        sys.stdout.buffer.write(output_length)
        sys.stdout.write(output_json)
        sys.stdout.flush()
    except Exception as e:
        print(f"Error: {str(e)}", file=sys.stderr)
        sys.stderr.flush()
        sys.exit(1)

if __name__ == "__main__":
    main()

2. 创建Native Messaging配置文件（com.your.syntaxchecker.json） #

替换path为你的Python脚本绝对路径，Windows系统路径需用双反斜杠：

{
  "name": "com.your.syntaxchecker",
  "description": "Syntax Checker Native Messaging Host",
  "path": "/absolute/path/to/your/test.py",
  "type": "stdio",
  "allowed_origins": [
    "chrome-extension://YOUR_EXTENSION_ID/"
  ]
}

• 替换YOUR_EXTENSION_ID为你的Chrome扩展ID（开启开发者模式后在扩展管理页面查看）。
• 配置文件存放路径：
  • Windows：注册表项HKEY_LOCAL_MACHINE\Software\Google\Chrome\NativeMessagingHosts\com.your.syntaxchecker指向的路径
  • macOS：~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.your.syntaxchecker.json
  • Linux：~/.config/google-chrome/NativeMessagingHosts/com.your.syntaxchecker.json

3. Chrome扩展中的JavaScript代码 #

在扩展的背景页或内容脚本中使用Native Messaging API：

// 连接到本地Python程序
const port = chrome.runtime.connectNative('com.your.syntaxchecker');

// 发送数据到Python
const data_to_pass_in = {
    data_sent: 'Send this to python script',
    data_returned: undefined
};
port.postMessage(data_to_pass_in);
console.log('Data sent to python script:', data_to_pass_in);

// 接收Python返回的数据
port.onMessage.addListener((response) => {
    console.log('Data received from python script:', response);
});

// 处理通信错误
port.onDisconnect.addListener(() => {
    if (chrome.runtime.lastError) {
        console.error('Error received from python script:', chrome.runtime.lastError.message);
    }
});

4. 额外注意事项 #

• Linux/macOS下需给Python脚本添加可执行权限：chmod +x test.py。
• Windows下若直接运行py文件，需在脚本开头添加#!python3，或在配置文件的path中指定Python解释器路径，例如"C:\\Python39\\python.exe" "C:\\path\\to\\test.py"。
• 修改配置后需重新加载Chrome扩展，确保设置生效。

原Node.js测试代码的修正（非Chrome扩展场景） #

如果是在Node.js环境测试而非Chrome扩展，原代码的问题：

• Python脚本中两次print会导致输出混乱，需只保留一次正确的JSON输出。
• 用json.loads()替代ast.literal_eval()解析JSON字符串，后者不安全且不兼容标准JSON格式。
• Windows系统调用Python时，需用python3或py替代python，例如spawner('py', ['./test.py', JSON.stringify(data_to_pass_in)])。

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