我正在使用 HTML、CSS、JavaScript 和 manifest.json 为我的 Chrome 浏览器制作自定义主页/新标签页，它运行良好，直到我开始添加 jQuery 以获得更多动画、帮助等。我使用<script>标签将 jQuery（或真正的 JavaScript）文件连接到 html 文件。如果我从文件资源管理器中打开该文件（包括 jQuery），则该文件可以正常打开，但如果我打开一个新标签页，则会显示该页面，但 jQuery 功能均不起作用。我认为这是因为 manifest.json 文件无法识别 JavaScript 或 JQuery。帮助！
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://*/*"]
}]
}