chrome插件的popup與跨域請求
來源：程序員人生 發布時間：2014-11-21 08:31:34 閱讀次數：3932次
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內容等
});
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
