Манифест не распознает jQuery - PullRequest
0 голосов
/ 28 июня 2018

Я работаю над созданием собственной домашней страницы / новой вкладки для моего Chrome браузер с использованием HTML, CSS, JavaScript и manifest.json, и это было работал очень хорошо, пока я не начал добавлять jQuery для дополнительной анимации, полезность и т. д. У меня есть файл jQuery (или действительно JavaScript) подключен к html-файлу, используя тег <script>. Файл открывается просто отлично, включая jQuery, если я открою его из проводника, но если я открою страницу новой вкладки, страница появляется, но ни один из jQuery функционал работает. Я думаю, это потому, что файл manifest.json не распознает ни JavaScript, ни JQuery. ПОМОГИТЕ! * * 1002

const defi = " ";
$(document).ready(function() {
  $("#discord").hover(function() {
    $("#sub").text("Discord");
  }, function() {
    $("#sub").text(defi);
  });
  $("#plus").hover(function() {
    $("#sub").text("Google+");
  }, function() {
    $("#sub").text(defi);
  });
  $("#youtube").hover(function() {
    $("#sub").text("YouTube");
  }, function() {
    $("#sub").text(defi);
  });
  $("#drive").hover(function() {
    $("#sub").text("Google Drive");
  }, function() {
    $("#sub").text(defi);
  });
  $("#codecademy").hover(function() {
    $("#sub").text("Codecademy");
  }, function() {
    $("#sub").text(defi);
  });
  $("#photos").hover(function() {
    $("#sub").text("Google Photos");
  }, function() {
    $("#sub").text(defi);
  });
  $("#spotify").hover(function() {
    $("#sub").text("Spotify");
  }, function() {
    $("#sub").text(defi);
  });
  $("#netflix").hover(function() {
    $("#sub").text("Netflix");
  }, function() {
    $("#sub").text(defi);
  });
  $("#stackOverflow").hover(function() {
    $("#sub").text("Stack Overflow");
  }, function() {
    $("#sub").text(defi);
  });
  $("#ezgif").hover(function() {
    $("#sub").text("EZ-GIF");
  }, function() {
    $("#sub").text(defi);
  });
  $("#docs").hover(function() {
    $("#sub").text("Google Docs");
  }, function() {
    $("#sub").text(defi);
  });
  $("#sheets").hover(function() {
    $("#sub").text("Google Sheets");
  }, function() {
    $("#sub").text(defi);
  });
  $("#slides").hover(function() {
    $("#sub").text("Google Slides");
  }, function() {
    $("#sub").text(defi);
  });
  $("#slides").hover(function() {
    $("#sub").text("Google Slides");
  }, function() {
    $("#sub").text(defi);
  });
  $("#keepvid").hover(function() {
    $("#sub").text("KeepVid");
  }, function() {
    $("#sub").text(defi);
  });
  $("#discordJs").hover(function() {
    $("#sub").text("Discord.js Help");
  }, function() {
    $("#sub").text(defi);
  });
  $("#audioJoiner").hover(function() {
    $("#sub").text("Audio Joiner");
  }, function() {
    $("#sub").text(defi);
  });
});
html {
  font-size: 20px;
}

body {
  background-image: url("silverTubeBackground.png");
  background-repeat: no-repeat;
  background-size: cover;
  color: black;
}

img {
  max-width: 100%;
  min-width: 100%;
  max-height: 100%;
  min-height: 100%;
}


/*BUTTONS*/

button {
  margin: 12.5px;
  height: 22.5%;
  padding: 10px;
  border: 10px solid white;
  border-radius: 12.5px;
}

button:hover {
  padding: 7.5px;
  border: 12.5px solid rgb(152, 184, 201);
}

button:active {
  padding: 5px;
  border: 15px solid rgb(77, 77, 77);
}

.bRed {
  background-color: rgb(193, 0, 0);
  color: white;
}

.bBlue {
  background-color: blue;
  color: white;
}

