由于这是我第一次发帖，我希望我能提供正确的详细信息，这样我的问题会相对容易回答。
我正在将抽认卡系统构建为 Google Chrome 扩展程序。包含抽认卡系统的主页是单个页面，通过单击“浏览器操作”按钮(浏览器右上角的图标)由扩展程序加载。
我的问题是，扩展加载的 HTML 文件看起来很奇怪。有趣的是，文字神奇地“缩小了”。似乎正在加载 CSS 文件，但没有加载 Javascript。 Javascript 不会影响文本的外观，但我也希望页面也加载 Javascript。
我对构建 Chrome 扩展不是很熟悉，所以我可能会遗漏一些重要的细节。
因此，如果有人知道这种神奇的“文本更改”和“Javascript 未加载”是如何发生的，我很乐意获得一些帮助。
就代码而言，这是我得到的:
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 扩展 list 文件 (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 });
});
这里有几张图片可以解释我在说什么:
但是……
谢谢， 罗伊
最佳答案
您不能加载外部脚本，除非在扩展 list 中允许，因为 content security policy .
在所有添加此规则的扩展页面上也注入(inject)了样式:
body {
font-family: 'Droid Sans', Arial, sans-serif;
font-size: 75%;
}
编辑:您可以通过添加否定规则的样式来解决此问题，如下所示:
body {
font-family: initial;
font-size: initial;
}
要加载 jQuery，您必须将 Google CDN 列入白名单。您不能将必须切换到 https 版本的 http URL 列入白名单。将此添加到您的 manifest.json:
"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
关于javascript - Chrome 扩展程序加载 HTML 页面时显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36778663/