The CodePen you provided includes jQuery as an external library, which can be found in the Settings section of the CodePen page under JavaScript.
To ensure your extension functions properly, make sure to include jQuery in the extension.
Here is a working example where I've added
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
to the HTML before including
popup.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;
}
/* Additional CSS code here */
/* The container */
.container {
display: block;
/* more styles */
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
// more styling
}
/* Create a custom checkbox */
.checkmark {
/* more styles */
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
/* more styles */
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
/* more styles */
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
/* more styles */
}
/* Style the checkmark/indicator */
.container .checkmark:after {
/* more styles */
}
/* additional CSS for form elements and buttons */
/* layout stuff */
section {
text-align: center;
margin-top: 100px;
color: #333;
}
p {
font-size: 12px;
}
<html>
<head>
<title>Home+</title>
<link rel="stylesheet" type="text/css" href="popup.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<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>