Chrome plugin Development (ii)--Communication Acquisition page writing chrome plugin-specific libraries

In the chrome plug-in development process, I encountered some problems, on the internet to find a lot of articles, may be browser upgrade reasons, some are valid also have invalid. Below I simply share the pit I met, and I put the solution of these pits into the JS library--crxtool.

First, pit and shovel

　　1. Browser action or page action communicates with content script

On the internet to find a lot of methods, the last choice of methods are as follows:

Send message:

　　　　

1 varSend=function(data, CB) {2Chrome.tabs.query ({active:true},function(tab) {3Chrome.tabs.sendMessage (tab[0].id, {45 Data:data6},function(res) {7                     //CB && CB (RES);8                     if(CB) {9 CB (RES);Ten                     } One                 }); A             }); -},

Receive Message:

1 var sendlisten=function(CB) {2             Chrome.runtime.onMessage.addListener (  function  (request, sender, Sendresponse) {3                 4                CB (Request.data, sender, sendresponse); 5 6             }); 7         }

As the above code, we send the message to the current page tab[0].id and process the callback

　　　　2. Read the JS content of the script tag package of the page

In general, the browser is in a security limit and only the global variables in the JS file can be obtained in content script. However, for variables in the script tag, it is not directly accessible through content script, it is possible to prevent content script from getting the background template to spit on the page user information. But looking at the documentation, we can see that the Chrome browser allows the user to get the page DOM, which brings us a new idea-parsing the HTML structure.

Think of the following through the regular way to parse the string of HTML, you can get the variables defined in the script tag, but this method has a disadvantage, that is, I get the initial declaration of the definition of the value, if there is JS change, then can't get, but generally this variable is the background spit out, To the front-end read the burn friend changes. So in this case, our approach works.

　

Second, Crxtool

Crxtool is a JS library that I've written in the Chrome plugin based on some of the solutions above. GitHub Address--https://github.com/grarm/crxtool

The following APIs are mainly available for everyone to use

　　

Crxtool.send (tag, data, CB) is used to send data from the content script in the Chrome extension that wants the current page, where tagis a custom string type that represents the identity of the sending data to facilitate content script to differentiate the source of data when it receives data. dataIs the data object to be passed. CB is the callback function after the data is received.

function (res) {    console.log (' box-1 element width:  ', res.width);});

Crxtool.sendlisten (tag, CB) is used to receive data in the content script, where tagA custom string type that represents the identity of the receiving data, Crxtool.send tagThe data sent by send can be received at the corresponding time. cbRepresents a function that handles receiving data, and a parameter list that is consistent with the Chrome.runtime.onMessage.addListener handler in Chrome.api, using the following method:

function (Request, sender, Sendresponse) {    sendresponse ({width:document.getElementById (request.id). offsetwidth});});

Crxtool.getpagevalue (ValueName) is used to get page variables in the current page in content script. Because Chrome has security restrictions, it is not possible to directly get page variables that are wrapped in a script tag on a page, such as token and page information, which may be rendered in a server-side template, output in a page, and defined as a global variable in the page for the JS file. These variables are often important to our chrome extensions, but Chrome does not allow content script to get page variables directly. Crxtool provides a function for using parameters valueNameGets the value at the variable definition as the return value.

For example, the page is defined as follows:

<script type= "Text/javascript" >    var pageobj = {        ' abc ',        otherlist: [' Sasda ', ' dsadasda ', ' Sasdad ']    }</script>crxtool.getpagevalue (valueName); =>{"UserName": "abc", "Otherlist": ["Sasda", "Dsadasda", "Sasdad"]}

Chrome plugin Development (ii)--Communication Acquisition page writing chrome plugin-specific libraries