chrome 浏览器插件开发—— 通信 获取页面 编写chrome插件专用的库

Posted 2020-06-26 前端—郭瑞

　　在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获取变量定义处的数值作为返回值。

例如页面中如下定义：

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

=>{"userName": "abc","otherList": ["sasda","dsadasda","sasdad"]}