Question

我知道有很多次问过类似的问题，但我还没找到解决方法。我的问题非常简单。我想要做的就是在popup.html上测试操作，因为在这里，我在弹出窗口上有一个单击按钮，当我点击它时，我想显示警告。但什么都没发生。它没有找到元素。我不明白这里出了什么问题。

manefest.json

{
  "name": "test",
  "version": "1.0",
  "description": "test",
  "manifest_version":2,
  "browser_action": {
    "default_icon": "logo.png",
    "default_popup":"popup.html"
  },
  "permissions": [
    "tabs", 
    "http://*/*",
    "notifications"
  ]
}

popup.html

<html>
  <head>
    <title>Test</title>
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="popup.js"></script>
  </head>
  <body>
    <button id='btn'>click</button>
  </body>
</html>

popup.js

$('#btn').click(function (){
   alert("test");
};

Answer 1

问题是，只要读取<script>标记，即在元素存在于DOM之前，您的代码就会执行。

将其包裹在$(document).ready()中，你就可以了：

$(document).ready(function() {
  /* your code */
});

对于非jQuery解决方案，请将其包装在DOMContentLoaded侦听器中：

document.addEventListener("DOMContentLoaded", function() {
  /* your code */
});

最后，您只需将<script>标记移至<body>的末尾，但这是一个不太稳健的解决方案。

Answer 2

我相信你的popup.js语法错误

  $('#btn').click(function (){
   alert("test"); 
};

应该是

    $('#btn').click(function (){
   alert("test");
   });

看起来你错过了一个paran;

chrome扩展弹出窗口无法按ID查找元素

2 个答案: