Javascript Button onClick 在 Chrome 扩展弹出窗口中不起作用答案

【问题标题】：Javascript Button onClick not working in Chrome extension popupJavascript Button onClick 在 Chrome 扩展弹出窗口中不起作用
【发布时间】：2016-07-18 23:26:17
【问题描述】：

（链接到 git：https://github.com/Boundarybreaker/NameBlock）

我正在开发一个文本替换扩展程序，可以通过单击popup.html 中的按钮来打开和关闭它，但只有当我单击图标时才会发生这种情况。（视频：https://drive.google.com/file/d/0B_3pLT_KI8V8OHJFUHQ5a1JURkE/view?usp=sharing）

按钮的代码为<button class="ui fluid red button" onclick=toggleActive() id="toggle">Toggle Active</button>，toggleActive() 是background.js 中的一个函数，还有一个侦听器chrome.runtime.onMessage.addListener(toggleActive);。如何让按钮正常工作？

【问题讨论】：

标签： javascript html css google-chrome google-chrome-extension

【解决方案1】：

onclick 是一种内联脚本，因此在弹出窗口中是禁止的。

在你的 popup.js 中使用 myButton.addEventListener('click',toggleActive); 以任何通常的方式获取myButton，通过在其html中添加一个id并使用document.getElementById，或者通过getElementsByClassName, querySelectorAll或任何其他方式。

在popup.js 中定义的toggleActive 可以发送消息到background.js，监听器会调用background 的toggleActive，或者你可以使用chrome.runtime.getBackgroundPage 或chrome.extension.getBackgroundPage 获取背景页面（前者是异步的，后者是同步，返回背景的窗口对象）并从这里调用你的背景toggleActive，像这样：

var bkg=chrome.extenstion.getBackgroundPage(); bkg.toggleActive();

也就是说，如果你真的需要在后台而不是弹出窗口中定义你的 toggleActive。

【讨论】：

我尝试了 addEventListener 行，它有点工作。它不仅可以单击“切换活动”按钮，还可以单击扩展程序上的任意位置，这不是最佳选择。我会看看 getBackGround 页面是否有帮助。
抱歉，我在尝试尽可能简短地编辑答案时犯了一个错误。它应该是您要单击的控件，而不是文档本身，您要将侦听器添加到其中。我会编辑答案。

【解决方案2】：

我认为你应该这样做：

<button class="ui fluid red button" onclick="toggleActive()" id="toggle">Toggle Active</button>

onclick 后你忘记了括号。

【讨论】：