Chrome 擴展中背景頁面和彈出頁面之間的通信

Question

我目前正在嘗試為 Google Chrome 編寫一個擴展程序，可以用來上傳文件。

有兩個頁面：背景頁面和彈出頁面。 單擊多功能欄右側的圖標時會出現彈出頁面。 您可以使用標准 HTML <input type='file'... />指定要上傳的文件。

選擇文件后，點擊“上傳”，文件的名稱（+路徑）應該被發送到后台頁面。 這是因為用戶可以通過簡單地單擊屏幕上的其他位置來關閉彈出窗口，從而關閉頁面。

當彈窗處於活動狀態，並且后台頁面正在將文件上傳到服務器時，彈窗還應從后台頁面接收上傳進度（0-100％），並顯示此信息。 完成后，用戶應該會看到 URL。

問題是，我不知道如何在這兩個頁面之間進行通信。 文檔不是很清楚這是如何工作的。 我嘗試過的一件事是在后台頁面上制作一個 function ，稱為upload(filename) ，並將此代碼放在彈出頁面中：

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

但它沒有用，沒有調用 function。

有誰知道我如何將文件名從彈出頁面發送到后台頁面，以及如何通過彈出頁面從后台頁面檢索上傳狀態（最終是鏈接）？

提前致謝！

Answer 1

將其定義為變量。

背景.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 Inspector在你的擴展設置頁面 chrome://extensions，打開開發者模式（檢查右上角），然后點擊background.js 。

它將打開檢查器，然后單擊控制台以查看控制台中的錯誤消息以進一步幫助您，按照我上面所說的應該工作，我一直這樣做。