JS Function Not Defined Chrome Extension Popup.js

Question

I am trying to add this button On Codepen to my chrome extension, my HTML and CSS work perfectly fine. The JS is popup.js and is on the same level as the rest of the code, but it doesn't seem to be linked to the popup.html. Manifest is in the image . I did convert the SCSS to CSS using an online converter. I need help linking the js to popup.html so the button works as it does in Codepen.

Html, CSS & JS:

 $('button.cooldown').click(function(){ var btn = $(this); btn.prop('disabled', true); setTimeout(function(){ btn.prop('disabled', false); },15000); });

 body { background-image: linear-gradient( 72.5deg, rgba(0,175,255,1) 27.9%, rgba(0,224,254,1) 84.2% ); width: 250px; height: 400px; } #header { padding-top: 2px; padding-bottom: 2px; text-align: center; background-color: #393e46; color: white; font-size: 15px; border-radius: 10px; }.button { background-color: rgb(80, 220, 100); border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; border-radius: 50px; margin: 5px; }.button:hover { background-color: #393e46; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; border-radius: 50px; margin: 5px; }.button_cancel { background-color: #f44444; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; border-radius: 50px; margin: 5px; }.button_cancel:hover { background-color: #393e46; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; border-radius: 50px; margin: 5px; } /* The container */.container { display: block; position: relative; padding-left: 10px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */.container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; font-size: 18px; } /* Create a custom checkbox */.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } /* On mouse-over, add a grey background color */.container:hover input ~.checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */.container input:checked ~.checkmark { background-color: #2196F3; } /* Create the checkmark/indicator (hidden when not checked) */.checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */.container input:checked ~.checkmark:after { display: block; } /* Style the checkmark/indicator */.container.checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=file], select { padding-left: 15%; }.form-item { padding-top: 2px; padding-bottom: 2px; text-align: center; }.wallpaper-title { display: block; padding-bottom: 3px; font-size: 11px; } button.cooldown { background: #336699; min-height: 48px; min-width: 144px; position: relative; margin: 5px; border-radius: 5px; border: 0; color: #fff; padding: 0 15px; font-size: 16px; outline: none; overflow: hidden; cursor: pointer; } button.cooldown:active, button.cooldown:focus { outline: none; } button.cooldown:disabled { background: #264d73; color: #d9d9d9; cursor: default; box-shadow: inset 3px 3px 10px 0px rgba(0, 0, 0, 0.2); } button.cooldown:disabled:after { content: ''; position: absolute; bottom: 0; width: 100%; left: 0; height: 5px; background: #1a334d; animation: cooldown 15s linear; } @keyframes cooldown { 0% { width: 100%; } 100% { width: 0; } } /* layout stuff */ section { text-align: center; margin-top: 100px; color: #333; } p { font-size: 12px; }

 <.doctype html> <html> <head> <title>Home+</title> <link rel="stylesheet" type="text/css" href="popup.css"> <script src="popup,js"></script> <div id="header"> <h2>Home+</h2> <h6>Settings</h6> </div> </head> <body> <:-- The settings pane, expand at will --> <div class="tab-pane" id="settings"> <form class="settings"> <div class="form-item"> <label for="zip">Zip Code: </label> <div class="form-item"> <input id="zip" name="zip" type="text" pattern="[0-9]*"> </div> </div> <div class="form-item"> <label class="container">Show Weather <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </div> <div class="form-item"> <button class="cooldown">Refresh Weather</button> </div> <div class="form-item"> <label for="hompagebg" class="wallpaper-title">Upload Wallpaper</label> <center> <input type="file" id="hompage-background" name="hompagebg" accept="image/png, image/jpeg" size="20"> </center> </div> <div class="form-item"> <button type="button" class="button">Save</button> <button type="button" class="button_cancel">Cancel</button> </div> </form> </div> </div> </body> </html>

Answer 1

I needed to download jquery and link it to popup.html using and my JS code needed to be placed inside

$(document).ready(function () {
  //code goes here
});