Javascript Chrome extension在安装时未在新选项卡中显示背景图像
我正在制作一个chrome扩展,它改变了一个新标签的背景图像。第一次加载扩展时,背景图像没有改变 这个问题在长时间使用后也会偶尔出现(但我不确定除了第一次安装外,它在什么时候不起作用)。谢谢 main.jsJavascript Chrome extension在安装时未在新选项卡中显示背景图像,javascript,css,google-chrome,google-chrome-extension,Javascript,Css,Google Chrome,Google Chrome Extension,我正在制作一个chrome扩展,它改变了一个新标签的背景图像。第一次加载扩展时,背景图像没有改变 这个问题在长时间使用后也会偶尔出现(但我不确定除了第一次安装外,它在什么时候不起作用)。谢谢 main.js /*THIS CODE IS FOR GETTING THE NUMBER OF IMAGES FROM PHP*/ // INCLUDE JQUERY LIBRARY: OTHERWISE THIS WON'T WORK... // SURE YOU CAN ALSO
/*THIS CODE IS FOR GETTING THE NUMBER OF IMAGES FROM PHP*/
// INCLUDE JQUERY LIBRARY: OTHERWISE THIS WON'T WORK...
// SURE YOU CAN ALSO DO ALL THESE IN PURE JAVASCRIPT, BUT WHY RE-INVENT THE WHEEL? :-)
(function ($) {
$(document).ready(function(e) {
$.ajax({
url: 'http://url.com/numberOfImages.php', // <== CHANGE URL
dataType: "HTML",
cache: false,
type: "POST",
//HANDLE THE SUCCESS CASE FOR THE AJAX CALL
success: function (data, textStatus, jqXHR) {
if(data){
localStorage.numberOfImages = data;
gotNumberOfImages = true;
}
},
//HANDLE THE FAILURE CASE FOR THE AJAX CALL
error: function (jqXHR, textStatus, errorThrown) {
console.log('The following error occurred: ' + textStatus, errorThrown);
},
//HANDLE THE EVENT-COMPLETE CASE FOR THE AJAX CALL
complete: function (jqXHR, textStatus) {
}
});
});
})(jQuery);
window.onload = function() {
showNewImage();
var str = document.getElementById("greet").innerHTML;
var res = str.replace("\'\'", " " + localStorage.name); // replace with name
document.getElementById("greet").innerHTML = res;
};
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
var numberOfImages;
if (navigator.onLine) { //checking if connected to internet, if it finds the user is online it'll call the images that are on the server.
for(i = 0; i<=localStorage.numberOfImages;i++){
theImages[i] = 'http://url.com/images/'+ i +'.jpg'; //NAME THE IMAGES ON THE SERVER 0.JPG, 1.JPG, 2.JPG and so on.
}
} else { //if offline, if it finds that the user is offline it'll use these images. REMEMBER TO PUT A FEW OF THESE.
theImages[0] = 'image3.jpg'
theImages[1] = 'image4.jpg'
}
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showNewImage(){
document.body.style['background-image'] = 'url("' + theImages[whichImage] + '")';
//localStorage.img = theImages[whichImage];
}
main.html
<html>
<head>
<title>New Tab</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="/octicons/octicons.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery-2.2.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
</head>
<body>
...
<script src = "main.js"></script>
</body>
</html>
新标签页
...
如果在加载扩展时已加载窗口,则该窗口将无法工作,因为第1行中的window.onload
会触发showNewImage()
添加showNewImage()代码>第二次到脚本末尾,如下所示:
document.body.style['background-image'] = 'url("' + theImages[whichImage] + '")';
//localStorage.img = theImages[whichImage];
}
showNewImage();
这将在首次加载扩展时运行脚本。如果在加载扩展时已加载该窗口,则它将无法工作,因为第1行中的window.onload
会触发showNewImage()
添加showNewImage()代码>第二次到脚本末尾,如下所示:
document.body.style['background-image'] = 'url("' + theImages[whichImage] + '")';
//localStorage.img = theImages[whichImage];
}
showNewImage();
这将在首次加载扩展时运行脚本。否,仍不显示。我还能做什么?感谢您的帮助。也许,通过在清单中包含“persistent”:false(它创建了一个事件页面-请参阅),脚本不会像您希望的那样在后台连续运行。试试“坚持”:是吗?我试过了。不过,当我第一次加载包时,它并没有显示图像。背景脚本是完全无用的,持久的
与否,因为它只包含一个副本jQuery,其他脚本无法使用。@Xan-你说得对@Ron-最后一刀-加载图片的匿名函数包括$(文档)。ready(函数(e){
,因此,如果加载扩展时文档已经准备好,它将不会被触发。请尝试删除$(文档)。ready(函数(e){
不,仍然不显示。我还能做什么?感谢您的帮助。也许,包括“persistent”:在清单中为false(创建事件页-请参阅),脚本没有按照您的意愿在后台连续运行。请尝试“persistent”“:真的吗?我已经试过了。当我第一次加载包时,它仍然没有显示图像。背景脚本完全没有用,持久化
,因为它只包含一个副本jQuery,其他脚本无法使用。@Xan-你说得对。@Ron-最后一次尝试-加载图片的匿名函数包括$(文档)。准备好了吗?”(函数(e){
,因此,如果加载扩展时文档已经准备就绪,则不会触发它。请尝试删除$(文档)。准备就绪(函数(e){