Ultra simple Chrome Extension doesn't addEventListener to button onclick event
So I'm testing out creating a chrome extension. I understand that with Manifest v2 you can't have javascript in popup.html. So, I've moved the javascript to a separate file, popup.js.
I'm trying to have a simple button in a popup that calls a hello world alert, but it simply isn't working.
Moreover, Chrome's Inspect Element debugger doesn't show any error.
popup.html
<html>
<head>
<title>Test</title>
<script language='javascript' src='popup.js'></script>
</head>
<body>
<form name='testForm'>
<input type='button' id='alertButton' value='click me'>
</form>
</body>
</html>
popup.js
function myAlert(){
alert('hello world')
}
window.onload = function(){
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('alertButton').addEventListener('onclick', myAlert);
});
}
manifest.json
{
"manifest_version": 2,
"name": "Test",
"description": "Test Extension",
"version": "1.0",
"icons": {
"48": "icon.png"
},
"permissions": [
"http://*/*",
"https://*/*"
],
"browser_action": {
"default_title": "This is a test",
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
Any ideas?
Answer
Just remove window.onload:
function myAlert(){
alert('hello world');
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('alertButton').addEventListener('click', myAlert);
});