未选中 runtime.lastError: 无法建立连接。接收端不存在。 Chrome 扩展程序

Question

我正在尝试从内容页面接收一些信息到 chrome 扩展中的弹出页面。

这是我的 manifest.json：

{
  "name": " Downloader",
  "description": "history ",
  "version": "1.0",
  "permissions": [
    "activeTab",
    "notifications"
  ],
  "background": {
    "persistent": false,
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
    "all_frames": false,
    "matches": ["<all_urls>"],
    "exclude_matches": [],
      "js": [
        "/src/jquery.js",
        "/src/sheet-min.js",
        "/src/file-saver-min.js"
      ]

      // "css": [
      //   "js/content/page.css"
      // ]
    }
  ],
  "content_scripts": [{
    "matches": ["*://*.ebay.com/*"],
    "js": ["content.js"],
    "run_at": "document_idle",
    "all_frames": false
  }],
  "browser_action": {
      "default_title": "Download History.",
      "default_icon": "icon.png",
      "default_popup": "popup.html"
  },
  "manifest_version": 2
}

background.js

  chrome.runtime.onMessage.addListener((msg, sender) => {
    // First, validate the message's structure.
    if ((msg.from === 'content') && (msg.subject === 'showPageAction')) {
      // Enable the page-action for the requesting tab.
      chrome.browserAction.show(sender.tab.id);
    }
  });

content.js

// Inform the background page that 
// this tab should have a page-action.
function ping() {
  chrome.runtime.sendMessage('ping', response => {
    if(chrome.runtime.lastError) {
      setTimeout(ping, 1000);
    } else {
      chrome.runtime.sendMessage({
        from: 'content',
        subject: 'showPageAction',
      });
    }
  });
}

ping();


  // Listen for messages from the popup.
  chrome.runtime.onMessage.addListener((msg, sender, response) => {
    // First, validate the message's structure.
    if ((msg.from === 'popup') && (msg.subject === 'DOMInfo')) {
      // Collect the necessary data. 
      // (For your specific requirements `document.querySelectorAll(...)`
      //  should be equivalent to jquery's `$(...)`.)
      var domInfo = {
        total: document.querySelectorAll('*').length,
        inputs: document.querySelectorAll('input').length,
        buttons: document.querySelectorAll('button').length,
      };

      // Directly respond to the sender (popup), 
      // through the specified callback.
      response(domInfo);
    }
  });

popup.js

const setDOMInfo = info => {
    console.log(info)
};


window.addEventListener('DOMContentLoaded', () => {
    // ...query for the active tab...
    chrome.tabs.query({
      active: true,
      currentWindow: true
    }, tabs => {
      // ...and send a request for the DOM info...
      chrome.tabs.sendMessage(
          tabs[0].id,
          {from: 'popup', subject: 'DOMInfo'},
          // ...also specifying a callback to be called 
          //    from the receiving end (content script).
          setDOMInfo);
    });
  });

我知道当内容脚本向后台脚本发送消息但后台脚本尚未准备好接收消息时会发生此错误。在 stackoverflow 上寻找解决方案后，我决定使用 ping 函数，但正如您在上面看到的，但它仍然给我相同的错误消息。

Answer 1

正如您在documentation 中看到的那样，没有 chrome.browserAction.show，因此 background.js 中的侦听器会抛出并中止执行。消息传递周期永远不会完成，因此对于发送者来说，它看起来就像没有任何接收者一样。

扩展的每个部分都有其own devtools。
打开devtools for the background script，你会看到错误。

这里不需要后台脚本。
也不需要showPageAction 消息，因为 browser_action 默认启用。

附：通过切换到编程注入 (example) 可以简化整个代码，这样您就可以删除 content_scripts、后台脚本和消息传递。