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

www.MyException.Cn  网友分享于：2014-08-01  浏览：3次
 
Chrome 插件: 启动本地应用 (Native messaging)

最近碰到了一个新问题，需要利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地C#应用，同时给这个应用传值来进行不同的操作。

在这里记录下解决的过程，以便以后查找

首先我们需要新建一个google的插件 这个插件包含了三个文件

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

首先我们来看看manifest.json 这个文件

<span style="font-family:SimSun;font-size:18px;">{

	"name" : "FastRun",

	"version" : "1.0.1",

	"description" : "Launch APP ",

	"background" : { "scripts": ["background.js"] },

	"permissions" : [

		"nativeMessaging",

		"tabs",

		"http://xxx/*"

	],

	"content_scripts": [

    {

      "matches": ["http://xxx/*"],

      "js": ["content.js"]

    }

	],

	"minimum_chrome_version" : "6.0.0.0",

	"manifest_version": 2

}</span>

里面的premissions非常重要, 他表示我们的插件在什么条件运行, "nativeMessaging" 代表要在这个插件中允许调用这种方法

"xxx"填入你想要的载入的网址

"content_scripts" 中"xxx" 表示在什么网页下运行我们与界面交互的script.

再来看看后台文件

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.my_company.my_application";

	console.log(nativeHostName);

 	port = chrome.runtime.connectNative(nativeHostName);

	port.onMessage.addListener(onNativeMessage);

	port.onDisconnect.addListener(onDisconnected);

	port.postMessage({message: msg});

 }

在这个文件里有两个方法非常重要

chrome.runtime.onMessage.addListener

和

connectToNativeHost

先来看第一个方法，

是一个响应事件，当接收到类型为"launch"的消息时, 调用 connectToNativeHost方法并传入数据。

com.my_company.my_application

这个是我们之后需要注册在Regestry和Native Messaging里面的名字 之后会讲到。

runtime.connectNative这个方法连接我们的Native Messaging然后利用 postMessage 去发送我们要的信息给我们的本地应用

当然这里我们可以替换为 sendNativeMessage 直接给本地应用传值详见

https://developer.chrome.com/extensions/runtime#method-connectNative

我们在来看看ContentScript: content.js这个文件

 

<span style="font-family:SimSun;"><span style="font-size:18px;">var launch_message;

document.addEventListener('myCustomEvent', function(evt) {

chrome.runtime.sendMessage({type: "launch", message: evt.detail}, function(response) {

  console.log(response)

});

}, false);</span><strong>

</strong></span>

很简单, 响应了一个页面中的事件"myCustomEvent", 同时发布一个消息给我们的后台文件background.js，这个消息包含了消息标示 "launch" 和 我们要传的值 evt.detail

关于Content Script 的信息 详见 https://developer.chrome.com/extensions/content_scripts

到这里我们的google插件部分就做好了

别忘了在Chrome 插件里开启开发者模式 并加载这个插件

-------------------------------------分割线-------------------------------------

我们在来看看 Native Messaging 部分 我们再建一个 json 文件 我这里也叫做manifest.json(名字可以不是这个) 存在了我本地C:/Native目录下

<span style="font-family:SimSun;font-size:18px;">{

	"name": "com.my_company.my_application",

	"description": "Chrome sent message to native app.",

	"path": "C:\\MyApp.exe",

	"type": "stdio",

	"allowed_origins": [

		"chrome-extension://ohmdeifpmliljjdkaehaojmiafihbbdd/"

	]

}</span>

这里我们定义了 Native Messaging 的名字, 在path中定义了我们要运行的本地应用程序, allowed_origins 中长串的字符是我们插件的id 可以在安装插件后从google chrome 插件里看到(安装插件 可以在chrome中插件开启开发者模式并载入我们之前的插件文件包)

完成这步以后我们需要在WIndows 注册表 中加入google 项目具体如下:

运行-> Regedit -> HKEY_Current_User->Software->Google->Chrome->新建一个叫NativeMessagingHosts的项->新建一个叫com.my_company.my_application的项,  同时在这个项里默认值设置为我们Native Messaging 的 位置 C:\\Native\\manifest.json

这样我们就完成了NativeMessaging的设置

-------------------------------------我是分割线-------------------------------------

我们再来看看这个插件如何和我们的网站交互

先建一个简单的网页内容如下

<span style="font-family:SimSun;font-size:18px;"><!DOCTYPE HTML>

