I know similar questions have been asked many times, but I didn't find a solution for mine yet. My question is really simple. All I want to do is to test actions on popup.html, for here, I have a click button on popup, when I click it, I want to show alert. But nothing happened. It's not finding the element. I don't understand what's going wrong here.
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");
};
The problem is that your code executes as soon as <script> tag is read, i.e. before your element exists in DOM.
Wrap it in $(document).ready() and you're good to go:
$(document).ready(function() {
/* your code */
});
For a non-jQuery solution, wrap it in DOMContentLoaded listener:
document.addEventListener("DOMContentLoaded", function() {
/* your code */
});
Finally, you can simply move the <script> tag to the end of <body>, but it's a less robust solution.
I believe your popup.js syntax is wrong
$('#btn').click(function (){
alert("test");
};
should be
$('#btn').click(function (){
alert("test");
});
looks like you are missing a paran;
来源：https://stackoverflow.com/questions/25414963/chrome-extension-popup-cannot-find-element-by-id