.bNavy {
  background-color: rgb(0, 108, 155);
  color: white;
}

.bYellow {
  background-color: yellow;
  color: darkgrey;
}

.bOrange {
  background-color: rgb(196, 79, 0);
  color: white;
}

.bGreen {
  background-color: rgb(27, 137, 60);
  color: white;
}

.bSlate {
  background-color: rgb(29, 67, 82);
  color: white;
}

.bBlack {
  background-color: black;
  color: white;
}

#sub {
  background-image: url("metalBackground.png");
  min-width: 10%;
  max-width: 40%;
  min-height: 55px;
  padding: 5px;
  border: 5px solid rgb(152, 184, 201);
  font-family: cursive;
  font-size: 35px;
  border-radius: 25px;
}
<html>

<head>
  <title>New Tab</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script src="background.js"></script>
</head>

<body>
  <center>
    <br>

    <div id="sub"></div>
    <br>
    <a id="discord" href='https://discordapp.com/channels/@me'><button class="bRed">
        <img src="discord.png">
    </button></a>
    <a id="plus" href='https://plus.google.com'><button class="bYellow">
        <img src="googlePlus.png">
    </button></a>
    <a id="youtube" href='https://youtube.com/'><button class="bNavy">
        <img src="youtube.png">
    </button></a>
    <a id="drive" href='https://drive.google.com/'><button class="bRed">
        <img src="drive.png">
    </button></a>
    <a id="codecademy" href='https://www.codecademy.com/'><button class="bGreen">
        <img src="codecademy.png">
    </button></a><br>
    <a id="photos" href='https://photos.google.com/'><button class="bOrange">
        <img src="googlePhotos.png">
    </button></a>
    <a id="spotify" href='https://open.spotify.com/collection/playlists'><button
class="bRed">
        <img src="spotify.png">
    </button></a>
    <a id="netflix" href='https://netflix.com'><button class="bBlack">
        <img src="netflix.png">
    </button></a>
    <a id="stackOverflow" href='https://stackoverflow.com/questions/ask'><button class="bGreen">
        <img src="overflow.png">
    </button></a>
    <a id="ezgif" href='https://ezgif.com/'><button class="bYellow">
        <img src="ezgif.png">
    </button></a><br>
    <a id="docs" href='http://docs.google.com'><button class="bRed">
        <img src="docs.png">
    </button></a>
    <a id="sheets" href='http://sheets.google.com'><button class="bNavy">
        <img src="sheets.png">
    </button></a>
    <a id="slides" href='http://slides.google.com'><button class="bGreen">
        <img src="slides.png">
    </button></a>
    <a id="keepvid" href='http://keepvid.com/'><button class="bYellow">
        <img src="keepvid.png">
    </button></a>
    <a id="discordJs" href='https://discord.js.org/#/docs/main/stable/general/welcome'>
      <button class="bRed">
        <img src="discordjs.png">
    </button>
    </a>
    <a id="audioJoiner" href='http://audio-joiner.com/'>
      <button class="bYellow">
        <img src="audJoin.png">
    </button>
    </a>
  </center>
</body>

</html>

Вот мой файл JSON (manifest.json), потому что фрагменты кода не включите это:

{
    "name": "New Tab",
    "manifest_version": 2,  
    "description": "An awesome New Tab Page",
    "version": "0.0.0.1",  
    "permissions": ["management"],
    "chrome_url_overrides": {
        "newtab": "index.html"
    },
    "icons": {
        "500": "icon.png"
    },
    "content_scripts": [ {
        "js": [ "jquery-3.3.1.js", "background.js" ],
        "matches": [ "http://*/*", "https://*/*"]
    }]
}

1 Ответ

0 голосов
/ 28 июня 2018

Расширение не может загружать библиотеки из веб-ресурсов, только из своего собственного пакета. Поэтому вам нужно скачать jQuery в файл jquery-3.3.1.js в папке вашего пакета.

...