'Cannot read property 'addEventListener' of null - Chrome extension
So I'm quite new to Chrome extensions and I wonder if you could help me with this: I have a button in popup.html which is the UI for the extension. Whenever users click it that button, it should display a popup. What I can't do is display that popup.
Manifest.json
"manifest_version": 2,
"name": "Name",
"description": "Description",
"version": "1.0",
"browser_action": {
"default_icon": "Img.png",
"default_popup": "popup.html",
"default_title": "Name"
},
"content_scripts" : [
{
"js": ["popup.js"],
"matches": ["https://*/*"]
}
],
"permissions": [
"activeTab",
"tabs",
"http://*/*","https://*/*"
]
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="script-src self 'sha256-XWQup+AGe1oYD9QCCUCKTcFlBV7qWqHqTM/H6Fxzqvo=' 'unsafe-inline'">
<title>Document</title>
</head>
<style>
</style>
<body>
<button id="btn">Fill</button>
<script scr="popup.js"></script>
</body>
</html>
popup.js
document.getElementById('btn').addEventListener("click", function(){
alert("Hello! I am an alert box!!");
});
Solution 1:[1]
The src property in script tag except the location of your script file. You have to provide the popup.js file location/path in your system, other way you can include script in your html page as
<script type="text/javascript">
document.getElementById('btn').addEventListener("click", function(){
alert("Hello! I am an alert box!!");
});
</script>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Iván Nokonoko |
