最近项目上出现了web打印不稳定的问题,师父决定web调用本地打印程序,在查阅了相关资料和加了几个相关群咨询后得知新版的chrome不支持NNAPI了,最好用Native Messaging来处理,经过一段时间的学习和试错,终于完成了,所以把步骤与总结发出来。过程参考http://blog.csdn.net/talking12391239/article/details/38498557

首先,我们需要写一个chrome插件。学习相关知识可以去Chrome扩展及应用开发》。这个插件包含了三个文件:manifest.json(这个是插件配置信息文件),background.js(文件名可改, 后台文件),content.js(与页面交互,传递消息给后台)。首先我们来看manifest.json这个文件,

 {
"name" : "myApp",
"version" : "1.0.1",
"description" : "Launch APP ",
"background" : { "scripts": ["background.js"] }, "permissions" : [
"nativeMessaging",
"tabs",
"http://*/*"
],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["content.js"]
}
],
"minimum_chrome_version" : "6.0.0.0",
"manifest_version": 2
}

上面可以看出,这个文件在哪里引用了background.js和content.js,这两个文件的名字是可以更改的,permissions里的"http://*/*"与 content_scripts里的"matches"的意思是允许所有的http请求的url调用。"nativeMessaging" 代表要在这个插件中允许调用这种方法。

接下来,看一下后台文件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.dhcc.lisprint";
port = chrome.runtime.connectNative(nativeHostName);
console.log(port)
port.onMessage.addListener(onNativeMessage);
port.onDisconnect.addListener(onDisconnected);
port.postMessage({message: msg});
}

这个js文件里有两个十分重要的方法chrome.runtime.onMessage.addListener和connectToNativeHost。chrome.runtime.onMessage.addListener里可以看出,这个响应事件的方式为"launch"时,调用connectToNativeHost。

connectToNativeHost链接com.dhcc.lisprint这个服务。同时postMessage。

接下来,我们来看content.js。

 var launch_message;
document.addEventListener('myCustomEvent', function(evt) {
  console.log(evt);
  chrome.runtime.sendMessage({type: "launch", message: evt.detail}, function(response) {
  });
}, false);

这个文件的意图很明显,当界面传来myCustomEvent这个事件,向后台文件background.js发送type为launch的信息。


以上就是chrome插件相关部分,我们可以看出并未写如何调用下面介绍native messaging调用部分。首先我们新建一个文件,manifest.json(名称可以修改)。

 {
"name": "com.dhcc.lisprint",
"description": "Dhcc imedical lis print config app",
"path": "C:\\Test.exe",
"type": "stdio",
"allowed_origins": [
"chrome-extension://acpcejomihdkopjnnijfmnpdgfkmfhkj/"
]
}

可以很明显的看出,name即我们background.js里面要调用的host,path即我们要调用的本的应用程序。allowed_origins是什么呢?即我们安装完chrome插件的ID,如图:

那如何让chrome知道这个json就是com.dhcc.print的配置文件呢?这里我们还需要进行下一步,修改注册表:

运行-> Regedit -> HKEY_Current_User->Software->Google->Chrome->新建一个叫NativeMessagingHosts的项->新建一个叫com.my_company.my_application的项,  同时在这个项里默认值设置为我们Native Messaging 的 位置 即这个json文件的位置,如C:\\Native\\manifest.json。这样便完成了native masseging的设置。


接下来我们看界面是如何调用的

