一、概述

如果想要通过本地exe程序与chrome插件之间的通信，我们需要利用到NativeMessage。

具体环境与实现步骤见下文。

二、环境

1. window10操作系统

2. chrome浏览器

3. pycharm

三、实现步骤

1. 自己编写一个chrome插件

chrome插件的开发详细步骤与文件结构可参考Chrome扩展开发之一——Chrome扩展的文件结构 - 冰糖雪梨不加水 - 博客园 (cnblogs.com)https://www.cnblogs.com/ligerleng/p/gmail_assist_1.html 这里我们需要用到background、content_scripts与manifest.json文件，并使用Test.html进行测试。文件代码如下。

（1）manifest.json中的代码

{ "name" : "FastRun",  //插件名字"version" : "1.0.1",  //插件版本号"description" : "Launch APP ",   //对插件的描述"background" : {    //background的具体引用"scripts": ["background.js"] //这里引用js文件background.js}, "content_scripts": [  //content_scripts的具体引用{ //mathes指明哪些网站可以使用content.js "matches": [ "http://*/*", "https://*/*", "ftp://*/*", "file://*/*" ], "js": ["content.js"]  //这里引用js文件content.js}  ],  //permissons是插件的权限，如果要使用nativeMessage就必须在其中加入nativeMessaging"permissions" : ["nativeMessaging", "tabs"],  "minimum_chrome_version" : "6.0.0.0",  "manifest_version": 2  
}

(2) content.js中的代码

