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

时间:2018-06-15 18:51:41

标签: javascript jquery button google-chrome-extension

所以我有一个在网站上运行的脚本,并根据某些参数收集一些数据,这些数据本身完全正常,但是我希望能够在其中有一个带有单个按钮的browserAction弹出窗口,单击该按钮将触发上述脚本。

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

这是我的代码: 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() { ... }

一切都按照我的意愿完成。

我如何正确实施按钮?

1 个答案:

答案 0 :(得分:0)

您需要在弹出窗口中使用Javascript添加on click事件侦听器,而不是在html中定义内联事件。

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