<html>

<head>

<script>

function startApp() {

	var evt = document.createEvent("CustomEvent");

	evt.initCustomEvent('myCustomEvent', true, false, "im information");

	// fire the event

	document.dispatchEvent(evt);

}

</script>

</head>

<body>

<button type="button" onClick="startApp()" id="startApp">startApp</button>

</body>

</html>

</span>

里面有一个简单的按钮， 这个按钮会启动方法, 新建一个名叫"myCustomEvent"的事件, 同时附带有我们要传的信息, 并发布这个事件。 这样我们插件中的Content.js 就可以接收并响应这个事件了!

-------------------------------------我是分割线-------------------------------------

我们最后再来看看C#程序, 随便做一个非常简单的程序, 放到了

C://MyApp.exe这里

在Main里面 我们可以加入下面这个方法, 利用Console.OpenStandardInput这个 我们可以接收到由页面传到我们应用的值并进行我们想要的一些操作, 在这里我们用一个log4net 记录我们程序运行情况

[assembly: log4net.Config.XmlConfigurator(Watch = true)]

namespace MyApp

{

    static class Program

    {

        public static log4net.ILog log = log4net.LogManager.GetLogger(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType);

        [STAThread]

        static void Main(string[] args)

        {

            if (args.Length != 0)

            {

                string chromeMessage = OpenStandardStreamIn();

                log.Info("--------------------My application starts with Chrome Extension message: " + chromeMessage + "---------------------------------");

	        }

	    }

        private static string OpenStandardStreamIn()

        {

            //// We need to read first 4 bytes for length information

            Stream stdin = Console.OpenStandardInput();

            int length = 0;

            byte[] bytes = new byte[4];

            stdin.Read(bytes, 0, 4);

            length = System.BitConverter.ToInt32(bytes, 0);

            string input = "";

            for (int i = 0; i < length; i++)

            {

                input += (char)stdin.ReadByte();

            }

            return input;

        }

    }

}


点击我们在页面上加入的按钮, 然后检查log文件:


2014-07-30 09:23:14,562 [1] INFO  MyApp.Program ----------------------------------------My application starts with Chrome Extension message: {"message":"im information"}---------------------------------


最后一张图总结下整个过程




如果想要在安装我们本地软件时安装这个插件, 我们需要把我们的插件先发布到Chrome web store上详见https://developer.chrome.com/extensions/external_extensions


在这里就不再赘述了




4楼yhdufei昨天 16:10


谢谢大侠，真心的非常感谢，亲自给我调试程序，终于可以了。






3楼qq_18649531昨天 17:49


可以贴一上示例代码吗？非常期待






Re: Nicolas_008昨天 22:57


回复qq_18649531n已经加入了C#部分的测试代码






2楼yhdufei昨天 17:44


这位大侠，我一步一步的照着做，可怎么都启不动那个应用程序。可否加您的QQ，指导兄弟一下呢...我找这个资料找了很久了，好不容易找到您这份详细的介绍。369569334，跪求，重谢！付费亦可!






1楼u011441796昨天 13:53


