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.

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