javascript — привязка Jquery к расширению Chrome Popup.html

Связывание Jquery с расширением Chrome Popup.html

Я пытаюсь добавить эту кнопку на Codepen к моему расширению Chrome, мои HTML и CSS работают отлично. Jquery загружается в расширение, но, похоже, оно не связано с popup.html. Манифест в образе Файл манифеста , Я конвертировал SCSS в CSS с помощью онлайн-конвертера. Мне нужна помощь в связывании jquery с popup.html, чтобы кнопка работала так же, как в Codepen.

HTML {amp}amp; CSS:

 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: #52de97; 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: #39adaf; 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: #267475; animation: cooldown 1800s linear; } @keyframes cooldown { 0% { width: 100%; } 100% { width: 0; } } /* layout stuff */ section { text-align: center; margin-top: 100px; color: #333; } p { font-size: 12px; } 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;!doctype html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;title{amp}gt;Home {amp}lt;/title{amp}gt; {amp}lt;link rel="stylesheet" type="text/css" href="popup.css"{amp}gt; {amp}lt;script src="jquery-3.4.1.min.js"{amp}gt; cooldown ('jquery-3.4.1.min.js').click(function(){ var btn = $(this); btn.prop('disabled', true); setTimeout(function(){ btn.prop('disabled', false); },1800000); }); {amp}lt;/script{amp}gt; {amp}lt;script src"popup.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div id="header"{amp}gt; {amp}lt;h2{amp}gt;Home {amp}lt;/h2{amp}gt; {amp}lt;h6{amp}gt;Settings{amp}lt;/h6{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;!-- The settings pane, expand at will --{amp}gt; {amp}lt;div class="tab-pane" id="settings"{amp}gt; {amp}lt;form class="settings"{amp}gt; {amp}lt;div class="form-item"{amp}gt; {amp}lt;label for="zip"{amp}gt;Zip Code: {amp}lt;/label{amp}gt; {amp}lt;div class="form-item"{amp}gt; {amp}lt;input id="zip" name="zip" type="text" pattern="[0-9]*"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-item"{amp}gt; {amp}lt;label class="container"{amp}gt;Show Weather {amp}lt;input type="checkbox" checked="checked"{amp}gt; {amp}lt;span class="checkmark"{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-item"{amp}gt; {amp}lt;button class="cooldown"{amp}gt;Refresh Weather{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-item"{amp}gt; {amp}lt;label for="hompagebg" class="wallpaper-title"{amp}gt;Upload Wallpaper{amp}lt;/label{amp}gt; {amp}lt;center{amp}gt; {amp}lt;input type="file" id="hompage-background" name="hompagebg" accept="image/png, image/jpeg" size="20"{amp}gt; {amp}lt;/center{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-item"{amp}gt; {amp}lt;button type="button" class="button"{amp}gt;Save{amp}lt;/button{amp}gt; {amp}lt;button type="button" class="button_cancel"{amp}gt;Cancel{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector