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

Posted 2023-02-19

【中文标题】JS 函数未定义 Chrome 扩展 Popup.js

【英文标题】：JS Function Not Defined Chrome Extension Popup.js

【发布时间】：2020-02-11 09:47:49

【问题描述】：

我正在尝试将此按钮 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>

【问题讨论】：

1) 从 manifest.json 中删除“background”部分，因为它使用此脚本创建了一个完全独立的隐藏背景页面，而您不需要它，2) 在任何地方将 background.js 重命名为 popup.js , 3) 你正在使用 jQuery 但你没有将它添加到 popup.html - 将 jquery.min.js 下载到你的扩展目录并在 popup.js 之前使用脚本标签加载它, 4) 因为弹出窗口是一个单独的窗口，它有自己的开发工具，您会在其中看到有关 $ 的错误 - 在弹出窗口中右键单击，然后单击“检查”。

我将此添加到我的 popup.html 这是正确的，还是我真的需要安装 jquery？

@wOxxOm 你确定不是 JS 吗？我做了你说的一切并尝试了多次，但仍然无法正常工作，我更新了问题。

最重要的是使用开发工具正确调试代码。在弹出窗口内右键单击，然后单击“检查”。您应该会看到关于 cooldown 未定义的错误。

好吧，就像我在第一条评论中建议的那样，您需要将您正在使用的库（例如 jQuery 或冷却）下载到本地文件中，将它们保存在与 popup.js 相同的目录中，然后加载它们就像您加载自己的 popup.js 一样

【参考方案1】：

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

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