本文介绍了如何使用Chrome的Native Messaging API实现浏览器扩展与本地应用程序之间的通信。内容包括扩展部分的开发实例，详细阐述了注册本机消息传递主机的清单文件配置，以及在Debian系统上创建本地应用程序和浏览器扩展的步骤。通过示例展示了消息交互过程，强调了在实际应用中可能需要根据需求进行调整。
扩展和应用程序可以使用与其他消息传递API类似的API与本机应用程序交换消息。支持此功能的本机应用程序必须注册知道如何与扩展通信的本机消息传递主机。Chrome在一个单独的进程中启动主机，并使用标准输入和标准输出流与主机通信。
Native Message的通信分为两个部分：1. 扩展部分。2.本地应用部分。
一、扩展部分开发实例
为了注册本机消息传递主机，应用程序必须安装定义本机消息传递主机配置的清单文件，配置清单的目录根据不同的浏览器位置不一样，不同的操作系统也不一样，红色的字体表示配置文件的名字，注意该名字一定要与配置中的name字段的内容一致。如下表：
| Google Chrome | Chromium | |
|---|---|---|
| Linux系统应用 | /etc/opt/chrome/native-messaging-hosts/ com.my_company.my_application.json | /etc/chromium/native-messaging-hosts/ com.my_company.my_application.json |
| Linux用户应用 | ~/.config/google-chrome/NativeMessagingHosts/ com.my_company.my_application.json | ~/.config/chromium/NativeMessagingHosts/ com.my_company.my_application.json |
| OS X系统应用 | /Library/Google/Chrome/NativeMessagingHosts/ com.my_company.my_application.json | /Library/Application Support/Chromium/ NativeMessagingHosts/ com.my_company.my_application.json |
| OS X用户应用 | ~/Library/Application Support/Google/Chrome/NativeMessagingHosts/ com.my_company.my_application.json | ~/Library/Application Support/Chromium/NativeMessagingHosts/ com.my_company.my_application.json |
下面是清单文件的示例：
{
"name": "com.my_company.my_application",
"description": "My Application",
"path": "C:\\Program Files\\My Application\\chrome_native_messaging_host.exe",
"type": "stdio",
"allowed_origins": [
"chrome-extension://knldjmfmopnpolahpmmgbagdohdnhkik/"
]
}| Name | Description |
| name | 本机消息传递主机的名称。客户端将此字符串传递给runtime.connectNative或runtime.sendNativeMessage。此名称只能包含小写字母数字字符、下划线和点。名称不能以点开头或结尾，一个点后面不能跟另一个点。 |
| description | 简单描述 |
| path | 本机消息传递主机二进制文件的路径。在Linux和OSX上，路径必须是绝对路径。在Windows上，它可以相对于清单文件所在的目录。启动主机进程时，将当前目录设置为包含主机二进制文件的目录。例如，如果此参数设置为C:\Application\nm\u host.exe，则它将使用当前目录C:\Application\启动。 |
| type | 用于与本机消息传递主机通信的接口类型。当前此参数只有一个可能的值：stdio。这表明Chrome应该使用stdin和stdout与主机通信。 |
| allowed_origins | 应该可以访问本机消息传递主机的扩展的列表。不允许使用诸如chrome扩展名：//*/*之类的通配符。 |
当您想要创建一个使用原生消息协议与Chromium浏览器进行通信的本地应用程序时，您需要编写两部分代码：本地应用程序和浏览器扩展（或应用程序）。
以下是一个简单的示例，演示了如何在Debian系统上创建一个使用原生消息协议与Chromium浏览器通信的本地应用程序：
1. 本地应用程序（Debian系统）：
#include <iostream>
#include <string>
int main() {
// 读取浏览器发送的消息
std::string input;
std::getline(std::cin, input);
// 在控制台打印接收到的消息
std::cout << "Received message from browser: " << input << std::endl;
// 发送响应消息给浏览器
std::string response = "Hello from native app!";
std::cout << response << std::endl;
return 0;
}2. 浏览器扩展（Chromium浏览器）：
创建一个名为`manifest.json`的文件，并将以下内容复制到其中：
{
"manifest_version": 2,
"name": "Native Message Example",
"version": "1.0",
"permissions": [
"nativeMessaging"
],
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_popup": "popup.html"
}
}创建一个名为`background.js`的文件，并将以下内容复制到其中：
// 与本地应用程序建立连接
var port = chrome.runtime.connectNative('com.example.nativeapp');
// 向本地应用程序发送消息
port.postMessage({ message: 'Hello from browser!' });
// 监听来自本地应用程序的消息
port.onMessage.addListener(function (response) {
console.log('Received message from native app: ' + response.message);
});
// 在浏览器点击图标时显示弹出窗口
chrome.browserAction.onClicked.addListener(function () {
chrome.windows.create({
url: 'popup.html',
type: 'popup',
width: 300,
height: 200
});
});创建一个名为`popup.html`的文件，并将以下内容复制到其中：
<!DOCTYPE html>
<html>
<head>
<title>Native Message Example</title>
</head>
<body>
<h1>Native Message Example</h1>
<button id="sendButton">Send Message</button>
<script src="popup.js"></script>
</body>
</html>创建一个名为popup.js的文件，并将以下内容复制到其中：
document.getElementById('sendButton').addEventListener('click', function () {
// 与本地应用程序建立连接
var port = chrome.runtime.connectNative('com.example.nativeapp');
// 向本地应用程序发送消息
port.postMessage({ message: 'Message from popup!' });
// 监听来自本地应用程序的消息
port.onMessage.addListener(function (response) {
console.log('Received message from native app: ' + response.message);
});
});
请注意，上述示例中的本地应用程序名称为com.example.nativeapp。您可以将其替换为您自己的应用程序名称，并确保在本地应用程序和浏览器扩展中使用相同的名称。
完成上述步骤后，您可以使用以下步骤进行测试：
- 将本地应用程序代码编译为可执行文件（例如，命名为
native_app）。 - 将浏览器扩展文件（
manifest.json，background.js，popup.html，popup.js）打包为一个文件夹（例如，命名为native_extension）。 - 将浏览器扩展文件夹加载到Chromium浏览器中（通过扩展管理器）。
- 运行本地应用程序（
./native_app）。 - 在Chromium浏览器中，单击浏览器图标或弹出窗口中的按钮，将向本地应用程序发送消息。
- 查看本地应用程序的控制台输出和浏览器扩展的开发者工具控制台输出，以查看消息的交互。
请注意，此示例仅演示了原生消息协议的基本用法。在实际应用中，您可能需要根据自己的需求进行适当的修改和扩展。
扫一扫
3031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
