问题 Chrome扩展程序中后台页面和弹出页面之间的通信


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

有两个页面:背景页面和弹出页面。 单击全向条右侧的图标时,将显示弹出页面。您可以使用标准HTML指定要上载的文件 <input type='file' ... />

选择文件并单击“上传”后,文件的名称(+路径)应发送到后台页面。这是因为用户可以通过点击屏幕上的其他位置关闭页面来关闭弹出窗口。

当弹出窗口处于活动状态,后台页面将文件上传到服务器时,弹出窗口也应该从后台页面接收上传(0-100%)的进度,并显示该信息。完成后,用户应该看到URL。

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

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

但它没有用,功能没有被调用。

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

提前致谢!


6043
2018-06-12 16:50


起源

您是否在清单中声明了背景页面?你确定没有调用后台功能吗?你检查过控制台是否有错误? - serg
是的,我在清单中宣布了背景页面;我确定没有调用后台函数,因为我开始使用line:alert(“It works!”);, try-catch返回'undefined'。 - Timon Knigge
您提供的代码不包含错误,因此它位于您未显示的其他位置。 - serg


答案:


将其定义为变量。

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

这应该工作。如果没有,请检查检查员的弹出窗口和背景页面:

  • 弹出检查员: 右键单击弹出窗口,然后选择Inspect
  • 背景检查员 在您的扩展程序设置页面chrome:// extensions中,启用开发者模式(选中右上角),然后点击 background.js

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


14
2017-08-15 10:36



请注意清单v2中没有内联脚本,所以将该代码放在popup.js中并使用popup.html中的<script src =“popup.js”> </ script>链接到它 - captainclam
谢谢@captainclam更新了V2 Manifest的答案 - Mohamed Mansour