Javascript Button 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是一种内联脚本，所以在popup中是禁止的。

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

toggleActive 定义在 popup.js 中可以发送消息到 background.js，其中监听器将调用后台的 toggleActive，或者你可以通过 chrome.runtime.getBackgroundPage 或 chrome.extension.getBackgroundPage (前者是异步的，后者是同步的，返回背景的窗口对象)并调用你的背景toggleActive 从这里，像这样:

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

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