我目前正在尝试为 Google Chrome 编写一个扩展程序,可用于上传文件。
有两个页面:后台页面和弹出页面。
当您单击多功能栏右侧的图标时,会出现弹出页面。您可以使用标准 HTML 指定要上传的文件 <input type='file' ... />
.
选择文件后,点击“上传”,将文件的名称(+路径)发送到后台页面。这是因为用户只需点击屏幕上的其他地方即可关闭弹出窗口,从而关闭页面。
当弹出窗口处于事件状态,并且后台页面正在向服务器上传文件时,弹出窗口也应该从后台页面接收上传进度(0-100%),并显示此信息。完成后,用户应该会看到 URL。
问题是,我不知道如何在这两个页面之间进行通信。文档不是很清楚这是如何工作的。我试过的一件事是在后台页面上创建一个函数,称为 upload(filename)
, 并将此代码放在弹出页面中:
var BGPage = chrome.extension.getBackgroundPage();
BGPage.upload(the_filename);
但是没有用,函数没有被调用。
有谁知道如何将文件名从弹出页面发送到后台页面,以及如何通过弹出页面从后台页面检索上传状态(以及最终的链接)?
提前致谢!
最佳答案
将其定义为变量。
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);
那应该行得通。如果没有,请检查您的检查器是否有弹出窗口和背景页面:
- Popup Inspector:右键单击弹出窗口并选择 Inspect
- Background Inspector 在您的扩展程序设置页面 chrome://extensions 中,打开开发人员模式(选中右上角),然后单击 background.js。
它将打开检查器,然后单击控制台以查看控制台中的错误消息以进一步帮助您,执行我上面所说的应该有效,我一直这样做。
关于javascript - Chrome 扩展中后台页面和弹出页面之间的通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6323184/