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