popup.html 和 content.js 之间的 Chrome 扩展消息传递答案

【问题标题】：Chrome extension messaging between popup.html and content.jspopup.html 和 content.js 之间的 Chrome 扩展消息传递
【发布时间】：2018-06-15 18:51:40
【问题描述】：

所以我有一个在网站上运行并根据某些参数收集一些数据的脚本，它本身工作得很好，但我希望能够有一个带有单个按钮的 browserAction 弹出窗口，点击将触发上述脚本。

我相信我的问题是我无法通过按下按钮来发送消息，我不知道如何实现这一点，而且我读过的 browserAction 教程也没有尝试过。

这是我的代码： popup.html

<html>
<body style="width: 200px; height: 150px;">
    <script src="background.js"></script>
    <div id="button" style="position:absolute; left: 75px;">
        <button id="mb" onclick="click()">Initialise</button>
    </div>
</body>
</html>

background.js

function click() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
        var activeTab = tabs[0];
        chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
    });
}

content.js

$(document).ready(function(){
    init();
    chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
        if(request.message === "clicked_browser_action"){
            popup();
        }
    })
});

我知道我的其余代码可以正常工作，因为我已经通过添加

对其进行了测试

browserAction.onClick.addListener(function(tab){ ... });

代替

function click() { ... }

一切都完全按照我的意愿进行。

如何正确实现按钮？

【问题讨论】：

移除 onclick 属性并在 js 文件中使用监听器。重新编写代码以正确反映扩展架构：后台页面是一个单独的隐藏页面，未连接到弹出窗口，因此弹出窗口不能直接使用 background.js（如果这样做，您误解了架构）。开始使用 devtools 调试器：弹出窗口有自己的 devtools，您可以通过右键单击弹出窗口来调用它，背景页面有自己的 devtools，也可以从 chrome://extensions 页面访问。正确使用 devtools 应该可以帮助您在几秒钟/几分钟内解决这些简单的问题。

标签： javascript jquery button google-chrome-extension

【解决方案1】：

您需要在弹出窗口中使用 Javascript 添加一个点击事件侦听器，而不是在 html 中内联定义事件。

document.getElementById("mb").addEventListener("click", function(e){
//event will trigger here
}

【讨论】：

我试过了，没用。还是同样的故事，一旦我按下按钮，什么也没有发生。
你是否创建了一个新的javascript文件，在