程序员人生 网站导航

chrome插件的popup与跨域请求

栏目:互联网时间:2014-11-21 08:31:34
chrome插件的popup与跨域要求
tkorays <tkorays@hotmail.com>

popup及其他js脚本

        在chrome插件开发中,大致有几种类型的js文件:popup窗口的js文件,background脚本,content脚本。

  • popup即指弹出窗口,里面的页面是使用html等定义的。这个页面里面包括脚本,主要用于popup界面逻辑,但是它也能够调用chrome的1些API,比如和background通讯。
  • background是用于处理后台功能的,比如处理1些计算、分析页面等。
  • content是嵌入打开的页面的,利用它可以修改阅读页面的样式功能、得到页面的DOM等。

        他们3个之间是可以相互通讯的,chrome提供了1些通讯的方法:
        chrome.extension.*
        chrome.runtime.*

跨域要求

        由于安全问题,chrome制止了跨域要求的。在某些场景中,我们需要在popup的脚本中发送跨域要求,但是在chrome中履行,返回的status总是为0 。这样很不方便。
        但是在插件中,background脚本是可以履行跨域要求的。
        content脚本中也能够要求,但是必须先设置manifest.json里的permissions,开启对某些地址的跨域要求。

        这里有1些解决方案。

        1.利用通讯
        popup发送消息,background履行跨域要求,返回信息。但是,这里有个问题,popup里面的发送消息时回调函数并没有履行(content和background通讯中履行没问题)。但是我们需要在收到消息后履行某些操作。因此,这样问题很大。

        2.调用background函数
        其实,还有种最简单的方法,那就是直接调用background的函数。由于,popup里面可以获得background:
       
var bgPage = chrome.extension.getBackgroundPage();

        只要调用函数bgPage.someFunc();就能够使用background的功能了。

        比如你在background里面实现函数:
DownloadPage(url,callback){ var content = ""; // 下载代码,可以跨域要求 // ....... callback(content); };


        在popup里面调用:
bgPage.DownloadPage('http://www.baidu.com',function(content){ // 在这个回调函数里面改变popup内容等 });




------分隔线----------------------------
------分隔线----------------------------

最新技术推荐