关于chrome插件开发(二)

时间:2021-07-06 17:50:15

本周主要针对chrome浏览器的插件开发进行了细致化的研究.

首先,对于chrome,我们从跨域请求、操作页面DOM节点、常驻后台、页面间的通信和cookie的管理这五个方面进行了研究和编程,开发出了实现这些功能的chrome插件。现在我对这几个方面的重点知识做一总结:

l  跨域请求:chrome的插件要实现跨域请求,需要在manifest.json文件里在“permissions”属性下定义要访问的域名,例:“permissions”:[“*://www.baidu.com/*”].

另外,既然跨域了,那必然就要有异步请求,但是,在发起异步请求时要注意使用的函数是不是阻塞函数,我们使用的htpRequest函数是一个非阻塞函数,在返回请求结果的时候用callback,而不用return。发起异步请求的代码如下:

FunctionhttpRequest(url,callback){

   Var xhr = new XMLhttpRequest();

   Xhr.open(“GET”,url,true);

   Xhr.onreadystatechange = function(){

      If(xhr.readyState == 4){

         Callback(xhr.responseText);

}

}

                Xhr.send();

}

l  操作页面DOM节点:在manifest.json里面的content_scripts属性里面定义要使用的页面以及要执行的JavaScript函数,然后把鼠标放到要操作的网页元素上面,点右键-审查元素,然后再开发窗口里面找到这个标签或元素的ID,在编写JavaScript函数的时候,要获取这个ID,并调用实现功能的函数。

l  常驻后台:在manifest中指定background可以使扩展常驻后台,它包含三个属性:scripts、page和persistent,如果在scripts中指定一个JavaScript文件,那么chrome会在扩展启动时自动创建一个包含指定脚本的页面;如果指定了page属性,chrome会将指定的HTML文件作为后台页面运行;persistent属性设置为true时,扩展在后台一直运行,若为false,按需运行。

l  页面间的通信:有两个函数

Chrome.runtime.sendMessage(extensionId,message,options,callback)

Chrome.runtime.onMessage.addListener(callback)

l  Cookie管理:这一部分还在进一步研究,因为这一部分设计更重要的安全问题,所以下周准备作为重点对象研究