zoukankan      html  css  js  c++  java
  • 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({ 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"]}
  • 相关阅读:
    elasticsearch CriteriaQuery查询例子
    mysql转ElasticSearch的分析 及JAVA API 初探
    java利用HttpClient进行https接口调用
    JDK8新特性:使用stream、Comparator和Method Reference实现集合的优雅排序
    java爬虫入门
    AndroidStudio升到最新版本(3.1.2)之后
    怎样录制简单GIF动图
    android 集成友盟分享之后,想自定义分享面板的看过来
    Android代码中设置字体大小,字体颜色,显示两种颜色.倒计时效果
    Android新特性之CardView的简单使用
  • 原文地址:https://www.cnblogs.com/webARM/p/5301238.html
Copyright © 2011-2022 走看看