@(編程)
目錄
本文介紹如何利用Chrome 的插件, 從我們的一個網站中啟動一個我們的本地程序。本文的環境是windows10，本文的例子是通過點擊網頁上的一個button，調用本地的word。
chrome插件的內容
一個chrome插件包括三個文件：manifest.json(名字不可改, 建插件必須文件),background.js(文件名可改, 后台文件),content.js(content script文件 負責與網站頁面交互)
manifest.json
{
"name" : "WisdombudRun",
"version" : "1.0.1",
"description" : "Launch APP ",
"background" : { "scripts": ["background.js"] },
"permissions" : [
"nativeMessaging",
"tabs",
"http://localhost:8000/*"
],
"content_scripts": [
{
"matches": ["http://localhost:8000/*"],
"js": ["content.js"]
}
],
"minimum_chrome_version" : "6.0.0.0",
"manifest_version": 2
}
background.js
var port = null;
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.type == "launch"){
connectToNativeHost(request.message);
}
return true;
});
//onNativeDisconnect
function onDisconnected()
{
console.log(chrome.runtime.lastError);
console.log('disconnected from native app.');
port = null;
}
function onNativeMessage(message) {
console.log('recieved message from native app: ' + JSON.stringify(message));
}
//connect to native host and get the communicatetion port
function connectToNativeHost(msg)
{
var nativeHostName = "com.wisdombud.qingdao";
console.log(nativeHostName);
port = chrome.runtime.connectNative(nativeHostName);
port.onMessage.addListener(onNativeMessage);
port.onDisconnect.addListener(onDisconnected);
port.postMessage({message: msg});
}
content.js
var launch_message;
document.addEventListener('myCustomEvent', function(evt) {
chrome.runtime.sendMessage({type: "launch", message: evt.detail}, function(response) {
console.log(response)
});
}, false);
chrome插件的安裝
- 把上面三個文件放到一個文件夾內，比如c:\chrome_extension。打開chrome，在地址中輸入chrome://extensions/，進入擴展程序管理頁面。
- 選中開發者模式，點擊“加載已解壓的擴展程序”，選擇c:\chrome_extension，則安裝FastRun成功。
創建nativecall.json
{
"name": "com.wisdombud.qingdao",
"description": "Chrome sent message to native app.",
"path": "C:\\Program Files (x86)\\Microsoft Office\\Office12\\WINWORD.EXE",
"type": "stdio",
"allowed_origins": [
"chrome-extension://jcmbkmpakeoglgjfhconhbkoppiichce/"
]
}
把上述文件放到一個目錄下，如c:\native.
配置注冊表
Windows Registry Editor Version 5.00
[HKEY_CURRENT_USER\SOFTWARE\Google\Chrome\NativeMessagingHosts\com.wisdombud.qingdao]
@="C:\\native\\nativecall.json"
把上面的內容另存為一個install.reg文件，雙擊此文件，則在注冊表中添加相關信息。
調用代碼
<html>
<head>
<script>
function startApp() {
alert("haha")
var evt = document.createEvent("CustomEvent");
evt.initCustomEvent('myCustomEvent', true, false, "");
// fire the event
document.dispatchEvent(evt);
}
</script>
</head>
<body>
<button type="button" onClick="startApp()" id="startApp">startApp</button>
</body>
</html>
運行以上程序，點擊這個button，就可以調用winword了。
需要注意的地方
- 本地文件修改nativecall.json文件
- manifest.json中有關於哪些網站可信任的配置，需要配置為實際的內容。
其它
實際上也可以做到向本地應用傳參數，本文沒有實現傳參數。