接上一篇《Google Chrome Native Messaging开发实录（一）背景介绍》的项目背景，话不多说，有关Chrome Extension介绍和文档就不展开了，直接上代码。

首先准备一个测试效果的页面demo.html

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>Printer Demo</title>

</head>

<html>

    <body>

        <input id="cardno" type="text" />

        <input id="mybutton" type="button" value="打卡" />

    </body>

</html>

chrome extension部分，manifest.json

{

  "name": "My Printer",

  "version": "1.0.0",

  "manifest_version": 2,

  "content_scripts": [

    {

      "matches": ["http://localhost:5103/*"],

      "js": ["contentscript.js"]

    }

  ],

  "background": {

      "scripts": ["background.js"]

  },

  "permissions": [

    "nativeMessaging"

  ]

}

contentscript.js

var button = document.getElementById("mybutton");

var cardno = document.getElementById("cardno");

button.addEventListener("click", function () {

    chrome.extension.sendMessage("some message", function (response) {

        //alert(response);

    });

}, false);

chrome.runtime.onMessage.addListener(function (data) {

    alert(data.cardno);

    cardno.value = data.cardno;

});

background.js

var host_name = "com.my.printer";

var port = null;

var tab = null;

function connectToNative() {

    console.log('Connecting to native host: ' + host_name);

    port = chrome.runtime.connectNative(host_name);

    port.onMessage.addListener(onNativeMessage);

    port.onDisconnect.addListener(onDisconnected);

}

function sendNativeMessage(msg) {

    message = { "text": msg };

    console.log('Sending message to native app: ' + JSON.stringify(message));

    port.postMessage(message);

    console.log('Sent message to native app: ' + msg);

}

function onNativeMessage(message) {

    console.log('recieved message from native app: ' + JSON.stringify(message));

    chrome.tabs.sendMessage(tab, message);

} 

function onDisconnected() {

    //console.log(chrome.runtime.lastError);

    console.log('disconnected from native app.');

    port = null;

    res = null;

}

chrome.extension.onMessage.addListener(function (data, sender, response) {

    tab = sender.tab.id;

    connectToNative();

    sendNativeMessage(data);

    return true;

});

针对代码细节，提请大家必须要注意的有：

1.native messaging相关api在chrome.runtime包中，只能在background中调用（可以是html或script）。

2.content script虽然不能直接调用native messaging api，但需要它起到中转消息改变页面元素的作用。chrome.extension.sendRequest方法已过期，它向background传递消息使用chrome.runtime.sendMessage替代。

3.在background中监听来自tab的消息chrome.extension.onRequest在官方文档中建议是用chrome.runtime.onMessage替代，但其实可以用chrome.extension.onMessage的，截止到写本文时官方的chrome extension api列表中并没有给出这样的写法，不要怀疑它的可用性。

Google Chrome Native Messaging开发实录（二）Chrome Extension扩展的更多相关文章

  1. Google Chrome Native Messaging开发实录（一）背景介绍

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

  2. Chrome扩展开发之二——Chrome扩展中脚本的运行机制和通信方式

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

  3. Chrome Native Messaging 与本地程序之间的通信

    最近项目上出现了web打印不稳定的问题,师父决定web调用本地打印程序,在查阅了相关资料和加了几个相关群咨询后得知新版的chrome不支持NNAPI了,最好用Native Messaging来处理,经 ...

  4. BizTalk开发系列(二十一) Mapping 扩展开发

    BizTalk Map编辑器提供了常用的功能块,比如数据库,字符串,数字计算等功能.可在设计Map时直接使用这些功能块进行扩展.除此之外对于进行复杂的Map处 理,Map 编辑器提供了扩展XSLT,扩 ...

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

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

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

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

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

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

  8. 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

    一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调 ...

  9. 前端开发必备之Chrome开发者工具（下篇）

    本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 本文是 前端开发必备之Chrome开发者工具 ...

随机推荐

  1. SpringBoot中用Fastjson替换默认的Jackson

    一:前言 经过测试,Jackson有很多不合人意的地方,因此建议用Fastjson来替换: 二:Jackson的坑 先定义实体类: @Data @AllArgsConstructor @NoArgsC ...

  2. linux ps查进程 kill关闭进程

    原文链接:http://blog.sina.com.cn/s/blog_53855ace0100ded4.html 首先,我们需要使用linux下另外一个ps命令查找与进程相关的PID号:ps aux ...

  3. C#版ObjectId

    近来在准备弄一个开源的HIS,但一周过去了几乎没有进度.就卡在ID如何生成.HIS的数据库压力大,如何多数据库支持,减轻压力一直想去实现.拿不准纯数字ID段还是GUID一类的文本ID.最终在mongo ...

  4. Reorder the Books -- hdu -- 5500

    http://acm.hdu.edu.cn/showproblem.php?pid=5500 Reorder the Books Time Limit: 4000/2000 MS (Java/Othe ...

  5. centos网络配置(手动设置，自动获取)的2种方法3

    不知道为什么最近一段时间网络特别的慢,还老是断,断的时候,局域网都连不上,当我手动设置一下ip后就可以了,搞得我很无语.下面是2种设置网络连接的方法,在说怎么设置前,一定要做好备份工作,特别是对于新手 ...

  6. OC语言-runtime

    参考博客 IOS高级开发-Runtime(一) http://blog.csdn.net/lizhongfu2013/article/details/9496705 apple官方参考 Object- ...

  7. 第74讲：从Spark源码的角度思考Scala中的模式匹配

    今天跟随王老师学习了从源码角度去分析scala中的模式匹配的功能.让我们看看源码中的这一段模式匹配: 从代码中我们可以看到,case RegisterWorker(id,workerHost,.... ...

  8. hdu 5059 简单字符串处理

    http://acm.hdu.edu.cn/showproblem.php?pid=5059 确定输入的数是否在(a,b)内 简单字符串处理 #include <cstdio> #incl ...

  9. cxRichEdit1获取EXCEL的区域图片

    cxRichEdit1获取EXCEL的区域图片   搞了好久却原来其实太简单: cxRichEdit1.Clear;Clipboard.Clear;ActiveSheet.cells[2, iCol] ...

  10. 分形之皇冠（Crown）

    皇冠分形曲线 核心代码: static void FractalCrown(const Vector3& vStart, const Vector3& vEnd, Vector3* p ...