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

Question

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

有两个页面：背景页和弹出页。 当您单击omni-bar右侧的图标时，将显示弹出页。您可以使用标准的HTML <input type='file' ... /> 指定要上传的文件。

选择文件后，点击“上传”按钮，应将文件名（+路径）发送到背景页。这是因为用户可以通过单击屏幕上的其他位置关闭弹出页。

当弹出页处于活动状态且背景页正在将文件上传到服务器时，弹出页还应从背景页接收上传进度（0-100％）并显示此信息。上传完成后，用户应该看到URL。

问题是，我不知道如何在这两个页面之间通信。文档对此工作方式的说明不是很清楚。我尝试过在背景页上制作一个名为upload(filename)的函数，并将以下代码放入弹出页中：

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

但是它没有起作用，函数没有被调用。

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

提前感谢！

- Timon Knigge

---

你在清单文件中声明了背景页吗？你确定背景函数没有被调用吗？你检查过控制台是否有错误吗？ - serg

是的，我在清单中声明了背景页面；我确定背景函数没有被调用，因为我从这一行开始：alert("It works!");，并且try-catch返回'undefined'。 - Timon Knigge

您提供的代码没有错误，因此错误可能在您未显示的其他地方。 - serg

Answer 1

将其定义为一个变量。

background.js

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

弹出窗口.html

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

popup.js

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

这应该可行。如果不行的话，请检查弹出窗口和背景页面的检查器：

• 弹出窗口检查器: 右键单击弹出窗口，选择"检查"
• 背景页面检查器: 在您的扩展设置页面chrome://extensions中，开启开发者模式（勾选右上角），然后点击background.js

它将打开检查器，然后点击控制台以查看控制台中的错误信息，以便进一步帮助您，按照我上面说的做应该可以解决问题，我经常这么做。

- Mohamed Mansour

---

注意在清单v2中，您不能有内联脚本，因此请将该代码放入popup.js中，并使用<script src="popup.js"></script>在您的popup.html中链接它。 - Simon Lang