时间戳

首页 > 解决方案 > 未选中 runtime.lastError: 无法建立连接。接收端不存在。Chrome 扩展程序

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

问题描述

我正在尝试从内容页面接收一些信息到 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 函数，但正如您在上面看到的，但它仍然给我相同的错误消息。

标签： javascriptgoogle-chrome-extension

解决方案

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

扩展的每个部分都有自己的 devtools。
打开后台脚本的devtools，你会看到错误。

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

PS 整个代码可以通过切换到程序注入来简化（示例），这样您就可以删除content_scripts、后台脚本和消息传递。

推荐阅读