好厉害的样子。




												


											
Chrome 插件: 起动本地应用 (Native messaging)的更多相关文章
	

    
								
  1. Chrome 小工具: 启动本地应用 (Native messaging)
		
    最近遇到一个新的问题.需要使用Chrome 插件, 从我们对我们当地的一个网站之一启动C#应用,同时通过本申请值执行不同的操作. 在这里记录下解决的过程.以便以后查找 首先我们须要新建一个google ...
    
		
    2. 
						
  2. 开发一个简单的chrome插件-解析本地markdown文件
		
    准备软件环境 1. 软件环境 首先,需要使用到的软件和工具环境如下: 一个最新的chrome浏览器 编辑器vscode 2. 使用的js库 代码高亮库:prismjs https://prismjs. ...
    
		
    3. 
						
  3. 如何通过写一个chrome扩展启动本地程序
		
    @(编程) [toc] 本文介绍如何利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地程序.本文的环境是windows10,本文的例子是通过点击网页上的一个button,调用本地的wor ...
    
		
    4. 
						
  4. Chrome Native Messaging 与本地程序之间的通信
		
    最近项目上出现了web打印不稳定的问题,师父决定web调用本地打印程序,在查阅了相关资料和加了几个相关群咨询后得知新版的chrome不支持NNAPI了,最好用Native Messaging来处理,经 ...
    
		
    5. 
						
  5. Chrome浏览器扩展开发系列之十四：本地消息机制Native messaging
		
    通过将浏览器所在客户端的本地应用注册为Chrome浏览器扩展的“本地消息主机(native messaging host)”,Chrome浏览器扩展还可以与客户端本地应用之间收发消息. 客户端的本地应 ...
    
		
    6. 
						
  6. Google Chrome Native Messaging开发实录（一）背景介绍
		
    最近接手了一个针对Google Chrome的需求,最终是使用Native Messaging来实现的.通过这个连载,将把本次开发从方案选定到编码的全部过程进行完整的回顾,并记录开发过程中踩过的各种坑 ...
    
		
    7. 
						
  7. chrome浏览器插件启动本地应用程序
		
    chrome浏览器插件启动本地应用程序 2014-04-20 00:04:30|  分类: 浏览器插件|举报|字号 订阅     下载LOFTER我的照片书  |     chrome的插件开发这里就 ...
    
		
    8. 
						
  8. Google Chrome Native Messaging开发实录（二）Chrome Extension扩展
		
    接上一篇<Google Chrome Native Messaging开发实录(一)背景介绍>的项目背景,话不多说,有关Chrome Extension介绍和文档就不展开了,直接上代码.  ...
    
		
    9. 
						
  9. Apizza可以进行本地调试，也可以进行跨域调试，但是需要chrome插件
		
    装Apizza Chrome插件   1 1. 进入Apizza官方网站.注册账号,进入控制台,可以看到提示安装chrome插件 2. 进入google app商店,搜索apiano 找到对于插件安装 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 干货-iOS、mac开源项目及库，以后我也会持续更新。
			
    昨晚在网上看的干货,直接分享给大家了,觉得有用的,直接fork吧. https://github.com/Brances/TimLiu-iOS
    
			
    2. 
						
  2. Eclipse下快速打开本地文件的插件easy explore
			
    插件下载地址:http://jianguoyun.com/p/DeNpa8IQx5jkBRjKlAk 放到eclipse的plugin目录下后,eclipse 3.5+可以放到dropins目录下,重 ...
    
			
    3. 
						
  3. Linux开机启动chkconfig命令详解(让MySQL、Apache开机启动)
			
    chkconfig chkconfig在命令行操作时会经常用到.它可以方便地设置和查询不同运行级上的系统服务.这个可要好好掌握,用熟练之后,就可以轻轻松松的管理好你的启动服务了. 注:谨记chkcon ...
    
			
    4. 
						
  4. css中font-family的中文字体
			
    说到css中的font-family,相信很多朋友经常用,但不知道当你遇到引用中文字体的时候你会怎么写?最近特别关注了下,发现最常用的基本有三种类型: 1.直接中文: 2.英文形式: 3.unicod ...
    
			
    5. 
						
  5. Spring-2-J Goblin Wars（SPOJ AMR11J）解题报告及测试数据
			
    Goblin Wars Time Limit:432MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Description Th ...
    
			
    6. 
						
  6. 为什么Erlang比C慢那么多倍？
			
    Erlang 一直以慢“著称”,本文就来看看 Erlang 慢在什么地方,为什么比实现同样功能的 C 语言程序慢那么多倍.Erlang 作为一种虚拟机解释的语言,慢是当然的.不过本文从细节上分析为什么 ...
    
			
    7. 
						
  7. JS中的bind方法学习
			
    EcmaScript5给Function扩展了一个方法:bind 众所周知 在jQuery和prototype.js之类的框架里都有个bind jQuery里的用途是给元素绑定事件 $("# ...
    
			
    8. 
						
  8. 【SQL查询】集合查询之INTERSECT
			
    [SQL查询]集合查询之INTERSECT 1  BLOG文档结构图 2  前言部分 2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知识,~ ...
    
			
    9. 
						
  9. JavaScript字符串函数大全
			
    JS自带函数concat将两个或多个字符的文本组合起来,返回一个新的字符串.var a = "hello";var b = ",world";var c = a ...
    
			
    10. 
						
  10. 《SQL Server企业级平台管理实践》读书笔记——SQL Server中收缩数据库不好用的原因
			
    数据库管理员有时候需要控制文件的大小,可能选择收缩文件,或者把某些数据文件情况以便从数据库里删除. 这时候我们就要使用到DBCC SHRINKFILE命令,此命令的脚本为: DBCC SHRINKFI ...
    
			
    11.