Chrome 扩展程序“接收端不存在”。错误

Question

我正在开发 Chrome 扩展程序，但最近我注意到我收到了以下错误（指向 的第一行popup.html）：

未经检查的 runtime.lastError: 无法建立连接。接收端不存在。

我在这里找到了一个类似的问题。但是那里的错误是由background我没有在清单上声明的属性引起的。

我chrome.extension.onMessage.addListener在contents.js脚本上使用来侦听事件并chrome.tabs.sendMessage在popup.js脚本上使用来发送事件。大多数情况下一切正常，但有时我会收到上述错误并且没有任何请求执行任何操作。

其manifest.json格式如下：

{
    "manifest_version": 2,
    "name": "APP_NAME",
    "description": "APP_DESCRIPTION",
    "version": "APP_VERSION",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "activeTab",
        "storage",
        "clipboardRead",
        "clipboardWrite"
    ],
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "content.js"
            ],
            "css": [
                "content.css"
            ]
        }
    ]
}

消息侦听器示例：

{
    "manifest_version": 2,
    "name": "APP_NAME",
    "description": "APP_DESCRIPTION",
    "version": "APP_VERSION",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "activeTab",
        "storage",
        "clipboardRead",
        "clipboardWrite"
    ],
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "content.js"
            ],
            "css": [
                "content.css"
            ]
        }
    ]
}

消息发送者示例：

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "this") console.log({
    dom: doThis()
  });
  if (request.action === "that") sendResponse({
    dom: doThat()
  });
  else if (request.action === "other") doOther();
  else sendResponse({});
});

发送请求调用示例：

function getSelectedTab() {
  return new Promise(function(resolve) {
    chrome.tabs.getSelected(null, resolve);
  });
}

function sendRequest(data) {
  data = data || {
    action: undefined
  };
  return new Promise(function(resolve) {
    getSelectedTab().then(function(tab) {
      chrome.tabs.sendMessage(tab.id, data, resolve);
    });
  });
}

Answer 1

我不确定我的回答是否适用于给定的情况，但是如果您阅读它，您会遇到这种问题，并且我的回答可能会对您有所帮助。

我花了很多时间，试图理解为什么它有时会抛出这个错误，而我在开发版本上工作，而不是我的扩展的发布版本。然后我明白了，在每次保存代码后，它都会在 chrome 上更新，并创建脚本的新内容版本。因此，如果您不重新加载页面，即您使用先前版本的代码创建 context.js 并使用更新版本再次尝试，则会引发此错误。

我有点浪费了大约一整天的时间来弄清楚，这很简单，但是关于这个案例，stackoverflow 中有很多答案，所以你曾经尝试过，而不是用你的大脑思考。不要像我一样：）