javascript - Chrome 扩展程序 - "Port error: Could not establish connection. Receiving end does not exist"

Question

尝试在我的background.js和contentscript.js之间进行通信

ma​​nifest.json

{
    "name": "xxx",
    "version": "0.1",
    "manifest_version": 2,

    "permissions": [
        "tabs"
    ],

    "description": "xxx",
    "icons": { "16": "icon16.png",
               "48": "icon48.png",
               "128": "icon128.png" },

    "browser_action": {
        "default_title" : "xxx",
        "default_icon": "icon16.png",
        "default_popup": "popup.html"
    },

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

    "content_scripts" : [
    {
        "matches" : [ "http://*/*" ],
        "js" : [ "contentscript.js", "jquery.js" ]
    }
  ]
}

背景.js

var listePdt = {};
var selectedPdt = null;
var selectedId = null;

function updatePdt(tabId)
{
    chrome.tabs.sendMessage(tabId, {}, function(pdt) {
            chrome.pageAction.show(tabId);
    });
}

chrome.tabs.onUpdated.addListener(function(tabId, change, tab) {
    if(change.status == "complete")
    updatePdt(tabId);
});

chrome.tabs.onSelectionChanged.addListener(function(tabId, info) {
    selectedId = tabId;
    // and other things
});

chrome.tabs.getSelected(null, function(tab) {
    updatePdt(tab.id);
});

contentscript.js

if(window == top)
{
    chrome.extension.onMessage.addListener(
        function(req, sender, sendResponse) {
            sendResponse(findPdt());
        }
    );
}

var findPdt = function() {

    // operations on a string

    return "string";
}

但是我在生成的后台页面的控制台中收到以下错误“端口错误:无法建立连接。接收端不存在”...不明白为什么。

有什么帮助吗？

Answer 1

值得注意的一件事是:

chrome.tabs.getSelected(null, function(tab) {
    updatePdt(tab.id);
});

目前已弃用(请参阅 here 和 here )，新方式如下所示(请注意，还包含 windowId: chrome.windows.WINDOW_ID_CURRENT 以考虑情况你打开了多个 Chrome 实例(我有很多，显然:))。

chrome.tabs.query(
  {windowId: chrome.windows.WINDOW_ID_CURRENT, active: true}, function(tab) {
  updatePdt(tab.id);
  } );

但是，对于您的主要问题，此(和 getSelected)都会抛出您在从 chrome:/加载扩展程序时看到的 Port 错误/extensions、新选项卡屏幕或任何其他“非标准”页面(书签、查看源代码、检查元素本身等)，所以我会忽略它们。使用您的代码，重新加载扩展程序，打开“检查元素”窗口，然后转到浏览器中的另一个选项卡并重新加载页面 - 您应该看到所需的操作已完成(我添加了一个 console.log(pdt); 调用作为 sendMessage 调用的一部分，并且返回了请求的值。换句话说，一切似乎都工作正常:)