Chrome 扩展名。在弹出菜单中分配具有功能的按钮

Question

请帮忙！如何为弹出菜单中的按钮分配功能？

popup.html

<html>
<head>
<title>Common Messages for Intercom</title>
<script src="popup.js"></script>
</head>
<body>
<a href='#'>Message 1</a>
<br>
<a href='#'>Message 2</a>
</body>
</html>

popup.js

function Button1() {
  // Something
}

function Button2() {
  // Something
}

谢谢！

Answer 1

popup.html

<html>
<head>
<title>Common Messages for Intercom</title>

</head>
<body>
<a id="button1" href='#'>Message 1</a>
<br>
<a id="button2" href='#'>Message 2</a>
<script src="popup.js"></script>
</body>
</html>

popup.js

document.getElementById('button1').onclick = Button1;
document.getElementById('button2').onclick = Button2;

function Button1() {
  // Something
}

function Button2() {
  // Something
}

Answer 2

您需要能够识别您的元素。因此，给他们唯一的 ID：

<a href='#' id="btn1">Message 1</a>
<br>
<a href='#' id="btn2">Message 2</a>

您需要将函数绑定到 click 事件：

function Button1() {
  // Something
}

document.getElementById("btn1").addEventListener("click", Button1);

上面的代码还不能工作，因为它会在 DOM 构建之前执行（因此 #btn1 还不存在）。在 DOMContentLoaded 侦听器中包装内容以确保 DOM 准备就绪：

function Button1() {
  // Something
}

function Button2() {
  // Something
}       

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("btn1").addEventListener("click", Button1);
  document.getElementById("btn2").addEventListener("click", Button2);
});

Chrome 扩展名。在弹出菜单中分配具有功能的按钮

The Chrome extension. Assign buttons with functions in Popup menu

javascript

google-chrome-extension

popup.html

popup.js