I have been developing a Chrome extension that alters the background image of a new tab. However, I have encountered an issue where the background image doesn't change the first time the extension is loaded.
This problem has also occurred very occasionally after prolonged usage (although I am unsure of specific times when it fails to work aside from the initial installation). Thank you for any assistance.
main.js
/*THIS CODE IS FOR GETTING THE NUMBER OF IMAGES FROM PHP*/
// INCLUDING JQUERY LIBRARY: NECESSARY FOR SUCCESSFUL FUNCTIONALITY...
// IT'S POSSIBLE TO IMPLEMENT ALL THIS WITH PURE JAVASCRIPT, BUT WHY REINVENT THE WHEEL? :-)
(function ($) {
$(document).ready(function(e) {
$.ajax({
url: 'http://url.com/numberOfImages.php', // <== ALTER URL
dataType: "HTML",
cache: false,
type: "POST",
//SUPPORTING A SUCCESSFUL AJAX CALL
success: function (data, textStatus, jqXHR) {
if(data){
localStorage.numberOfImages = data;
gotNumberOfImages = true;
}
},
//RESOLVING AN ERROR IN THE AJAX CALL
error: function (jqXHR, textStatus, errorThrown) {
console.log('The following error occurred: ' + textStatus, errorThrown);
},
//HANDLING THE COMPLETION OF 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;
};
// Defining the image files to utilize.
var theImages = new Array() // refrain from altering this
// To incorporate additional image files, follow the example below and continue adding to the array.
var numberOfImages;
if (navigator.onLine) { //verifying internet connection, using images from server if user is online.
for(i = 0; i<=localStorage.numberOfImages;i++){
theImages[i] = 'http://url.com/images/'+ i +'.jpg'; //NAMING SERVER IMAGES 0.JPG, 1.JPG, 2.JPG AND SO FORTH.
}
} else { //when offline, defaulting to these local images. BE SURE TO ADD SEVERAL VARIANTS.
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];
}
manifest.json
{
"name": "App title",
"description": "Include description",
"version": "1.0",
"permissions": [
"activeTab"
],
"chrome_url_overrides" : {
"newtab": "main.html"
},
"background": {
"scripts": ["jquery-2.2.3.min.js"],
"persistent": false
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/",
"storage",
"tabs",
"http://*/*",
"https://*/*"
],
"browser_action": {
"default_title": "some title"
},
"manifest_version": 2
}
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>