0
我正在寫一個Chrome的Web應用程序，並試圖加載一個時鐘到它，但這是行不通的。 HTML文件顯示出來但不是JS，這意味着應用程序看起來像一個空框。爲什麼我的JS文件沒有加載到我的Chrome網絡擴展中？
我真的很感謝你的幫助 - 非常感謝你！
這裏是我的popup.html文件：
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="popup.css">
<title>Your AH ersonal Homepage</title>
<script src="popup.js"></script>
<script src="clock.js"></script>
</head>
<body style="background-color:#cc6666;">
<h1>Your AH Personal Homepage</h1>
<div class="clock-wrap">
<div class="hour-wrap">
<div class="digit-top">
<div class="front">00</div>
<div class="back">00</div>
</div>
<div class="digit-bottom">
<div class="front">00</div>
</div>
</div>
<div class="min-wrap">
<div class="digit-top">
<div class="front">00</div>
<div class="back">00</div>
</div>
<div class="digit-bottom">
<div class="front">00</div>
</div>
</div>
<div class="sec-wrap">
<div class="digit-top">
<div class="front">00</div>
<div class="back">00</div>
</div>
<div class="digit-bottom">
<div class="front">00</div>
</div>
</div>
</div>
</body>
</html>
這是我clock.js：
jQuery load()
Element.Properties.transform = {
set: function(transform){
var property = 'transform';
console.log(Browser);
if(Browser.chrome) property = 'WebkitTransform';
if(Browser.firefox) property = 'MozTransform';
if(Browser.opera) property = 'OTransform';
this.style[property] = transform;
this.store('transform', transform);
},
get: function(){
return this.retrieve('transform', '');
}
};
Element.implement({
setTransform: function(value){
return this.set('transform', value);
},
getTransform: function(){
return this.get('transform');
}
});
$(window).addEvent('domready', function()
{
var $hourWrap = $$('.hour-wrap');
var $hourFront = $hourWrap.getElement('div.front');
var $hourBack = $hourWrap.getElement('div.back')
var $hourTop = $hourWrap.getElement('div.digit-top');
var $hourBottom = $hourWrap.getElement('div.digit-bottom .front');
var $minWrap = $$('.min-wrap');
var $minFront = $minWrap.getElement('div.front');
var $minBack = $minWrap.getElement('div.back');
var $minTop = $minWrap.getElement('div.digit-top');
var $minBottom = $minWrap.getElement('div.digit-bottom .front');
var $secWrap = $$('.sec-wrap');
var $secFront = $secWrap.getElement('div.front');
var $secBack = $secWrap.getElement('div.back');
var $secTop = $secWrap.getElement('div.digit-top');
var $secBottom = $secWrap.getElement('div.digit-bottom .front');
var currentHour = 0;
var currentMin = 0;
var currentSec = 0;
var setClock = function()
{
var time = new Date();
var hour = time.getHours();
var min = time.getMinutes();
var sec = time.getSeconds();
if(currentHour != hour)
{
currentHour = hour;
var hourText = hour < 10 ? '0'+hour : hour;
// make el to sit behind the top digit
var $newHourTop = new Element('div', {class: 'digit-top', html: $hourTop.get('html'), style: 'z-index:1;'})
var $newHourFront = $newHourTop.getElement('div.front');
var $newHourBack = $newHourTop.getElement('div.back');
$newHourFront.set('text', hourText);
$hourWrap.adopt($newHourTop);
// start the animation
$hourFront.setTransform('rotateX(180deg)');
$hourBack.setTransform('rotateX(0deg)');
$hourBack.setStyle('zIndex', 40);
// set the min back
$hourBack.set('text', hourText);
(function()
{
$hourTop.destroy();
$hourFront.destroy();
$hourBack.destroy();
$hourTop = $newHourTop;
$hourFront = $newHourFront;
$hourBack = $newHourBack;
$hourTop.setStyle('zIndex', 10);
$hourBottom.set('text', hourText);
}).delay(800);
}
if(currentMin != min)
{
currentMin = min;
var minText = min < 10 ? '0'+min : min;
// make el to sit behind the top digit
var $newMinTop = new Element('div', {class: 'digit-top', html: $minTop.get('html'), style: 'z-index:1;'})
var $newMinFront = $newMinTop.getElement('div.front');
var $newMinBack = $newMinTop.getElement('div.back');
$newMinFront.set('text', minText);
$minWrap.adopt($newMinTop);
// start the animation
$minFront.setTransform('rotateX(180deg)');
$minBack.setTransform('rotateX(0deg)');
$minBack.setStyle('zIndex', 40);
// set the min back
$minBack.set('text', minText);
(function()
{
$minTop.destroy();
$minFront.destroy();
$minBack.destroy();
$minTop = $newMinTop;
$minFront = $newMinFront;
$minBack = $newMinBack;
$minTop.setStyle('zIndex', 10);
$minBottom.set('text', minText);
}).delay(800);
}
if(currentSec != sec)
{
currentSec = sec;
var secText = sec < 10 ? '0'+sec : sec;
// make el to sit behind the top digit
var $newSecTop = new Element('div', {class: 'digit-top', html: $secTop.get('html'), style: 'z-index:1;'})
var $newSecFront = $newSecTop.getElement('div.front');
var $newSecBack = $newSecTop.getElement('div.back');
$newSecFront.set('text', secText);
$secWrap.adopt($newSecTop);
// start the animation
$secFront.setTransform('rotateX(180deg)');
$secBack.setTransform('rotateX(0deg)');
$secBack.setStyle('zIndex', 40);
// set the min back
$secBack.set('text', secText);
(function()
{
$secTop.destroy();
$secFront.destroy();
$secBack.destroy();
$secTop = $newSecTop;
$secFront = $newSecFront;
$secBack = $newSecBack;
$secTop.setStyle('zIndex', 10);
$secBottom.set('text', secText);
}).delay(800);
}
//$hourEls.set('text', hour);
}
setClock.periodical(1000);
});
我會很感激你的幫助，因爲我不知道JS和從來沒有打過之前的網絡擴展。謝謝！
您可以通過F12，如果出現任何錯誤檢查您的鉻控制檯。它對理解JS行爲非常有幫助。如果您無法調試，請在此處張貼。 :) –
您需要加載jquery庫才能使jquery工作 –
Chrome控制檯說：拒絕加載腳本'https://code.jquery.com/jquery-1.11.3.min.js'，因爲它違反以下內容安全策略指令：「script-src」self'chrome-extension-resource：「。 – Jess