chrome扩展弹出无法找到元素的ID

chrome extension popup cannot find element by ID

本文关键字：元素 ID 扩展 chrome      更新时间：2023-09-26

我知道类似的问题已经被问过很多次了，但我还没有找到一个解决方案。我的问题很简单。我要做的就是在popup。html上测试actions，这里，我在popup上有一个click按钮，点击它时，我想显示alert。但是什么也没发生。不是寻找元素。我不明白这是怎么回事。

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");
};

问题是你的代码在<script>标签被读取后立即执行，即在你的元素存在于DOM之前。

用$(document).ready()包起来就可以了:

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

对于非jquery解决方案，将其封装在DOMContentLoaded listener:

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

最后，您可以简单地将<script>标记移动到<body>的末尾，但这是一个不太健壮的解决方案。

我相信你的pop - up.js语法是错误的

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

应为

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

好像缺少一个paran;

相关文章：