Chrome扩展程序中的背景页面和弹出页面之间的通信 [英] Communication between background page and popup page in a Chrome Extension

问题描述

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

有两个页面：背景页面和弹出窗口页。
单击全方位条右侧的图标时弹出页面出现。您可以使用标准HTML < input type ='file'... /> 指定要上传的文件。

选择文件并点击上传后，文件的名称（+路径）应发送到后台页面。这是因为弹出窗口可以被用户通过简单地点击屏幕上的其他地方关闭页面来关闭。

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

问题是，我不知道如何在这两个页面之间进行通信。文档不太清楚这是如何工作的。我尝试过的一件事是在后台页面上创建一个名为 upload（filename）的函数，并将此代码放入弹出页面中：

  var BGPage = chrome.extension.getBackgroundPage（）; 
 BGPage.upload（the_filename）; 
  

但它没有用，函数没有被调用。

有谁知道我可以如何将文件名从弹出页面发送到后台页面，以及如何通过弹出页面从后台页面检索上传状态（最终是链接）？

预先感谢！

解决方案

将其定义为变量。 p>

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 上。

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

I'm currently trying to write an extension for Google Chrome, which can be used to upload files.

There are two pages: the background page and the popup page. The popup page appears when you click the icon right of the omni-bar. You can specify the file you want to upload using the standard HTML <input type='file' ... />.

After selecting the file, and clicking "Upload", the name(+path) of the file should be sent to the background page. This, because the popup can be closed by the user by simply clicking somewhere else on the screen, which closes the page.

When the popup is active, and the background page is uploading the file to the server, the popup should also recieve the progress of uploading(0-100%) from the background page, and display this information. When finished, the user should see the URL.

The problem is, I don't know how to communicate between these two pages. The documentation isn't very clear about how this works. A thing I've tried, is making a function on the background page, called upload(filename), and put this code in the popup page:

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

But it didn't work, the function wasn't called.

Does anyone know how I can send the filename from the popup page to the background page, and how to retrieve upload status(and eventually the link) from the background page, via the popup page?

Thanks in advance!

解决方案

Define it as a variable.

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

That should work. If it doesn't, then check your inspector for the popup and background page:

• Popup Inspector: Right click on the popup and choose Inspect
• Background Inspector In your extension settings page chrome://extensions, turn on developer mode (check top right), and click on background.js.

It will open the inspector, then click on console to see the error messages in the console to assist you further, doing what I stated above should work, I do it all the time.

这篇关于Chrome扩展程序中的背景页面和弹出页面之间的通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！