chrome 浏览器插件开发(二)

chrome 浏览器插件开发(二)

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

一、坑和铲子

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

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

    发送消息:

    

1 var send= function(data, cb){ 2 chrome.tabs.query({active:true}, function(tab) { 3 chrome.tabs.sendMessage(tab[0].id, { 4 5 data: data 6 }, function(res) { 7 //cb && cb(res); 8 if(cb){ 9 cb(res);10 }11 });12 });13 },

    接收消息: 

1 var sendListen=function(cb){2 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {3 4 cb(request.data, sender, sendResponse);5 6 });7 }

如上面的代码,我们把消息发送给当前页面   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获取变量定义处的数值作为返回值。

例如页面中如下定义:

var pageObj = { userName: ‘abc’, otherList: [‘sasda’,’dsadasda’,’sasdad’] }crxTool.getPageValue(valueName);=>{“userName”: “abc”,”otherList”: [“sasda”,”dsadasda”,”sasdad”]}

 


比丘资源网 » chrome 浏览器插件开发(二)

发表回复

提供最优质的资源集合

立即查看 了解详情