HTML 谷歌拉起本地exe,并传递数据,写一个Demo
时间: 2024-03-09 22:49:04 浏览: 18
以下是一个简单的Demo,演示如何在HTML中通过谷歌浏览器拉起本地exe程序,并传递数据:
1. 首先,我们需要编写一个本地exe程序,用于接收来自Web应用程序的数据并处理。在本地创建一个名为test.exe的空白exe文件。
2. 在Chrome浏览器中注册Native Messaging主机。创建一个名为com.example.nativeMessaging的文件夹,将test.exe文件放入其中,并在该文件夹中创建一个名为manifest.json的文件。将以下内容复制到manifest.json文件中:
```
{
"name": "com.example.nativeMessaging",
"description": "Native messaging host for Chrome",
"path": "test.exe",
"type": "stdio",
"allowed_origins": [
"chrome-extension://[你的扩展程序ID]/"
]
}
```
将上面的[你的扩展程序ID]替换为你的扩展程序在Chrome浏览器中的ID。这个文件指定了Native Messaging主机的名称、描述、本地exe程序的路径,以及允许哪些扩展程序与其通信。
3. 在HTML文件中添加一个按钮和一个文本框,用于向本地exe程序发送消息和显示处理结果。将以下代码复制到HTML文件中:
```
<button id="sendBtn">发送消息</button>
<input type="text" id="messageInput" placeholder="请输入要发送的消息">
<div id="resultDiv"></div>
```
4. 在JavaScript文件中实现使用Native Messaging API来发送消息到本地exe程序,并获取处理结果。将以下代码添加到JavaScript文件中:
```
// 与Native Messaging主机建立连接
var port = chrome.runtime.connectNative('com.example.nativeMessaging');
// 当接收到来自本地exe程序的消息时,将其显示在结果文本框中
port.onMessage.addListener(function(msg) {
document.getElementById('resultDiv').innerHTML = msg.text;
});
// 当连接出现错误时,将其显示在结果文本框中
port.onDisconnect.addListener(function() {
document.getElementById('resultDiv').innerHTML = '连接错误';
});
// 当点击发送按钮时,向本地exe程序发送消息,并显示处理结果
document.getElementById('sendBtn').addEventListener('click', function() {
var message = document.getElementById('messageInput').value;
port.postMessage({ text: message });
});
```
这些代码使用chrome.runtime.connectNative()方法与Native Messaging主机建立连接,使用port.onMessage.addListener()方法监听来自本地exe程序的消息,使用port.postMessage()方法向本地exe程序发送消息,并使用port.onDisconnect.addListener()方法监听连接错误。
5. 将HTML文件和JavaScript文件打包成一个Chrome扩展程序,并在Chrome浏览器中安装该扩展程序。你可以将这些文件打包成一个名为NativeMessagingDemo.zip的压缩文件,然后在Chrome浏览器的扩展程序页面中,选择“加载已解压的扩展程序”,并选择解压后的文件夹。
6. 点击HTML页面中的“发送消息”按钮,输入要发送的消息,并等待处理结果。本地exe程序将在接收到消息后,将消息原样返回给Web应用程序,并在结果文本框中显示处理结果。
这就是一个简单的Demo,演示了如何在HTML中通过谷歌浏览器拉起本地exe程序,并传递数据。