Google Chrome Native Messaging开发实录（二）Chrome Extension扩展

时间：2021-07-17 17:50:36

接上一篇《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替代。

Google Chrome Native Messaging开发实录（二）Chrome Extension扩展

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

Google Chrome Native Messaging开发实录（二）Chrome Extension扩展

Google Chrome Native Messaging开发实录（二）Chrome Extension扩展

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开发系列&lpar;二十一&rpar; Mapping 扩展开发

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

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

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

  6. Chrome 小工具&colon; 启动本地应用 &lpar;Native messaging&rpar;

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

  7. Chrome 插件&colon; 起动本地应用 &lpar;Native messaging&rpar;

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

  8. 安卓手机移动端Web开发调试之Chrome远程调试&lpar;Remote Debugging&rpar;

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

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

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

随机推荐

  1. iPhone重绘机制drawRect

    如何使用iPhone进行绘图.重绘操作iPhone的绘图操作是在UIView类的drawRect方法中完成的,所以如果我们要想在一个UIView中绘图,需要写一个扩展UIView 的类,并重写draw ...

  2. nodejs 5&period;2&period;0文档自翻译——Path模块

    模块方法概览 Path path.basename(p[, ext]) path.delimiter path.dirname(p) path.extname(p) path.format(pathO ...

  3. MySQL索引的查看创建和删除

    1．索引作用 在索引列上,除了上面提到的有序查找之外,数据库利用各种各样的快速定位技术,能够大大提高查询效率.特别是当数据量非常大,查询涉及多个表时,使用索引往往能使查询速度加快成千上万倍. 例如,有 ...

  4. OpenGL ES 2&period;0 纹理映射

    纹理坐标用符点数表示,范围一般从0.0到1.0,在纹理坐标系中.纹理坐标系原点在左上侧,向右为S轴,向下为T轴.两个轴的取值范围都是0.0-1.0. 纹理映射 纹理映射:把一幅纹理图应用到相应的几何图 ...

  5. 【原】Spring和Dubbo整合案例和过程

    Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解耦合(或者最大限度地松耦合).从服务模型的角度来看,Dubbo采用的是一种非常简单的模 ...

  6. 实现微信浏览器自动播放MP3音乐

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 表格组件神器：bootstrap table详细使用指南

    1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...

  8. python 模块：csv

    转自:http://www.cnblogs.com/sislcb/archive/2008/12/15/1355481.html (感谢整理) 举几个例子来介绍一下,Python 的 CSV模块的使用 ...

  9. Python数据类型的内置函数之tuple&lpar;元组&rpar;&comma;dict&lpar;字典&rpar;&comma;set&lpar;集合&rpar;

    Python数据类型内置函数 - str(字符串) - list(列表) - tuple(元组) - dict(字典) - set(收集) tuple(元组)的操作 - (count)统计元组中元素出 ...

  10. October 10th 2017 Week 41st Tuesday

    If you focus on what you left behind you will never see what lies ahead. 如果你只顾回头看,那么你永远也看不见前方有什么. Ye ...

相关文章