@(编程)

本文介绍如何利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地程序。本文的环境是windows10，本文的例子是通过点击网页上的一个button，调用本地的word。

chrome插件的内容

一个chrome插件包括三个文件：manifest.json(名字不可改, 建插件必须文件),background.js(文件名可改, 后台文件),content.js(content script文件 负责与网站页面交互)

manifest.json
  1. {
  2. 	"name" : "WisdombudRun",
  3. 	"version" : "1.0.1",
  4. 	"description" : "Launch APP ",
  5. 	"background" : { "scripts": ["background.js"] },
  7. 	"permissions" : [
  8. 		"nativeMessaging",
  9. 		"tabs",
  10. 		"http://localhost:8000/*"
  11. 	],
  12. 	"content_scripts": [
  13.     {
  14.       "matches": ["http://localhost:8000/*"],
  15.       "js": ["content.js"]
  16.     }
  17. 	],
  18. 	"minimum_chrome_version" : "6.0.0.0",
  19. 	"manifest_version": 2
  20. }
background.js
  1. var port = null;
  2. chrome.runtime.onMessage.addListener(
  3.   function(request, sender, sendResponse) {
  4.      if (request.type == "launch"){
  5.        	connectToNativeHost(request.message);
  6.     }
  7. 	return true;
  8. });
  10. //onNativeDisconnect
  11. function onDisconnected()
  12. {
  13. 	console.log(chrome.runtime.lastError);
  14. 	console.log('disconnected from native app.');
  15. 	port = null;
  16. }
  18. function onNativeMessage(message) {
  19. 	console.log('recieved message from native app: ' + JSON.stringify(message));
  20. }
  22. //connect to native host and get the communicatetion port
  23. function connectToNativeHost(msg)
  24. {
  25. 	var nativeHostName = "com.wisdombud.qingdao";
  26. 	console.log(nativeHostName);
  27.  	port = chrome.runtime.connectNative(nativeHostName);
  28. 	port.onMessage.addListener(onNativeMessage);
  29. 	port.onDisconnect.addListener(onDisconnected);
  30. 	port.postMessage({message: msg});
  31.  }
content.js
  1. var launch_message;
  2. document.addEventListener('myCustomEvent', function(evt) {
  3. chrome.runtime.sendMessage({type: "launch", message: evt.detail}, function(response) {
  4.   console.log(response)
  5. });
  6. }, false);

chrome插件的安装

  1. 把上面三个文件放到一个文件夹内，比如c:\chrome_extension。打开chrome，在地址中输入chrome://extensions/，进入扩展程序管理页面。
  2. 选中开发者模式，点击“加载已解压的扩展程序”，选择c:\chrome_extension，则安装FastRun成功。

创建nativecall.json

  1. {
  2. 	"name": "com.wisdombud.qingdao",
  3. 	"description": "Chrome sent message to native app.",
  4. 	"path": "C:\\Program Files (x86)\\Microsoft Office\\Office12\\WINWORD.EXE",
  5. 	"type": "stdio",
  6. 	"allowed_origins": [
  7. 		"chrome-extension://jcmbkmpakeoglgjfhconhbkoppiichce/"
  8. 	]
  9. }

把上述文件放到一个目录下，如c:\native.

配置注册表

  1. Windows Registry Editor Version 5.00
  3. [HKEY_CURRENT_USER\SOFTWARE\Google\Chrome\NativeMessagingHosts\com.wisdombud.qingdao]
  4. @="C:\\native\\nativecall.json"

把上面的内容另存为一个install.reg文件，双击此文件，则在注册表中添加相关信息。

调用代码

  1. <html>
  2. <head>
  3. <script>
  4. function startApp() {
  5. 	alert("haha")
  6. 	var evt = document.createEvent("CustomEvent");
  7. 	evt.initCustomEvent('myCustomEvent', true, false, "");
  8. 	// fire the event
  9. 	document.dispatchEvent(evt);
  10. }
  12. </script>
  13. </head>
  14. <body>
  16. <button type="button" onClick="startApp()" id="startApp">startApp</button>
  17. </body>
  18. </html>

运行以上程序，点击这个button，就可以调用winword了。

需要注意的地方

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

其它

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

参考

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

