如何通过写一个chrome扩展启动本地程序

时间：2021-02-05 16:20:42

@(编程)

本文介绍如何利用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插件的安装

  1. 把上面三个文件放到一个文件夹内，比如c:\chrome_extension。打开chrome，在地址中输入chrome://extensions/，进入扩展程序管理页面。
  2. 选中开发者模式，点击“加载已解压的扩展程序”，选择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了。

需要注意的地方

  1. 本地文件修改nativecall.json文件
  2. manifest.json中有关于哪些网站可信任的配置，需要配置为实际的内容。

其它

实际上也可以做到向本地应用传参数，本文没有实现传参数。

参考

Chrome 插件: 启动本地应用 (Native messaging)

相关文章