接上一篇《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. 阿里云oss视频上传不能在线播放,js,javascript,在线播放器,插件

    网页视频播放插件 发现阿里云oss储存,上传了视频不能在线播放. 解决方法:使用插件播放即可解决. <html> <head> <meta charset="u ...

  2. xtrabackup安装使用及原理

    Xtrabackup是由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上惟一一款开源的能够对innodb和xtradb数据库进行热备的工具.Xtrabackup中主要包含两个工具 ...

  3. shell实现linux回收站的功能

    shell实现linux回收站的功能 下载: https://gitee.com/LoongWang/shellrecycling/repository/archive/master.zip 代码: ...

  4. GIS数据下载

    WorldTile.hdf wuhan.hdf ... openstreetmap GIS空间数据库 分割存储. 检索效率有没有提高? 云地理服务:旅游,遥感数据处理,气温,地质,房价,人口,生活(商 ...

  5. hdu 4882 比赛罚时贪心

    http://acm.hdu.edu.cn/showproblem.php?pid=4882 就是CF的比赛,根据时间的推迟会相应的扣掉题目的分数,每个任务有e,k,e表示完成需要时间,k表示完成后消 ...

  6. SRM475

    250pt: 题意:有最长N=17的一条格子,每个格子是W.B和R三种颜色之一,当某个格子上有兔子时,下一个回合该兔子按照以下的规则移动: 如果兔子在第一个格子,则向右移动一格: 否则如果兔子在倒数两 ...

  7. 一个简单的用python 实现系统登录的http接口服务实例

    用python 开发一个登录的http接口: 用户登录数据存在缓存redis里,登录时根据session判断用户是否已登录,session有效,则直接返回用户已登录,否则进mysql查询用户名及密码, ...

  8. jquery基于form-data文件上传

    1.html代码 <input type="file" name="myupdate" id="myupdate"> 2.jav ...

  9. 探索基于.NET下实现一句话木马之asmx篇

    0x01 前言 上篇介绍了一般处理程序(ashx)的工作原理以及实现一句话木马的过程,今天接着介绍Web Service程序 (asmx)下的工作原理和如何实现一句话木马,当然介绍之前笔者找到了一款a ...

  10. ASP.NET MVC基础知识

    1.MVC项目文件夹说明 App_Data:用来保存数据文件,比如XML文件等: App_Start:包含mvc系统启动的相关类: Controller:存放整个项目“控制器”的代码文件: Model ...