如何通过写一个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>
运行以上程序，点击这个button，就可以调用winword了。
需要注意的地方
- 本地文件修改nativecall.json文件
- manifest.json中有关于哪些网站可信任的配置，需要配置为实际的内容。
其它
实际上也可以做到向本地应用传参数，本文没有实现传参数。
参考
Chrome 插件: 启动本地应用 (Native messaging)
如何通过写一个chrome扩展启动本地程序的更多相关文章
- 实现chrome扩展启动本地进程 - 补充
实现chrome扩展启动本地进程 - 补充 标签: chrome扩展启动本地程序访问本地磁盘 2014-10-17 11:42 6753人阅读 评论(17) 收藏 举报 分类: Chrome Plu ...
- 自己写一个chrome扩展程序 - 右键菜单扩展
最近在学习Spring,心想dotnet如何实现类似形式呢.于是想认真学习Casetle组件,发现没有书籍!而spring的书多得很.于是只好找网上教程了.发现系统的文章不多.Terrylee好多文章 ...
- 跟我一起写一个chrome扩展程序
在我没有看这本书之前,我都想象不到,原来chrome扩展程序可以这样写,真的非常有意思. 就是用最简单最基础的代码,然后就实现了一些非常有意思的玩意儿. 先看效果图 实际运用要和现实联系在一起,经历和 ...
- 一起来做chrome扩展《本地存储localStorage》
chrome中的本地存储其实也是用的HTML5中localStorage,唯一区别是chrome扩展有自己的localStorage,它属于这个扩展,而不属于一个域名.得用这一点可以很好的处理扩展自己 ...
- 我的第一个chrome扩展（1）——读样例，实现时钟
学习chrome扩展开发: 与网页类似,需要的知识:html,javascript chrome扩展程序的构成: manifest.json:对扩展程序的整体描述文件 { "manifest ...
- 给IConfiguration写一个GetAppSetting扩展方法
给 IConfiguration 写一个 GetAppSetting 扩展方法 Intro 在 .net core 中,微软已经默认使用 appsettings.json 来代替 app.config ...
- 如何用原生js开发一个Chrome扩展程序
原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成 ...
- 教你如何写一个 Yii2 扩展
前言 把一系列相关联的功能使用模块开发,好处多多,维护起来很方便,模块还可以单独发布出去,让下一个项目之间使用,真是方便. 下面我就写一个开发扩展的简单教程. Gii gii 自带帮助我们生成一个基本 ...
- Windows和Mac浏览器启动本地程序
前言 这几天有个需求,需要在IE上启动本地程序,就如下面一样. 一开始,我还以为IE有提供特殊的接口,类似上图中的“RunExe”,可以找了大半天觉得不对经(找不到该方法). 后来想想不对,这种方式是 ...
随机推荐
- 【笨嘴拙舌WINDOWS】实践检验之GDI缩放
SetMapmode(dc,MM_Text); //先继承MM_TEXT的属性 SetMapMode(dc,MM_ANISOTROPIC); SetWindowExtEx(dc,rect.Right, ...
- Caused by: 元素类型为 "package" 的内容必须匹配 "(result-types?,interceptors?,default-interceptor-ref?,default-action-ref?,default-class-ref?,global-results?,global-exception-mappings?,action*)"
Caused by: 元素类型为 "package" 的内容必须匹配 "(result-types?,interceptors?,default-interceptor- ...
- Kafka的Producer和Consumer源码学习
先解释下两个概念: high watermark (HW) 它表示已经被commited的最后一个message offset(所谓commited, 应该是ISR中所有replica都已写入),HW ...
- HDU 3127 WHUgirls【二维完全背包】
题意:给出一个长为a,宽为b的布,再给出n个围巾的规格(长x,宽y,价值c),问怎样裁剪能够得到最大的价值. ----第一次做的时候不会---然后放到今天做--发现还是不会---于是又--看题解了-- ...
- POJ 3211 Washing Clothes【01背包】
题意:给出n种颜色,m件衣服,再分别给出m件衣服的颜色,和洗所需要的时间,dearboy和他的妹子一起洗衣服,且同种颜色的衣服不能同时洗,也不能两个人同时洗一件衣服,问洗完这m件衣服至少需要的时间 先 ...
- mysql，多对多的hibernate操作对应的jdbc操作
在hibernate中oo思想操作数据库,很方便,但是需要了解一下底层的jdbcsql是怎么写的,复习 多对多的表关系,取出,id为1的学生 订阅了哪些课程? mysql> select c_n ...
- 中文分词系列（一） 双数组Tire树(DART)详解
1 双数组Tire树简介 双数组Tire树是Tire树的升级版,Tire取自英文Retrieval中的一部分,即检索树,又称作字典树或者键树.下面简单介绍一下Tire树. 1.1 Tire树 Trie ...
- 基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境：2.搭建环境-2.3配置共享磁盘
2.3.配置共享磁盘 2.3.1.创建共享磁盘 在cmd中进入WMware Workstation 10.0 安装目录: 1.创建存储Oracle Clusterware文件 (Oracle Clu ...
- ETL工具的评价
评价项目 评价结果 备注 支持平台 SUN Solaris.HP-UX.IBM AIX.AS/400.OS/390.Sco UNIX.Linux.Windows 支持数据源 DB2.Informix ...
- Safari里使用JsonView
这是第三方开发的一个Safari的jsonView,和chrome以及FF功能类似,现在已经更新到1.1版了. 传送门:https://github.com/rfletcher/safari-json ...