Question

我正在制作一个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 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];
}

的manifest.json

{
  "name": "App name",
  "description": "Add 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>

Answer 1

如果您在加载扩展程序时已加载该窗口，则该窗口将无效，因为第{1行}中的showNewImage()会触发window.onload。

第二次将showNewImage();添加到脚本末尾，如下所示：

    document.body.style['background-image'] = 'url("' + theImages[whichImage] + '")';
    //localStorage.img = theImages[whichImage];
    }
    showNewImage();

这将在首次加载扩展时运行脚本。

Chrome扩展程序在安装时未在新标签中显示背景图片

1 个答案: