2011-06-12 203 views
11

我目前正在嘗試爲Google Chrome編寫擴展程序,該擴展程序可用於上傳文件。Chrome擴展中的背景頁面和彈出頁面之間的通信

有兩個頁面:背景頁面和彈出頁面。 單擊全方位條右側的圖標時彈出頁面出現。您可以使用標準HTML <input type='file' ... />指定要上傳的文件。

選擇文件並點擊「上傳」後,文件的名稱(+路徑)應發送到後臺頁面。這是因爲彈出窗口可以被用戶通過簡單地點擊屏幕上的其他地方關閉頁面來關閉。

當彈出窗口處於活動狀態,並且背景頁面正在將文件上載到服務器時,彈出窗口還應該從背景頁面接收上傳進度(0-100%)並顯示此信息。完成後,用戶應該看到該URL。

問題是,我不知道如何在這兩個頁面之間進行通信。文檔不太清楚這是如何工作的。我試過的事情,正在後臺頁面上的功能,稱爲upload(filename),並把這個代碼在彈出的頁面:

var BGPage = chrome.extension.getBackgroundPage(); 
BGPage.upload(the_filename); 

但它沒有工作,功能不叫。

有誰知道我可以如何將文件名從彈出頁面發送到後臺頁面,以及如何通過彈出頁面從後臺頁面檢索上傳狀態(並最終鏈接)?

在此先感謝!

+0

您是否在清單中聲明瞭背景頁?你確定沒有調用背景函數嗎?你有沒有檢查控制檯的錯誤? – serg 2011-06-12 19:24:42

+0

是的,我宣佈清單中的背景頁面;我確定後臺函數沒有被調用,因爲我從行開始:alert(「It works!」);,並且try-catch返回'undefined'。 – 2011-06-13 09:14:05

+0

您提供的代碼不包含錯誤,因此它在您未顯示的其他位置。 – serg 2011-06-13 15:26:48

回答

14

將其定義爲變量。

background.js

upload = function(fileName) { 
    console.log('Uploading', fileName); 
} 

popup.html

<script src="popup.js"></script> 

popup.js

var BGPage = chrome.extension.getBackgroundPage(); 
BGPage.upload(the_filename); 

這應該工作。如果沒有,那麼請檢查您的檢查員彈出和背景頁:

  • 彈出督察:右鍵點擊彈出窗口並選擇檢查
  • 背景督察在您的分機設置頁面鉻: //擴展程序,打開開發人員模式(點擊右上角),然後點擊background.js

它將打開檢查器,然後單擊控制檯以查看控制檯中的錯誤消息以進一步幫助您進行上述工作,我一直這麼做。

+2

清單v2中的注意事項不能包含內聯腳本,因此請將該代碼放置在popup.js中,並使用在您的popup.html中鏈接到它 – captainclam 2013-02-28 00:50:24

+0

謝謝@captainclam更新了答案對於V2 Manifest – 2013-03-04 19:23:32

相關問題