从扩展后台或弹出框到内容脚本的sendMessage不起作用


86

我知道这个问题已经以不同的方式反复提出,但是我尝试遍历所有答案(希望我没有错过任何人),但没有一个对我有用。

这是我的扩展程序代码:

表现:

{
"name": "test",
"version": "1.1",
"background": 
{ 
    "scripts": ["contextMenus.js"]
},

"permissions": ["tabs", "<all_urls>", "contextMenus"],

"content_scripts" : [
    {
        "matches" : [ "http://*/*" ],
        "js": ["jquery-1.8.3.js", "jquery-ui.js"],
        "css": [ "jquery-ui.css" ],
        "js": ["openDialog.js"]
    }
],

"manifest_version": 2
}

contextMenus.js

function onClickHandler(info, tab) {
    if (info.menuItemId == "line1"){

      alert("You have selected: " + info.selectionText);

      chrome.extension.sendMessage({action:'open_dialog_box'}, function(){});

      alert("Req sent?");

    }
}

chrome.contextMenus.onClicked.addListener(onClickHandler);

chrome.runtime.onInstalled.addListener(function() {

  chrome.contextMenus.create({"id": "line1", "type": "normal", "title": "I'm line 1",     "contexts":["selection"]});

});

openDialog.js

chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {

  if (msg.action == 'open_dialog_box') {
    alert("Message recieved!");
  }
});

后台页面的两个警报起作用,而content_script之一则不起作用。

控制台日志的消息:端口错误:无法建立连接。接收端不存在。

我的错在哪里


您应该使用chrome.tabs.sendMessage()而不是将消息发送到内容脚本chrome.extension.sendMessage()
apsillers 2013年

Answers:


141

在背景页面中,您应该致电

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, {action: "open_dialog_box"}, function(response) {});  
});

而不是chrome.extension.sendMessage像现在这样使用。

chrome.tabs变体将消息发送到内容脚本,而该chrome.extension函数将消息发送到所有其他扩展组件。


6
谢谢。正确,只是chrome.tabs.sendMessage 必须指定将其发送到哪个标签。因此解决方案更改为:chrome.tabs.query({active: true}, function(tabs){ chrome.tabs.sendMessage(tab.id, {action: "open_dialog_box"}, function(response) { }); });
地铁

1
这个答案帮助了我。非常感谢您提供这个有用的答案。
Touhid 2014年

13
在content-script.js上应该写些什么呢?
库沙尔·in那

5
@KushalJain我刚刚弄清楚了。在内容脚本JS文件中,您需要添加一个事件侦听器,如下所示:chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => { /* Code Here */ } ); message是包含{ action: "open_dialog_box" }或发送的参数的参数。sender是包含您的Chrome扩展程序ID的对象。sendResponse是包含该参数的参数,function(response) {}或您传递消息后要调用的任何函数。
jsea

5
此解决方案对我不起作用。我正严格按照文档操作,我从developer.chrome.com/extensions/messaging复制了所有代码。这是一个非常简单的示例,但无法正确完成。出现错误无法建立连接。接收端不存在。任何想法
-umsateesh

0

@apsillers是正确的。另外,不要忘记在内容脚本侦听器中返回true,否则它可能关闭得太早。

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    console.log(message)
    return true
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.