在chrome插件的开发过程中,我遇到了一些问题,在网上找了不少文章,可能是浏览器升级的原因,有一些是有效的也有无效的。下面我简单的分享一下我遇到的坑,以及我把这些坑的解决方案整理而成的js库 —— crxTool 。

一、坑和铲子

  1、browser action或page action与content script通信

    在网上找了不少方法,最后选择的方法如下:

    发送消息:

    

 var send= function(data, cb){
chrome.tabs.query({active:true}, function(tab) {
chrome.tabs.sendMessage(tab[0].id, {
data: data
}, function(res) {
//cb && cb(res);
if(cb){
cb(res);
}
});
});
},

    接收消息:

 var sendListen=function(cb){
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
cb(request.data, sender, sendResponse);
});
}

如上面的代码,我们把消息发送给当前页面   tab[0].id   并处理回调

    2、读取页面的script标签包裹的js内容

   一般来说,浏览器处于安全限制,content script 中只能获取js文件中的全局变量。但是对于script标签中的变量,是不能通过content script直接访问的,可能是防止content script获取后台模板吐在页面上的用户信息。但是查阅文档,我们可以发现  chrome浏览器允许用户获取页面DOM,这就为我们的带来了新的思路——解析HTML结构。

   试想以下通过正则的方式解析字符串化的html,就可以拿到在script标签中定义的变量,但这个方法有一个缺点,就是我拿到的是初次声明 定义时的值,如果后面有js改动,则拿不到,但是一般这种变量都是后台吐出来,给前端读取的烧友改动。所以这种情况下,我们的方法是奏效的。

 

二、crxTool

  crxTool是我根据上面的一些解决方案写的一个在chrome插件中使用的js库。github地址—— https://github.com/grARM/crxTool

  主要提供了以下API,供大家使用

  

  crxTool.send(tag, data, cb)

用于从chrome扩展中想当前页面的content script 发送数据,其中tag为自定义的字符串类型,用于表示发送数据的标识,以方便content script在接收数据的时候区分数据的来源。data为要传递的数据对象。cb为数据被接收后的回调函数。

crxTool.send("getDomWidth", {"id": 'box-1'}, function (res){
console.log('box-1 元素的宽度为: ', res.width);
});

   crxTool.sendListen(tag, cb)

用于在 content script接收数据,其中tag为自定义的字符串类型,用于表示接收数据的标识,crxTool.send的tag对应的时候,即可接收到send发送的数据。cb表示处理接收数据的函数,与chrome.api中chrome.runtime.onMessage.addListener的处理函数保持一致的参数列表,使用方法如下:

crxTool.sendListen('getDomWidth', function (request, sender, sendResponse){
sendResponse({width: document.getElementById(request.id).offsetWidth});
});

  crxTool.getPageValue(valueName)

用于在content script 获取当前页面中的页面变量。由于chrome有安全限制,不能直接获取在页面中script标签包裹的页面变量,比如token和页面信息,这些变量可能是通过服务端模板渲染好的,输出在页面中,以在页面中定义为全局变量供js文件中去获取。往往这些变量对我们的chrome 扩展程序很重要,但chrome不允许 content script 直接获取页面变量。crxTool提供一个函数用于根据参数 valueName获取变量定义处的数值作为返回值。

例如页面中如下定义:

<script type="text/javascript">
var pageObj = {
userName: 'abc',
otherList: ['sasda','dsadasda','sasdad']
}
</script>
crxTool.getPageValue(valueName); =>{"userName": "abc","otherList": ["sasda","dsadasda","sasdad"]}

