javascript - 如何修复 JS 和 Jquery 不适用于 chrome 扩展

标签 javascript html css google-chrome-extension

<分区>

我正在设置一个 chrome 扩展程序并构建了设置菜单,CSS 和 HTML 工作正常。我在 Codepen 上使用此按钮它说我的代码没有错误No errors如何定义函数?我现在已经下载了jquery到该文件夹​​并使用此处所示的脚本调用它 files & code由于开发扩展的一些安全限制,无法使用 CDN。

$('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;
}
<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>

最佳答案

您链接的 CodePen 有 jQuery作为外部库,您可以在 JavaScript 页面的设置下的 CodePen 页面上查看它。

要使您的扩展正常工作,请将 jQuery 包含到扩展中。

一个工作示例,我在其中添加了 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>在包含 popup.js 之前添加到 HTML :

$(() => {
    $('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;
}
<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>

关于javascript - 如何修复 JS 和 Jquery 不适用于 chrome 扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58645459/

相关文章:

php - 在 echo 语句中混合 html 和 php 变量

css - 使用 CSS 在换行后对齐文本

html - 将鼠标悬停在父项上时打开子菜单

javascript - Handsontable,如何插入带有数据的行?

使用 D3.js 时 DataTables 中的 Javascript 错误

php - 包括导航栏

html - 使用 CSS 和 HTML 的响应式网格

javascript - 计算地理位置时无法设置外部(全局?)变量

javascript - ckeditor 工具栏配置器在哪里?

html - Bootstrap : A blank column which isn't in code, 但它在网格中