Google chrome extension 未从chrome extension的content.js网页接收任何数据

我试图发送一条消息，从一个按钮点击，甚至在我的网站，这是在一个标签打开的铬扩展

但是，我无法从网页中获取任何消息，并且我得到了一个端口错误

My content.js：

var port = chrome.extension.connect();

port.onMessage.addEventListener("message", function(event) {
    // We only accept messages from ourselves
    if (event.source != window)
      return;

    if (event.data.type && (event.data.type == "FROM_PAGE")) {
      console.log("Content script received: " + event.data.text);
      port.postMessage(event.data.text);
    }
}, false);


chrome.tabs.onMessage.addListener(function(tabId, changeInfo, tab) {
  alert(changeInfo);
}); 

Popup.js

    $("#linkify").click(function() {
        chrome.tabs.create({
            'url': 'http://localhost:3000/signin'
        }, function(tab) {
            // Tab opened.
            chrome.tabs.executeScript(tab.id, {
                file: "jquery.js"
            }, function() {
                console.log('all injected');
                chrome.tabs.executeScript(tab.id, {
                    file: "content.js"
                }, function() {
                    console.log('all injected');
                    chrome.tabs.sendMessage(tab.id, function() {
                        console.log('all injected');
                    });
                });
            });
        });
        //getlink();
    });
});


function checkUserAuth() {
    console.log(localStorage.getItem("apiKey"));
    if (localStorage.getItem("apiKey") != null) {
        document.getElementById('openBackgroundWindow').style.visibility = 'hidden';
    }
}

var port = chrome.extension.connect({
    name: "Sample Communication"
});
port.postMessage("Hi BackGround");
port.onMessage.addListener(function(msg) {
    console.log("message recieved" + msg);
});

My background.js

chrome.extension.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");

  });

从web url发送消息的脚本：

document.getElementById("theButton").addEventListener("click", function() {
    console.log("message being sent");
    window.postMessage({ type: "FROM_PAGE", text: "Hello from the webpage!" }, "*");
}, false);

---

我没有收到任何消息，这哪里出了问题？

在对脚本进行了一些更改后，我让它运行了：）

此问题涉及从

扩展页-->背景

，

内容页-->背景

，

扩展页-->内容页

目标页面的输出（在我的例子中是

http://www.google.co.in/

对您来说，它是

http://localhost:3000/signin

）

从popup.js输出

来自background.js的输出

我为

var port=chrome.extension.connect（{name:“Sample Communication”}）添加了一个连接侦听器background.js中的popup.js中的code>code解决了
接收端不存在的问题

background.js

通过查找
选项卡，在创建新选项卡时消除了脚本注入，并在选项卡状态完成后注入脚本。onUpdate
侦听器

popup.js

从网页中删除了
window.postMessage（）
，并插入了一个自定义脚本，以便在单击按钮时将消息发送到popup.js（这里我选择了google徽标）

content.js

linkify
按钮类似于登录按钮的示例页面

popup.html

有句谚语说，如果你给一个人一条鱼，他会被喂一天。教他钓鱼，他就会被喂上一辈子。换句话说，展示一堵代码墙有助于OP一次，而解释对他（和其他人！）非常有帮助。你能解释一下OPs代码失败的原因，以及你做了什么来修复它吗？@RobW：我想知道在对每一段代码进行解释之后，它现在看起来有多漂亮，感谢你提供的建议和鼓励。解释让答案变得更好：）而不是发布大量代码（我看到了你的许多答案），你能回答核心问题吗？拥有一个完整的扩展是OP的一个很好的演示，但是对于其他人来说，很难在其中找到解决方案。如果您真的想发布完整的扩展，请继续，但请在答案的顶部发布问题和解决方案的总结。（这些只是一些让你的答案更棒的提示）@RobW:当然，我一定会这么做的。。再次感谢您提出的这些很酷的建议：）。。。
chrome.extension.onConnect.addListener(function(port) {
    port.onMessage.addListener(function(content) {
        console.log("Connected ..." + content);
    });
});
chrome.extension.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
        "from a content script:" + sender.tab.url :
        "from the extension");
});

flag = false;
function customFunction() {
    chrome.tabs.create({
        'url': 'http://www.google.co.in/'
    }, function(tab) {
        flag = true;
        // Tab opened.
    });
}

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (flag) {
        if (changeInfo.status === 'complete') {
            console.log("Inject is called");
            injectScript(tab);
        }
    }
});

function injectScript(tab) {
    chrome.tabs.executeScript(tab.id, {
        file: "jquery.js",
        "runAt": "document_start"
    }, function() {
        console.log('all injected');
        chrome.tabs.executeScript(tab.id, {
            file: "content.js",
            "runAt": "document_start"
        }, function() {
            console.log('all injected');
            chrome.tabs.sendMessage(tab.id, function() {
                console.log('all injected');
            });
        });
    });
}

window.onload = function() {
    document.getElementById("linkify").onclick = customFunction;
};

var port = chrome.extension.connect({
    name: "Sample Communication"
});
port.postMessage("Hi BackGround");
port.onMessage.addListener(function(msg) {
    console.log("message recieved" + msg);
});

function bindFunction() {
    console.log("message being sent");
    chrome.extension.sendMessage({ type: "FROM_PAGE", text: "Hello from the webpage!" });
}

window.onload = function() {
    document.getElementById("hplogo").onclick = bindFunction;
};

<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<button id="linkify">Linkify</button>
</body>
</html>

{
  "name": "Complex Calls",
  "description": "Complex Calls Demo",
  "manifest_version": 2,
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": "screen.png"
  },
  "permissions": [
    "tabs", "<all_urls>"
  ],
  "version": "1"
}