关于在bg.html，popup.html和contentscript.js之间发送消息 [英] about sending messages among bg.html, popup.html and contentscript.js

问题描述

在我的扩展中，当 popup.html 中一个名为 mybuttonl 的按钮被点击
时，发送消息getvar到 contentscript.js ，然后发送消息我想让var1到 background.html 来获得一个名为 var1 的对象。 （名为 mybutton2 的按钮同样被设置，除了它被点击时获得 var2 对象）。

更重要的是，我对<$ c $有点困惑c> chrome.extension.onRequest.addListener 和 chrome.extension.sendRequest 方法。有人可以解释吗？

解决方案

onRequest.addListener和sendRequest是Chrome扩展消息的一部分。其中位于 http://developer.chrome.com/extensions/messaging.html

基本上，您使用onRequest.addListener来侦听某人发送的触发sendRequest的请求。

在你的情况下，你把一个 onRequest.addListener 在您的内容脚本中监听来自Popup的请求（使用 sendRequest ）。并且从内容脚本中，您可以将回复返回到弹出窗口以处理发生的事情。在弹出窗口中，您可以使用 chrome.extension.getBackgroundPage直接访问后台页面（）。

如果您希望您的内容脚本也可以与您的背景页面进行交流（因为您的工作更复杂，所以不需要）可以将onRequest.addListener添加到您的后台页面，该页面只侦听来自内容脚本的请求。为此，消息传递可以完美地解释它。 sender.tab如果为true，则为内容脚本。下面的例子（未经测试）显示了我的意思是关于消息传递。请记住，尽量保持简单而不复杂。

示例

Popup.html

  chrome.tabs.getSelected（null，function（tab）{
 chrome.tabs.sendRequest（tab.id，{method： fromPopup，tabid：tab.id}，function（response）{
 console.log（response.data）; 
}）; 
}）; 
  

ContentScript.js

  chrome.extension.onRequest.addListener（function（request，sender，sendResponse）{
 if（request.method ==fromPopup）{
 //将JSON数据发送回弹出。
 sendResponse（{data：从Content Script到Popup}）; 
 
 //发送JSON数据到背景页面
 chrome.extension.sendRequest（{method ：fromContentScript}，function（response）{
 console.log（response.data）; 
}）; 
} else {
 sendResponse（{}）; //将它们贬低
} 
}）; 
  

BackgroundPage.html

  chrome.extension.onRequest.addListener（function（request，sender，sendResponse）{
 // From content script。
 if（sender.tab）{
 if（ request.method ==fromContentScript）
 sendResponse（{data：来自后台页面的响应}）; 
 else 
 sendResponse（{}）; //对它们进行缓存
} 
}）; 
  

In my extension, when a button named mybuttonl in popup.html is clicked, it sends a message "getvar" to contentscript.js, which in turn sends a message "I want var1" to background.html to get an object named var1. (A button named mybutton2 is set up likewise, except it gets the var2 object when clicked).

How should I implement this?

What's more, I am a little confused about the chrome.extension.onRequest.addListener and chrome.extension.sendRequest methods. Could someone please explain?

解决方案

onRequest.addListener and sendRequest is part of Chrome's extension Messaging. Which is located here http://developer.chrome.com/extensions/messaging.html

Basically, you listen for a request using "onRequest.addListener" that someone sent from triggering a "sendRequest".

In your case, you put a "onRequest.addListener" in your content script to listen for requests coming from the Popup (using sendRequest). And from your content script, you can return a response back to your popup to handle what is happening. In your popup, you have direct access to the background page using chrome.extension.getBackgroundPage().

If you want your content script to communicate to your background page as well (which is not needed since your making stuff more complicated), you can add a "onRequest.addListener" to your background page which only listens for requests coming from the content script. To do that, Message Passing explains it perfectly. "sender.tab" if true, is a content script.

The example below (untested) shows what I mean about message passing. Remember, try to keep stuff simple, not complex.

Example

Popup.html

chrome.tabs.getSelected(null, function(tab) {
  chrome.tabs.sendRequest(tab.id, {method: "fromPopup", tabid: tab.id}, function(response) {
    console.log(response.data);
  });
});

ContentScript.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method == "fromPopup") {
    // Send JSON data back to Popup.
    sendResponse({data: "from Content Script to Popup"});

    // Send JSON data to background page.
    chrome.extension.sendRequest({method: "fromContentScript"}, function(response) {
      console.log(response.data);
    });
  } else {
    sendResponse({}); // snub them.
  }
});

BackgroundPage.html

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  // From content script.
  if (sender.tab) {
    if (request.method == "fromContentScript")
      sendResponse({data: "Response from Background Page"});
    else
      sendResponse({}); // snub them.
  }
});

这篇关于关于在bg.html，popup.html和contentscript.js之间发送消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！