'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