var launch_message;
for (let i = 1; i <= 4; i++) {
//监听，只有监听到来自页面的"myCustomEvent1""myCustomEvent2""myCustomEvent3"...事件才触发document.addEventListener('myCustomEvent' + i, function (evt) {//向background.js发送信息chrome.runtime.sendMessage({type: "用户点击了按钮",message: evt.detail}, function (response) {});}, false);
}
//接收来自background.js的消息
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {const message = document.querySelector('.message'); //获取messageconst newH3 = document.createElement('h3'); //创建一个h3标签newH3.innerHTML = request; //h3标签的内容为background.js发的消息message.appendChild(newH3) //把创建的h3标签添加到message中return true;});

（3）background.js中的代码

var port = null;
//监听来自content.js的信息
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {//request就是content.js发送过来的消息if (request.type == "用户点击了按钮") {connectToNativeHost(request.message);}return true;});//断开连接时触发
function onDisconnected() {console.log(chrome.runtime.lastError);port = null;
}//接收到来自exe程序的消息时触发
async function onNativeMessage(message) {console.log('接收到从本地应用程序发送来的消息：' + JSON.stringify(message));const tabId = await getCurrentTabId()chrome.tabs.sendMessage(tabId, JSON.stringify(message), function (response) {});
}//得到当前tabId
function getCurrentTabId() {return new Promise((resolve, reject) => {chrome.tabs.query({active: true,currentWindow: true}, function (tabs) {resolve(tabs.length ? tabs[0].id : null)});})
}//连接到本地主机并获得通信端口
function connectToNativeHost(msg) {var nativeHostName = "com.my_company.my_application"; //本地主机名（就是在注册表中的名字）port = chrome.runtime.connectNative(nativeHostName); //根据本地主机名得到通信端口port.onMessage.addListener(onNativeMessage); //监听exe程序是否发来消息port.onDisconnect.addListener(onDisconnected); //监听是否断开连接port.postMessage(msg) //向应用程序发送信息
}

(4) Test.html中的代码

<html>
<style>.message {width: 500px;height: 500px;background-color: pink;}h3 {background-color: red;}
</style><head><script>function startApp(i) {//创建CustomEvent事件var eventName = "myCustomEvent" + i;var evt = document.createEvent("CustomEvent");evt.initCustomEvent(eventName, true, false, "用户点击了按钮" + i);//执行自定义事件document.dispatchEvent(evt);}</script>
</head><body><button type="button" onClick="startApp(1)" id="startApp">按钮1</button><button type="button" onClick="startApp(2)" id="startApp">按钮2</button><button type="button" onClick="startApp(3)" id="startApp">按钮3</button><button type="button" onClick="startApp(4)" id="startApp">按钮4</button><div class="message"><h1 class="jieshou">接收到的消息：</h1></div>
</body></html>

2.把自己写的chrome插件安装到chrome浏览器中

（1）把上述创建的4个文件放在同一个文件夹中，命名任意

（2）在chrome浏览器地址栏输入：chrome://extensions 进入插件管理页面

（3）打开右上角《开发者模式》

（4）点击左上角《加载已解压的扩展程序》，选择4个文件所在的文件夹并添加

（5）就可以看到插件已经被安装到chrome浏览器当中，如下图（每个插件都会自动生成一个独一无二的ID值，我们需要保存自己编写插件的ID值，下面需要用到，记得保存！！！）

3. 创建Test.py并写入代码

打开pycharm，创建Test.py文件，其中代码如下：（没有相应包的话需要先导入相应的包）

import json
import sys
import struct
# 读取来自 stdin 的消息并对其进行解码
def get_message():raw_length = sys.stdin.buffer.read(4)if not raw_length:sys.exit(0)message_length = struct.unpack('=I', raw_length)[0]message = sys.stdin.buffer.read(message_length).decode("utf-8")return json.loads(message)# 根据信息的内容对信息进行编码以便传输。
def encode_message(message_content):encoded_content = json.dumps(message_content).encode("utf-8")encoded_length = struct.pack('=I', len(encoded_content))#  use struct.pack("10s", bytes), to pack a string of the length of 10 charactersreturn {'length': encoded_length, 'content': struct.pack(str(len(encoded_content))+"s",encoded_content)}# 向标准输出发送编码好的消息
def send_message(encoded_message):sys.stdout.buffer.write(encoded_message['length'])sys.stdout.buffer.write(encoded_message['content'])sys.stdout.buffer.flush()# 持续监听chrome插件发来的消息
while True:message = get_message() # 得到来自chrome插件的消息if(message=="用户点击了按钮1"): # 根据消息的不同内容，exe程序向chrome插件发送不同的字符串send_message(encode_message("来自exe程序的消息：按钮1被点击"))elif(message=="用户点击了按钮2"):send_message(encode_message("来自exe程序的消息：按钮2被点击"))elif(message=="用户点击了按钮3"):send_message(encode_message("来自exe程序的消息：按钮3被点击"))elif(message=="用户点击了按钮4"):send_message((encode_message("来自exe程序的消息：按钮4被点击")))

4.把Test.py打包成exe程序

在pycharm终端中输入： pyinstaller -F Test.py （如果没有pyinstaller包的需要先导包）

然后打包好的exe程序就在Test.py所在文件夹下的dist文件夹中，文件名为Test.exe

5.将Test.exe程序写入注册表

（1）首先需要创建一个文件，名为manifest.json（此文件不同于上面创建的manifest.json文件，只是名字一样 , 不要忘记把allowed_origins下的字符串替换成自己所写插件的ID值！！！），其中代码为：

{"name": "com.my_company.my_application",  //此名就是hostName，即主机名"description": "Chrome sent message to native app.", //对json文件的描述"path": "Test.exe",  //相对路径，打包好的Test.exe相对于本manifest文件的相对路径"type": "stdio",     //必填项，意为通过标准输入输出流进行通信"allowed_origins": ["chrome-extension://jckgmlnngpemfhapkfdapedimdpimlmd/" //中间的字符串是我们编写的插件的ID值，需要自己替换]
}

（2）按住 win+r 键打开运行windows命令窗口，输入 regedit 进入注册表编辑器，找到HKEY_CURRENT_USER\SOFTWARE\Google\Chrome\NativeMessagingHosts 目录，右键单击NativeMessagingHosts，选择新建，选择项，新建一个名为 com.my_company.my_application 的项（该名就是主机名，名字应与上面那个manifest.json的name值相同），然后选中该新建的项，双击右侧默认，修改数值数据为第二次创建的manifest.json文件在本机的绝对路径，具体操作步骤见下图