chrome 浏览器插件开发(二)—— 通信 获取页面变量 编写chrome插件专用的库的更多相关文章

  1. chrome 浏览器插件开发(一)—— 创建第一个chrome插件

    最近在开发一个chrome插件,在网上找到了一些的文章,虽说按照文章可以写出对应的例子,但若要进行实际开发,发现还是有不少文章中没有的坑.下面我将结合我在开发过程中遇到的几个方面,对这些坑做一下补充. ...

  2. Chrome浏览器插件开发-淘宝自动登录

    浏览器插件的介绍 Chrome浏览器插件开发的准备工作 manifest.json配置介绍 页面如何注入scripts文件 一. 浏览器插件的介绍 浏览器插件是一种遵循一定规范的应用程序接口编写出来的 ...

  3. Chrome浏览器插件开发-关于案例

    前言 关于案例 下一章 版本更新提示案例 一.前言 上章我们提到过开发一个插件所需要的步骤: Chrome浏览器插件开发-淘宝自动登录 并且还介绍了如何在页面上面注入脚本代码,并且成功的完成用户名和密 ...

  4. chrome 浏览器插件开发

    一.chrome 浏览器插件开发是什么: 1 从技术上说插件只是一个存在于本地的一个网站.所以呢在插件开发的过程中用到的技术无非是 javascript .html .css . 二.把当前活动页面的 ...

  5. Google Chrome 浏览器插件开发学习

    2014/11/16 Google Chrome 浏览器插件开发学习 因笔记存有文件,不便发表在cnblogs上,请到evernote里找笔记 "Google Chrome 浏览器插件开发学 ...

  6. Chrome浏览器扩展开发系列之一:初识Google Chrome扩展

    1.       Google Chrome扩展简介 Google Chrome扩展是一种软件,以增强Chrome浏览器的功能. Google Chrome扩展使用HTML.JavaScript.CS ...

  7. 使用CefSharp在.Net程序中嵌入Chrome浏览器(二)——参数设置

    在实现了.Net程序中嵌入Chrome浏览器后,下一步的个性化操作就是加入一些设置了,在前面的文章中,我们可以看到在使用Chrome控件前,有如下一个操作: var setting = new Cef ...

  8. 【Selenium专题】WebDriver启动Chrome浏览器(二)

    官方API Constructor Summary ChromeDriver() Creates a new ChromeDriver using the default server configu ...

  9. .net使用cefsharp开源库开发chrome浏览器(二)

    离上篇写介绍pc端的混合开发和为什么以cefsharp入手研究混合开发已经有好几天,一直忙,抽不出时间继续写怎么搭建cefsharp开发环境.其实没有时间是借口,一切都是懒,没有爱到深处. 今天继续写 ...

随机推荐

  1. TestNG的testng.xml配置概述

    TestNG提供的annotaions用来辅助定义测试类. TestNG的testng.xml配置文件用来辅助定义执行什么样的测试,即testng.xml更像是一个测试规划. testng.xml配置 ...

  2. gitee 搭建自己的代码仓库

    git是什么? 还是科普一下吧:Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理(来自我大百度) 现在越来越多的公司已经使用git来进行项目的版本管理,,使用起来 ...

  3. java替换word2003

    map.put("year", year);            map.put("yearMonthDay", yearMonthDay);         ...

  4. leetcode 627. Swap Salary 数据库带判断的更新操作

    https://leetcode.com/problems/swap-salary/description/ 用  set keyWord = Case depentedWord when haha ...

  5. [转]jQuery调用ASPX返回json

    本文转自:http://www.cnblogs.com/fire-phoenix/archive/2009/11/13/1614146.html 本文介绍如何在ASP.NET(ASP.NET/AJAX ...

  6. Murano Weekly Meeting 2016.05.31

    Meeting time: 2016.May.31 1:00~2:00 Chairperson:  Kirill Zaitsev, from Mirantis Meeting summary: 1.A ...

  7. node+mongoDB+express项目需求解释

    1. morgon模块 --- morgon 用于打印日志,分别为向后台打印和向文件中打印两种情况.stackoverflow. 2. app.use(bodyParser.json()) 3. de ...

  8. java内存区域与内存溢出

    JVM的内存区域划分: jvm的内存区域分为5部分:程序计数器,虚拟机栈,本地方法栈,堆跟方法区. 程序计数器,虚拟机栈,本地方法栈三部分是线程私有的,堆跟方法区是公共的. 1.程序计数器 是一块较小 ...

  9. ruby逻辑判断符号

    puts true and false  #相当于 (puts true) and false Use &&/|| for boolean expressions, and/or fo ...

  10. JavaScript高级程序设计--对象创建的三种方法

    创建对象的三种方法: 1.工厂模式 工厂模式是软件工程领域广为人知的设计模式,这种模式抽象了创建具体对象的过程.下面是使用工厂函数创建对象的的一个例子. 2.构造函数: 从上面的例子中,我们看到构造函 ...