Chrome扩展程序：chrome.runtime.onMessage.addListener中的函数

Question

几天来，我遇到了一个问题，该问题涉及无法执行功能的.js脚本中的按钮。

这是我在popup.html代码：

<html>
<head>
<script src="popup.js"></script>
</head>

<body>
<div id="panier_container"> </div>
</body>

</html>

这是我在popup.js代码：

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {

//Message en provenance du background
if (msg.text === 'panier') {
var panier_container = document.getElementById("panier_container");
panier_container.innerHTML ="<button id=\"totoButton\"> Affiche TOTO    </button>";
 }   

});

//Fonction toto
function toto() {
    alert("toto");
}

document.addEventListener('DOMContentLoaded', function() {
document.getElementById("totoButton").addEventListener("click", toto);
});

执行代码时，我会在弹出窗口中看到按钮，但是当我单击按钮时，什么也没有发生。 有关信息， msg来自我的background.js 。

但是，如果我在popup.js编写此代码，一切正常：

var panier_container = document.getElementById("panier_container");
panier_container.innerHTML ="<button id=\"totoButton\"> Affiche TOTO </button>";

//Fonction toto
function toto() {
    alert("toto");
}

document.addEventListener('DOMContentLoaded', function() {
document.getElementById("totoButton").addEventListener("click", toto);
});

有了这段代码，我看到了按钮，当我单击它时，我看到了toto （该函数已执行）。

您知道为什么循环chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {的按钮不执行toto函数吗？

Answer 1

为popup.js尝试以下操作：

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {

//Fonction toto
function toto() {
    alert("toto");
}

//Message en provenance du background
if (msg.text === 'panier') {
var panier_container = document.getElementById("panier_container");
panier_container.innerHTML ="<button id=\"totoButton\"> Affiche TOTO    </button>";  //create the button
document.getElementById("totoButton").addEventListener("click", toto);  //attach listener to button just created.
 }   

});

您的代码document.getElementById("totoButton").addEventListener("click", toto); 在实际元素存在之前被调用，因为该元素将在收到消息后创建。