JS 函数未定义 Chrome 扩展 Popup.js

Question

我正在尝试将此按钮 On Codepen 添加到我的 chrome 扩展程序中，我的 HTML 和 CSS 工作得非常好。 JS 是 popup.js，与其余代码处于同一级别，但似乎没有链接到 popup.html。清单在图像 中。我确实使用在线转换器将 SCSS 转换为 CSS。我需要帮助将 js 链接到 popup.html，以便按钮像在 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

我需要下载 jquery 并将其链接到 popup.html 使用，我的 JS 代码需要放在里面

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