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>

1) Remove "background" section from manifest.json as it creates a totally separate hidden background page with this script and you don't need it, 2) rename background.js to popup.js everywhere, 3) you're using jQuery but you didn't add it to popup.html - download jquery.min.js into your extension directory and load it using a script tag before popup.js, 4) since the popup is a separate window, it has its own devtools where you'll see the error about `$` - right-click inside the popup, then click "inspect". — wOxxOm, Oct 14 '19 at 18:42
I added this to my popup.html Is this correct, or do I acctuly need to install jquery? — 1215927, Oct 15 '19 at 13:05
@wOxxOm Are you sure it's not JS? I did everything you said and tried multiple times but it still won't work, and I updated the question. — 1215927, Oct 28 '19 at 14:48
The most important thing is using devtools to debug the code properly. Right-click inside the popup, then click "inspect". You should see an error about `cooldown` being undefined. — wOxxOm, Oct 28 '19 at 14:54
@wOxxOm I fixed most of the problem, I was missing the equal sign in scr="popup.js". I have an error saying the function is not defined. I don't know JS, so can you please help? — 1215927, Oct 29 '19 at 14:52
Well, like I suggested in the first comment you need to download the libraries you're using such as jQuery or cooldown into local files, save them in the same directory with popup.js, and then load them the same way you're loading your own popup.js — wOxxOm, Oct 29 '19 at 14:53

score 0 · Accepted Answer · answered Nov 04 '19 at 15:28

0

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
});

answered Nov 04 '19 at 15:28

1215927

99
1
7

JS Function Not Defined Chrome Extension Popup.js

1 Answers1

Linked