Chrome 扩展中的背景页面和弹出页面之间的通信

Question

我目前正在尝试为谷歌浏览器编写一个扩展程序，可以用来上传文件。

有两个页面：背景页面和弹出页面。 单击多功能栏右侧的图标时会出现弹出页面。您可以使用标准 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);

应该可以。如果没有，请检查您的检查器是否有弹出和背景页面：

• 弹出检查器：右键单击弹出窗口并选择检查
• Background Inspector 在您的扩展设置页面 chrome://extensions，打开开发者模式（检查右上角），然后点击 background.js。

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