接上一篇《Google Chrome Native Messaging开发实录（一）背景介绍》的项目背景，话不多说，有关Chrome Extension介绍和文档就不展开了，直接上代码。
首先准备一个测试效果的页面demo.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Printer Demo</title>
</head>
<html>
<body>
<input id="cardno" type="text" />
<input id="mybutton" type="button" value="打卡" />
</body>
</html>
chrome extension部分，manifest.json
{
"name": "My Printer",
"version": "1.0.0",
"manifest_version": 2,
"content_scripts": [
{
"matches": ["http://localhost:5103/*"],
"js": ["contentscript.js"]
}
],
"background": {
"scripts": ["background.js"]
},
"permissions": [
"nativeMessaging"
]
}
contentscript.js
var button = document.getElementById("mybutton");
var cardno = document.getElementById("cardno");
button.addEventListener("click", function () {
chrome.extension.sendMessage("some message", function (response) {
//alert(response);
});
}, false);
chrome.runtime.onMessage.addListener(function (data) {
alert(data.cardno);
cardno.value = data.cardno;
});
background.js
var host_name = "com.my.printer";
var port = null;
var tab = null; function connectToNative() {
console.log('Connecting to native host: ' + host_name);
port = chrome.runtime.connectNative(host_name);
port.onMessage.addListener(onNativeMessage);
port.onDisconnect.addListener(onDisconnected);
} function sendNativeMessage(msg) {
message = { "text": msg };
console.log('Sending message to native app: ' + JSON.stringify(message));
port.postMessage(message);
console.log('Sent message to native app: ' + msg);
} function onNativeMessage(message) {
console.log('recieved message from native app: ' + JSON.stringify(message));
chrome.tabs.sendMessage(tab, message);
} function onDisconnected() {
//console.log(chrome.runtime.lastError);
console.log('disconnected from native app.');
port = null;
res = null;
} chrome.extension.onMessage.addListener(function (data, sender, response) {
tab = sender.tab.id;
connectToNative();
sendNativeMessage(data);
return true;
});
针对代码细节，提请大家必须要注意的有：
1.native messaging相关api在chrome.runtime包中，只能在background中调用（可以是html或script）。
2.content script虽然不能直接调用native messaging api，但需要它起到中转消息改变页面元素的作用。chrome.extension.sendRequest方法已过期，它向background传递消息使用chrome.runtime.sendMessage替代。
3.在background中监听来自tab的消息chrome.extension.onRequest在官方文档中建议是用chrome.runtime.onMessage替代，但其实可以用chrome.extension.onMessage的，截止到写本文时官方的chrome extension api列表中并没有给出这样的写法，不要怀疑它的可用性。