Javascript按钮单击在Chrome扩展弹出窗口中不起作用

Javascript Button onClick not working in Chrome extension popup

本文关键字：窗口 不起作用 扩展 按钮 单击 Chrome Javascript      更新时间：2023-10-06

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

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

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

popup.js中定义的toggleActive可以向background.js发送消息，在那里侦听器将调用后台的toggleActive，也可以使用chrome.runtime.getBackgroundPage或chrome.extension.getBackgroundPage（前者是异步的，后者是同步的，返回后台的窗口对象）获取后台页面，并从这里调用后台toggleActive，如下所示：

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

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

我认为你应该这样做：

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

点击后你忘记了括号。

相关文章：