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

那应该有用。如果没有，请检查检查员的弹出窗口和背景页面：

• 弹出式检查器：右键单击弹出窗口并选择“检查”
• 后台检查员在您的扩展程序设置页面chrome：// extensions中，启用开发者模式（选中右上角），然后点击 background.js 。

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