如何通过写一个chrome扩展启动本地程序-优快云博客

@(编程)

本文介绍如何利用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>