chrome扩展中popup.html和popup.js之间的函数JavaScript（考虑到来自后台的消息）[重复]
Posted
技术标签:
【中文标题】chrome扩展中popup.html和popup.js之间的函数JavaScript（考虑到来自后台的消息）[重复]【英文标题】：Function JavaScript between popup.html and popup.js in chrome extension (taking into account message from Background) [duplicate] 【发布时间】：2017-09-17 13:24:28 【问题描述】：我想通过单击 innerhtml 中的按钮来执行 chrome 扩展（在 popup.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)
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) 按钮执行功能。但里面没有。
【问题讨论】：
控制台有错误吗？ Chrome 应该在 chrome://extensions 中有一个错误按钮。 这可能是因为你不能在扩展中使用任何内联js（onclick="toto()"）。我认为这就是您正在寻找的答案。 ***.com/a/13592045 多个问题。因此，多个重复：pure javascript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it、$(document).ready equivalent without jQuery 和 onClick within Chrome Extension not working 如果事实不一样，因为我的问题发生在 chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) @JeremyBergeret，很好，您已经更新了问题，使其不再与处理代码运行时页面未准备好的问题的两个问题重复（即不等待DOMContentLoaded)。最重要的是，编辑并没有使您已有的答案无效，因为该答案解决了尝试使用内联 onclick 属性的问题，这也是第三个重复地址。但是，请不要暗示我们根据当时存在的问题和代码（即在您编辑之前）采取行动是错误的。
【参考方案1】：
我建议使用 JavaScript DOM 函数而不是 html onclick 属性来附加该函数。 Chrome 扩展不允许 HTML 中的内联 javascript，请参阅 this SO question 和 Chrome 开发人员文档 here。如果你给按钮一个方便的句柄，比如 id 并使用 .addClickListener() 代替呢？
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");
另外值得注意的是，您可能希望将 <script> 标记移动到 <body> 的末尾，或者给它一个 async 属性，因为根据脚本标记的位置，#panier_container 可能不会尚未加载，请参阅the first answer here 了解浏览器如何解释脚本标签。
【讨论】：
感谢您的回答，我只是纠正我的第一个问题，因为当我在 chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) 如果使用内联 HTMLonclick 处理程序无法解决为什么，这个答案会更好（有关更多信息，请参阅第 3 份副本）。
@Makyen，我在第三个副本中没有找到解决方案（Chrome 扩展程序中的 onClick 不起作用）。我更正了我的代码，并在点击时输入了一个 ID。但是在 chrome.runtime.onmessage.addlistener 里面，我看到了弹出窗口上的按钮，但是如果我点击什么也没发生。如果我将相同的按钮放在 chrome.runtime.onmessage.addlistener 之外，当我单击按钮时就会发生。事实上我不明白为什么它不工作，因为加载了 dom，我把 document.addEventListener('DOMContentLoaded', function()
@JeremyBergeret，正如第三次重复和The Chrome extension popup is not working, click events are not handled（以及更多问题）中所解释的，您不能使用内联 JavaScript，包括像 <button onclick="toto()"> TOTO </button> 这样的 HTML。这是行不通的。 Chrome 会报错。如果您正在查看console for the popup，您会看到说明这一点的错误。您需要使用 addEventListener() 从 JavaScript 添加事件侦听器
我已经这样做了：删除 onclick 并替换为“id”。我还添加了 EventListerner。我将在另一个主题中问我的问题，因为我现在的问题与第一个不同以上是关于chrome扩展中popup.html和popup.js之间的函数JavaScript（考虑到来自后台的消息）[重复]的主要内容，如果未能解决你的问题，请参考以下文章
Chrome 扩展如何将数据从内容脚本发送到 popup.html