由于这是我第一次发帖，我希望我提供正确的详细信息，以便我的问题相对容易回答。
我正在构建一个flashcard系统作为Google Chrome扩展程序。包含闪卡系统的主页是单个页面，通过单击“浏览器操作”按钮（浏览器右上角的图标）由扩展程序加载。
我的问题是，扩展程序加载的HTML文件看起来很有趣。有趣的在文本中神奇地“缩小”。似乎CSS文件正在加载，但Javascript不是。 Javascript不会影响文本的外观，但我也希望页面也加载Javascript。
我对构建Chrome扩展程序并不是非常熟悉，因此我可能会遗漏一些重要细节。
所以如果有人知道这个神奇的“改变文本”和“Javascript not loading”是如何发生的，我很乐意得到一些帮助。
以下是代码的内容：
HTML（popup.html）
<!DOCTYPE html>
<html>
<head>
<title>Drill</title>
<link rel="stylesheet" type="text/css" href="drillstyle.css">
</head>
<body>
<!-- Main Canvas -->
<div id="canvasdiv">
<canvas id="canvas" width="900" height="600"></canvas>
<div id="canvascontextpara">
<h3>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</h3>
</div>
</div>
<!-- Jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<!-- Main JS-->
<script src="drill.js"></script>
</body>
</html>
CSS（drillstyle.css）
#canvasdiv {
width: 900px;
height: 600px;
border: 1px solid black;
position: relative;
margin: 0 auto; }
#canvascontextpara {
position: absolute;
top: 60px;
left: 100px;
width: 700px;
height: 150px;
text-align: center;
font-family: 'Comic Sans MS';
color: white;
margin: 0 auto;
z-index: 2;
background: gray; }
canvas{ position: absolute; z-index: 1 }
body{ background-color: black;}
主JavaScript（drill.js）
$(document).ready(function () {
//Canvas stuff
var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");
var w = $("#canvas").width();
var h = $("#canvas").height();
var canvasposition = $('#canvas').offset();
//declare and assign image objects
var pencilImageObj = new Image();
pencilImageObj.src = 'Pencil.png';
var pencilOutlineImageObj = new Image();
pencilOutlineImageObj.src = 'PencilOutline.png';
var speakImageObj = new Image();
speakImageObj.src = 'Speaker.png';
var speakOutlineImageObj = new Image();
speakOutlineImageObj.src = 'SpeakerOutline.png';
//random variables
var testValue = false; //tests for changes in the editIconHover variable
var englishText = "English Text"; //Holds the spanish text
//trigger variables
var editIconHover = false; //is the mouse hovering over the edit icon?
var speakIconHover = false; //is the mouse hovering over the speaker icon?
var triggerCardAnim = false; //is the mouse clicking the Spanish Card
function init() {
//Initiate mouse move listener
$('#canvas').mousemove(function (e) {
//Aquire mouse position
var mouseX = e.pageX - canvasposition.left;
var mouseY = e.pageY - canvasposition.top;
//set value to use to test for changes
testValue = editIconHover;
//check if hovering over edit icon
if (mouseX >= 648 && mouseX <= 680){
if (mouseY >= 388 && mouseY <= 420) {
editIconHover = true;
}
else {
editIconHover = false;
}
}
else {
editIconHover = false;
}
//if there is a change in whether the mouse is hovering over the icon, repaint
if (testValue != editIconHover) {
paint();
}
testValue = speakIconHover;
//check if hovering over speaker icon
if (mouseX >= 388 && mouseX <= 420) {
if (mouseY >= 388 && mouseY <= 420) {
speakIconHover = true;
}
else {
speakIconHover = false;
}
}
else {
speakIconHover = false;
}
//if there is a change in whether the mouse is hovering over the icon, repaint
if (testValue != speakIconHover) {
paint();
}
});
//Initiate mouse click listener
$('#canvas').click(function (e) {
//Aquire mouse position
var mouseX = e.pageX - canvasposition.left;
var mouseY = e.pageY - canvasposition.top;
//detect click on English card
if (mouseX >= 480 && mouseX <= 680) {
if (mouseY >= 270 && mouseY <= 420) {
triggerCardAnim = true;
textManager();
paint();
}
}
});
}
init();
// draw/refresh the canvas
function paint() {
// --Draw Layout--
//Draw background and border
ctx.fillStyle = "black";
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = "red";
ctx.strokeRect(0, 0, w, h);
//draw title
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.font = "20px Comic Sans MS";
ctx.fillText("Living Waters Spanish Vocabulary Driller", w/2, 40);
//Draw Spanish Card
ctx.fillStyle = "gray";
ctx.fillRect(220, 270, 200, 150);
//Draw English Card
ctx.fillStyle = "gray";
ctx.fillRect(480, 270, 200, 150);
// --Draw Text--
//draw title
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.font = "20px Comic Sans MS";
ctx.fillText("Living Waters Spanish Vocabulary Driller", w / 2, 40);
//draw Spanish word
ctx.fillText("Spanish Word", 320, 345);
//draw English word
ctx.fillText(englishText, 580, 345);
// --Draw Images--
//draw edit image
if (editIconHover == true) {
ctx.drawImage(pencilImageObj, 648, 388, 32, 32);
pencilImageObj.onload = function () {
ctx.drawImage(pencilImageObj, 648, 388, 32, 32);
};
}
else {
ctx.drawImage(pencilOutlineImageObj, 648, 388, 32, 32);
pencilOutlineImageObj.onload = function () {
ctx.drawImage(pencilOutlineImageObj, 648, 388, 32, 32);
};
}
//draw sound clip image
if (speakIconHover == true) {
ctx.drawImage(speakImageObj, 388, 388, 32, 32)
speakImageObj.onload = function () {
ctx.drawImage(speakImageObj, 388, 388, 32, 32)
}
}
else {
ctx.drawImage(speakOutlineImageObj, 388, 388, 32, 32)
speakOutlineImageObj.onload = function () {
ctx.drawImage(speakOutlineImageObj, 388, 388, 32, 32)
}
}
}
paint();
//Manage Text on the canvas
function textManager() {
var testText = "YOU CLICKED ME";
if (triggerCardAnim == true)
{
englishText = testText;
triggerCardAnim = false;
}
}
})
Google Chrome扩展清单文件（manifest.json）
{
"manifest_version": 2,
"name": "My Test Plugin",
"description": "Experimental Plugin build for Roy",
"version": "1.0",
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"activeTab"
]
}
扩展JavaScript文件（eventPage.js）
chrome.browserAction.onClicked.addListener(function (activeTab) {
var newURL = "popup.html";
chrome.tabs.create({ url: newURL });
});
以下几张图片解释了我在说什么：
但是...
谢谢， 罗伊
答案 0 :(得分：1)
您无法加载外部脚本，除非由于content security policy而在扩展程序清单中允许。
还会在所有扩展页面上注入样式，这会添加以下规则：
body {
font-family: 'Droid Sans', Arial, sans-serif;
font-size: 75%;
}
编辑：你可以通过添加一个否定规则的样式来解决这个问题：
body {
font-family: initial;
font-size: initial;
}
要使jQuery加载，您必须将Google CDN列入白名单。您无法将您需要切换到https版本的http网址列入白名单。将它添加到您的manifest.json：
"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"