如何通过写一个chrome扩展启动本地程序的更多相关文章

  1. 实现chrome扩展启动本地进程 - 补充

    实现chrome扩展启动本地进程 - 补充 标签: chrome扩展启动本地程序访问本地磁盘 2014-10-17 11:42 6753人阅读 评论(17) 收藏 举报  分类: Chrome Plu ...

  2. 自己写一个chrome扩展程序 - 右键菜单扩展

    最近在学习Spring,心想dotnet如何实现类似形式呢.于是想认真学习Casetle组件,发现没有书籍!而spring的书多得很.于是只好找网上教程了.发现系统的文章不多.Terrylee好多文章 ...

  3. 跟我一起写一个chrome扩展程序

    在我没有看这本书之前,我都想象不到,原来chrome扩展程序可以这样写,真的非常有意思. 就是用最简单最基础的代码,然后就实现了一些非常有意思的玩意儿. 先看效果图 实际运用要和现实联系在一起,经历和 ...

  4. 一起来做chrome扩展《本地存储localStorage》

    chrome中的本地存储其实也是用的HTML5中localStorage,唯一区别是chrome扩展有自己的localStorage,它属于这个扩展,而不属于一个域名.得用这一点可以很好的处理扩展自己 ...

  5. 我的第一个chrome扩展（1）——读样例，实现时钟

    学习chrome扩展开发: 与网页类似,需要的知识:html,javascript chrome扩展程序的构成: manifest.json:对扩展程序的整体描述文件 { "manifest ...

  6. 给IConfiguration写一个GetAppSetting扩展方法

    给 IConfiguration 写一个 GetAppSetting 扩展方法 Intro 在 .net core 中,微软已经默认使用 appsettings.json 来代替 app.config ...

  7. 如何用原生js开发一个Chrome扩展程序

    原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成 ...

  8. 教你如何写一个 Yii2 扩展

    前言 把一系列相关联的功能使用模块开发,好处多多,维护起来很方便,模块还可以单独发布出去,让下一个项目之间使用,真是方便. 下面我就写一个开发扩展的简单教程. Gii gii 自带帮助我们生成一个基本 ...

  9. Windows和Mac浏览器启动本地程序

    前言 这几天有个需求,需要在IE上启动本地程序,就如下面一样. 一开始,我还以为IE有提供特殊的接口,类似上图中的“RunExe”,可以找了大半天觉得不对经(找不到该方法). 后来想想不对,这种方式是 ...

随机推荐

  1. 使用Jenkins构建持续集成环境

    简介 Jenkins是一个开源的持续集成工具,提供了数百种插件供用户选择,能够完成整套持续集成环境的构建. 它具有如下的特点: 持续集成和持续发布 作为可扩展的自动服务器,Jenkins可以作为简单的 ...

  2. C#操作office进行Excel图表创建，保存本地，word获取

    ,新建C#控制台应用程序(Excel创建图表) using System; using System.Collections.Generic; using System.Linq; using Sys ...

  3. HDU 1422 重温世界杯

    题目中说只需按照所给顺序,不论起点,输出能连续旅游的最多的城市 就是不论起点这句,我就卡住了.. 看了别人的题解,循环个2n-1次便是把所有的起点都考虑进去了. 更详细的解释在代码的注释里. //#d ...

  4. 约束优化方法之拉格朗日乘子法与KKT条件

    引言 本篇文章将详解带有约束条件的最优化问题,约束条件分为等式约束与不等式约束,对于等式约束的优化问题,可以直接应用拉格朗日乘子法去求取最优值:对于含有不等式约束的优化问题,可以转化为在满足 KKT ...

  5. UVa10603 Fill

    解题思路:这是神奇的一题,一定要好好体会.见代码: #include<cstdio> #include<cstring> #include<algorithm> # ...

  6. 【英语】Bingo口语笔记(29) - Run系列

  7. jQuery.validate API

  8. Wiki知识介绍

    Wiki简介 Wiki一词来源于夏威夷语的“wee kee wee kee”,原本是“快点快点”的意思,被译为“维基”或“维客”.一种多人协作的写作工具.Wiki站点可以有多人(甚至任何访问者)维护, ...

  9. CleanMyMac2清理 lanchpad里面的图标没了

    好吧.用CleanMyMac2 清理了系统(10.9)之后图标没了.解决办法是: Launchpad存储在一个SQLite数据库中,存储目录是: ~/Library/Application Suppo ...

  10. zz github配置

    First : 安装:ubuntu 下,终端输入命令: sudo apt-get install git-core git-gui git-doc Next : 设置SSH Key 检查是否已经有SS ...