内容脚本可以连接到后台脚本,但popup.js无法连接到内容脚本

时间:2017-04-01 21:21:00

标签: javascript google-chrome google-chrome-extension message-passing

在我的代码中,我目前有一个内容脚本,它将消息发送到后台脚本,并作为响应创建一个警报。访问example.js时,这适用于background.jshttps://www.google.com。但是,在尝试在popup.js和我的内容脚本之间建立通信时,我收到错误消息

Could not establish connection. Receiving end does not exist.

我目前拥有的是一旦点击弹出窗口上的按钮,我就会从popup.js发送消息。然后,应该从内容脚本example.js显示控制台消息,但它似乎甚至没有到达内容脚本的监听器。这是代码,

popup.js:

window.onload=function(){
    document.getElementById('highlight').addEventListener('click', sendHighlightMessage, false);
}

function sendHighlightMessage() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    console.log("going through tabs " + tabs[0].url); //this actually occurs

      chrome.tabs.sendMessage(tabs[0].id, {highlight: true}, function(response) {
        if (chrome.runtime.lastError) {
          // An error occurred :(
          console.log("ERROR: ", chrome.runtime.lastError);
        }
        else{
          console.log(response.message);
        }
      });
  });  
}

example.js:

chrome.runtime.sendMessage('Hello World');
chrome.tabs.onMessage.addListener(function(response, sender, sendResponse){
  console.log("received " + response); //never gets to this point
  sendResponse({message : "Response Received"});
});

background.js:

chrome.runtime.onMessage.addListener(function(response, sender, sendResponse){
  alert(response);
});
chrome.tabs.onMessage.addListener(function(response, sender, sendResponse){
 console.log("received " + response);
 sendResponse({message : "Response Received"});
});

我已经尝试了很多答案,但到目前为止似乎都没有。

1 个答案:

答案 0 :(得分:-3)

Popups脚本的设计不能直接与内容脚本对话,您必须通过后台脚本发送消息才能完成此任务。

让您的弹出窗口首先将消息发送到后台页面,让后台页面向特定内容脚本发送另一条消息。让您的内容脚本从后台页面监听事件。