javascript - Chrome 扩展中后台页面和弹出页面之间的通信

Question

我目前正在尝试为 Google Chrome 编写一个扩展程序，可用于上传文件。

有两个页面:后台页面和弹出页面。当您单击多功能栏右侧的图标时，会出现弹出页面。您可以使用标准 HTML 指定要上传的文件 <input type='file' ... /> .

选择文件后，点击“上传”，将文件的名称(+路径)发送到后台页面。这是因为用户只需点击屏幕上的其他地方即可关闭弹出窗口，从而关闭页面。

当弹出窗口处于事件状态，并且后台页面正在向服务器上传文件时，弹出窗口也应该从后台页面接收上传进度(0-100％)，并显示此信息。完成后，用户应该会看到 URL。

问题是，我不知道如何在这两个页面之间进行通信。文档不是很清楚这是如何工作的。我试过的一件事是在后台页面上创建一个函数，称为 upload(filename) , 并将此代码放在弹出页面中:

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

但是没有用，函数没有被调用。

有谁知道如何将文件名从弹出页面发送到后台页面，以及如何通过弹出页面从后台页面检索上传状态(以及最终的链接)？

提前致谢!

Answer 1

将其定义为变量。

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);

那应该行得通。如果没有，请检查您的检查器是否有弹出窗口和背景页面:

• Popup Inspector:右键单击弹出窗口并选择 Inspect
• Background Inspector 在您的扩展程序设置页面 chrome://extensions 中，打开开发人员模式(选中右上角)，然后单击 background.js。

它将打开检查器，然后单击控制台以查看控制台中的错误消息以进一步帮助您，执行我上面所说的应该有效，我一直这样做。