弹出脚本未从后台脚本接收消息

时间:2017-07-14 20:14:10

标签: javascript html google-chrome google-chrome-extension popup

我一直试图解决这个问题一段时间,而我根本无法自己做 - 我已经在stackoverflow上查看了很多相关的帖子,而且我已经看过了。我已多次阅读并重新阅读文档但我必须缺少某些内容。此脚本的目标是在用户按下弹出窗口中的按钮时将消息传递给后台脚本。然后,后台脚本向弹出脚本和内容脚本发送消息,其中包含两个脚本都需要的数据。到目前为止,后台脚本确实接收到消息并且它成功地向非弹出内容脚本发送消息,但是我的弹出脚本什么也没有。

有问题的代码:

background.js

important_string = "hi"; 
important_boolean = false;

function popupMessageHandler(request, sender, sendResponse){
  console.log("Message from the popup script: " + request.greeting);
  if((important_boolean && request.greeting == "click-onoff")     || 
    (!important_boolean && request.greeting == "popup-activated") ){
    important_boolean = false;
    chrome.browserAction.setIcon({path: "../icons/on-32.png"}); 
  }
  else if((!important_boolean && request.greeting == "click-onoff")    || 
          (important_boolean && request.greeting == "popup-activated") ){
    important_boolean = true;
    chrome.browserAction.setIcon({path: "../icons/off-32.png"});
  }

  if(request.greeting == "popup-activated" || request.greeting == "click-onoff"){
    console.log("Received: " + request.greeting + ", sent a response"); 
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, {greeting: "I've responded!", impString: important_string, impBoolean: important_boolean});
    });
  }
}


chrome.runtime.onMessage.addListener(popupMessageHandler);

popup.js (为简洁起见,省略了重要字符串和布尔值的实际用法)

var button_onoff = document.getElementById('button_onoff');

important_string = "hi";
important_boolean = false;

// When popup loads, send message to background script to get some data
chrome.runtime.sendMessage({greeting: "popup-activated"});

// When button is clicked, do stuff 
button_onoff.addEventListener('click', function(event) {
  console.log("Button was clicked!");

  chrome.runtime.sendMessage({greeting: "click-onoff"});
});

chrome.runtime.onMessage.addListener(request => {
  console.log("Heard response!");
  important_boolean = request.impBoolean;
  important_string = request.impString;
  onResponse();
  return true;
});

function onResponse(request, sender, sendResponse) {
  console.log("Popup received a repsonse!");
  if(request.greeting == "I've responded!"){
    console.log("Response from the background script: " + request.greeting);
    important_string = request.impString;
    important_boolean = request.impBoolean;
    // Do things with important_string and important_boolean
  }
  return true;
}

content.js

important_boolean = false;

chrome.runtime.onMessage.addListener(request => {
  important_boolean = request.impBoolean;
  important();
  return true;
});


function important() {
   // Do important things with important string and boolean
}

的manifest.json

{
  "manifest_version": 2,
  "name": "Extension",
  "version": "1.0",


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

  "background": {
    "scripts": ["background.js"]
  },

  "content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "run_at": "document_end"
  }
  ],

  "browser_action": {
    "default_icon": "icons/off-32.png",
    "default_title": "Popup",
    "default_popup": "popup/popup.html"
  }
}

popup.html (以防万一需要)

<!DOCTYPE html>

<html>

  <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <link href="popup.css" rel="stylesheet" type="text/css">
    <title>Title</title>
  </head>

  <body>
    <div class="main_popup">
    <a id="button_onoff" class="buttonGreen" title="Clickable Button">Clickable Button</a>
    <script src="popup.js"></script>
    <div id="important_string" class="textIP">Displayed Text</div>
  </div>  
  </body>

</html>

显然有样式表,但我怀疑它是否相关。

希望我已经提供了足够的信息来获得帮助,这个问题非常令人沮丧......

重申一下,按下可点击按钮&#39;成功执行了重要的()&#39;功能在我的内容脚本中,但不是&#39; onResponse()&#39;我的弹出脚本中的函数

0 个答案:

没有答案