Question

有人可以帮助我吗，我正在构建我的第一个chrome扩展程序，它是一个带有按钮的弹出窗口，该按钮应该在点击时执行某些操作（现在只使用警报），但不知怎样，我的js文件似乎没有工作。样式似乎也无法加载。

清单：

{
  "name": "Toolbar",
  "manifest_version": 2,
  "version": "1.0.2",
  "description": "Toolbar",

  "background": {
    "scripts": ["background.js"]
  },

  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "None",
    "default_popup": "popup.html"
  },

  "permissions": [
    "tabs", "http://*/", "https://*/"
  ]
}

popup.html：

<html>

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="popup.js"></script>
</head>

<body>
<div>
    <button type="button" id="closeButton"> x<button/>
</div>
</body>

</html>

popup.js：

function closePopup ()
{
    //window.close();
    alert("hello");
}

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('closeButton').on("click", function (){
      closePopup();
    }
  });
});

Answer 1

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<!--<script src="popup.js"></script> delete this-->
</head>
<body>
<div>
<button type="button" id="closeButton"> x<button/>
</div>
<!--add this--><script src="popup.js"></script>
</body>
</html>

将脚本放置在放置事件侦听器的对象之后。我遇到了同样的问题，并已解决

Answer 2

您必须将<body>放在<head>而不是{{1}}标记中。这对我有用。

为什么popup.js中的脚本不起作用？

2 个答案: