JavaScript按钮onClick在Chrome扩展程序弹出窗口中不起作用

Question

（链接到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); 。 我将如何使按钮正常工作？

Answer 1

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

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

toggleActive定义的toggleActive可以将消息发送到background.js，侦听器将在其中调用背景的toggleActive ，或者您可以使用chrome.runtime.getBackgroundPage或chrome.extension.getBackgroundPage获取背景页面（前者是异步的，后者是同步的，返回背景的窗口对象）， toggleActive从此处调用背景toggleActive ，如下所示：

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

也就是说，如果您确实需要在后台而不是弹出窗口中定义toggleActive。

Answer 2

我认为您应该这样做：

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

单击onclick后，您会忘记括号。