Question

我的好友和我正在创建我们的第一个chrome扩展作为一个类项目，但似乎无法克服这个驼峰。点击右上角的扩展图标后，我们会看到一个带有按钮的下拉菜单，点击后，它会触发一个javascript函数。从顶部开始，我们创建了一个带有测试功能的虚拟按钮，该按钮应该触发console.log，但无论我们什么都不做，控制台（或者检查弹出控制台）中都会显示任何内容。

JS + HTML：

document.getElementById("DOMContentLoaded", function () {
    var btnStart = document.getElementById('startSc');
    btnStart.addEventListener('click', function () {
        console.log("hi");
    });
});

<!doctype html>
<html>

<head>
    <title>First Extension</title>
    <script src="popup.js"></script>
    <link rel='stylesheet' href="TBStyle.css">
</head>

<body>
    <h1>Go Chrome!</h1>
    <a href="#" id="startSc">Start</a>
</body>

</html>

清单：

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
}

非常感谢任何帮助，提前谢谢！

Answer 1

getElementById不会这样做。

我相信你所寻找的是：

＆＃13;

document.addEventListener("DOMContentLoaded", function () {
    var btnStart = document.getElementById('startSc');
    btnStart.addEventListener('click', function () {
        console.log("hi");
    });
});

＆＃13;

<!doctype html>
<html>

<head>
    <title>First Extension</title>
    <script src="popup.js"></script>
    <link rel='stylesheet' href="TBStyle.css">
</head>

<body>
    <h1>Go Chrome!</h1>
    <a href="#" id="startSc">Start</a>
</body>

</html>

＆＃13;

Chrome扩展程序Javascript不会触发操作

1 个答案: