chrome插件的popup与跨域请求

chrome插件的popup与跨域请求

tkorays <tkorays@hotmail.com>

popup及其他js脚本

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

• popup即指弹出窗口，里面的页面是使用html等定义的。这个页面里面包含脚本，主要用于popup界面逻辑，但是它也可以调用chrome的一些API，比如和background通信。

• background是用于处理后台功能的，比如处理一些计算、分析页面等。

• content是嵌入打开的页面的，利用它可以修改浏览页面的样式功能、得到页面的DOM等。

        他们三个之间是可以相互通信的，chrome提供了一些通信的方法：

        chrome.extension.*

        chrome.runtime.*

跨域请求

        由于安全问题，chrome禁止了跨域请求的。在某些场景中，我们需要在popup的脚本中发送跨域请求，但是在chrome中执行，返回的status总是为0 。这样很不方便。

        但是在插件中，background脚本是可以执行跨域请求的。

        content脚本中也可以请求，但是必须先设置manifest.json里的permissions，开启对某些地址的跨域请求。

        这里有一些解决方案。

        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内容等
});