<html>
<head>
<script> function startApp() {
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>

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

下面,我们可以看下如何接收页面传递给exe的信息。

  private void Form1_Load(object sender, EventArgs e)
{
string chromeMessage = OpenStandardStreamIn(); MessageBox.Show(chromeMessage); } private static string OpenStandardStreamIn()
{
//// We need to read first 4 bytes for length information
Stream stdin = Console.OpenStandardInput();
int length = ;
byte[] bytes = new byte[];
stdin.Read(bytes, , );
length = System.BitConverter.ToInt32(bytes, ); string input = "";
for (int i = ; i < length; i++)
{
input += (char)stdin.ReadByte();
} return input;
}

以上就是全部内容啦~


Chrome Native Messaging 与本地程序之间的通信的更多相关文章

  1. 一个实现浏览器网页与本地程序之间进行双向调用的轻量级、强兼容、可扩展的插件开发平台—PluginOK中间件

    通过PluginOK中间件插件平台(原名本网通WebRunLocal)可实现在网页中的JavaScript脚本无障碍访问本地电脑的硬件.调用本地系统的API及相关组件,同时可彻底解决ActiveX组件 ...

  2. Google Chrome Native Messaging开发实录(二)Chrome Extension扩展

    接上一篇<Google Chrome Native Messaging开发实录(一)背景介绍>的项目背景,话不多说,有关Chrome Extension介绍和文档就不展开了,直接上代码. ...

  3. Google Chrome Native Messaging开发实录(一)背景介绍

    最近接手了一个针对Google Chrome的需求,最终是使用Native Messaging来实现的.通过这个连载,将把本次开发从方案选定到编码的全部过程进行完整的回顾,并记录开发过程中踩过的各种坑 ...

  4. 通过私有协议Chrome浏览器页面打开本地程序

    近期方有这样的要求:这两个系统,根据一组Chrome开展,根据一组IE开展,需要Chrome添加一个链接,然后进入IE该系统的开发.这,需要Chrome跳转到创建一个链接IE浏览器指定的页面.同时也实 ...

  5. Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging

    通过将浏览器所在客户端的本地应用注册为Chrome浏览器扩展的“本地消息主机(native messaging host)”,Chrome浏览器扩展还可以与客户端本地应用之间收发消息. 客户端的本地应 ...

  6. Delphi 两个应用程序(进程)之间的通信

    两个应用程序之间的通信实际上是两个进程之间的通信.由于本人知识有限,决定应用消息来实现.需要用到的知识: 1.RegisterWindowMessage(); //参数类型:pchar:返回值:Lon ...

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

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

  8. Chrome 小工具: 启动本地应用 (Native messaging)

    最近遇到一个新的问题.需要使用Chrome 插件, 从我们对我们当地的一个网站之一启动C#应用,同时通过本申请值执行不同的操作. 在这里记录下解决的过程.以便以后查找 首先我们须要新建一个google ...

  9. 如何使用Native Messaging API 打开window程序

    问 如何使用Native Messaging API 打开window程序 cmd javascript terminal chrome Tychio 2013年03月26日提问 关注 1 关注 收藏 ...

随机推荐

  1. 【iOS开发-55】图片轮播案例:scrollView的分页、滚动栏、利用代理控制定时器和Page Control以及多线程问题

    案例: (1)用storyboard布局,这里用了三样东西. --UIScrollView就是我们准备存放滚动图片的容器. --Page Control就是控制页数的那几个小点点.能够设置有多少个点. ...

  2. 利用excel去除txt文本中重复项

    2017-04-10 1.要去重的文件,点击右键,选择程序. 2.选择excel表格或者wps表格. 3.excel表格去重:选中单元格——数据——筛选——高级筛选——选择不重复记录——确定 wps表 ...

  3. Tomcat 编码不一致导致乱码

    众所周知,Tomcat是一个基于HTTP协议的Java应用服务器(非Web服务器),也是一个Servlet容器. 一般我们会基于使用HTTP协议的Post或Get方法来传递内容或参数,中间会涉及一些编 ...

  4. Android学习(一) 按钮的事件

    用户登录 1.内部匿名类方式实现 layout <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/an ...

  5. vue笔记三(组件)

    十.组件 1.组件中的data为函数 2.props: 父组件向子组件传递数据 子组件:Child.vue <template> <span>{{ myMsg }}</s ...

  6. react-native 项目实战 -- 新闻客户端(5) -- 完善首页列表数据

    1.Home.js: /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, T ...

  7. vue created 生命周期

    在实例创建完成后被立即调用.在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调.然而,挂载阶段还没开始,$el属性目前不可见. ...

  8. 数据文件offline 时oracle 干了那些事?

    SQL> oradebug setmypid Statement processed. SQL> oradebug unlimit Statement processed. SQL> ...

  9. php-fpm添加service服务

    原文:http://blog.csdn.net/whatday/article/details/50659992 php-fpm在5.3.2版本以后不支持service php-fpm start等命 ...

  10. MQTT--Mosquitto的配置文件

    Mosquitto的配置文件存放在/etc/mosquitto/mosquitto.conf 配置文件具体的配置内容为: # ===================================== ...