background.js和内容脚本之间的通信？ 响应未定义

Question

从内容脚本：

chrome.runtime.sendMessage({ type: "getFormatOption" }, function (response) {
    return response === 'csv';
});

我已经在控制台中进行了检查：background.js方法的SendResponse（）中使用的值确定。 问题在于，响应始终是不确定的。 我究竟做错了什么？

background.js：

chrome.runtime.onMessage.addListener(
    function (message, sender, sendResponse) {
        switch (message.type) {
            case 'getFormatOption':
                var response = $('input[name=csvOrEnter_radio]:checked', '#csvOrEnter_form').val();
                console.log('formatOption: ' + response);
                sendResponse(response);
                break;
            case 'getFilteringStrategy':
                var response = $('input[name=filteringStrategy_radio]:checked', '#filteringStrategy_form').val();
                console.log('filteringStrategy: ' + response);
                sendResponse(response);
                break;
            default:
                console.error('Unrecognised message: ', message);
        }
    }
);

我从插件popup.html的单选按钮中获取一些值的想法。

表现：

   {
  // default for the latest version of Chrome extensions
  "manifest_version": 2,

  // extension related general info
  "name": "FB Interest Search Tool",
  "short_name": "FB Interest Search Tool",
  "description": "FB Interest Search Tool",
  "version": "1.0.0",

  "default_locale": "en",

  // sets path to popup files
  "browser_action": {
    "default_icon": "img/128.png",
    "default_popup": "popups/popup.html",
    "default_title": "FB Interest Search Tool"
  },

  // sets path to content scripts and when they are injected onto the page
  "content_scripts": [
    {
      "matches": [ "http://*/*", "https://*/*" ],
      "css": [ "styles/styles.css" ],
      "js": [
        "bower_components/jquery.min.js",
        "bower_components/jquery.cookie.js"
      ]
    }
  ],

  // sets path to background scripts
  "background": {
    "scripts": [
      "bower_components/jquery.min.js",
      "bower_components/jquery.cookie.js",
      "bg/background.js",
      "content-scripts/rewriteStorage.js"
    ]
  },

  "permissions": [
    "activeTab",
    "http://*/",
    "https://*/",
    "file:///*/*",
    "<all_urls>",
    "tabs",
    "storage",
    "unlimitedStorage",
    "storage",
    "cookies"
  ],

  "web_accessible_resources": [ "styles/commentblocker_on.css" ]
}

Answer 1

问题1：它称为background.js 。

我什至没有开玩笑。 _{好吧，也许一点。}

由于它既包含在弹出窗口中，又作为后台脚本包含，因此注册了2个消息侦听器。 而且只有一个人可以回答 ：

注意：如果多个页面正在侦听onMessage事件，则只有第一个为特定事件调用sendResponse()用户才能成功发送响应。 对该事件的所有其他响应将被忽略。

猜猜哪个先回答？ 我的赌注是背景，因为它首先注册了侦听器。

如果您尝试调试，尽管仍然在弹出窗口中看到侦听器执行，但是将忽略其sendResponse ，因为后台已经应答。

这很容易解决：制作一个副本，将其popup.js ，并且在两者中仅保留相关的逻辑。 除非您100％都需要在两个地方都运行代码，否则不要在两个地方都包含相同的文件。

问题2：弹出窗口是致命的。

当弹出窗口关闭时，它死了，吉姆。 它根本不存在：既没有侦听器，也没有单选按钮。 因此，它无法回答该消息。

要解决此问题，需要重新架构。 只有2个地方，可以提供存储，您可以随时查询是：

• 背景页面。 它需要以选定元素以外的其他方式保持状态，并且弹出窗口需要通知状态变化。
• chrome.storage API 。 弹出窗口和内容脚本都可以对其进行读取/写入。

对于选项，第二个更可取。