在chrome扩展中popup.html和popup.js之间的函数JavaScript（考虑来自Backrgound的消息）


Function JavaScript between popup.html and popup.js in chrome extension (taking into account message from Backrgound)

本问题已经有最佳答案，请猛点这里访问。

我想通过点击一个innerhtml中的按钮来执行chrome扩展中的函数(在popup.js中)。

popup.html中的代码是：

1
2
3
4
5
6
7
8
9
<html>
    <head>
        <script src="popup.js">
    </head>

    <body>
         
    </body>
</html>

popup.js中的我的代码：

1
2
3
4
5
6
7
8
9
10
11
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
    if (msg.text === 'results') {
        var panier_container = document.getElementById("panier_container");
        var texte ="<button onclick="toto()"> TOTO </button>";
        panier_container.innerHTML = texte;
     });
});

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

当我执行代码时，我看到了按钮"toto"，但是当我点击按钮时，什么都没有发生。在chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {中，按钮执行功能。但里面没有。

你有主意吗？

相关讨论

我建议使用javascript dom函数而不是html onclick属性来附加函数。chrome扩展不允许在HTML中使用内联javascript，请参阅下面的问题和chrome开发人员文档。如果你给按钮一个类似ID的方便手柄，用.addClickListener()代替它，会怎么样？

1
2
3
4
5
6
7
8
var panier_container = document.getElementById("panier_container");
var texte ="<button id='totoButton'> TOTO </button>";
panier_container.innerHTML = texte;
document.getElementById("totoButton").addEventListener("click", toto);

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

同样值得注意的是，您可能希望将您的标记移动到的末尾，或者给它一个async属性，因为根据脚本标记的位置，#panier_container可能还没有加载，请参阅这里的第一个答案以了解浏览器如何解释脚本标记。

相关讨论