使用jQuery插件的代碼適用於Chrome，但不適用於Chrome擴展？

Question

我有一個基於JS/jQuery和一個額外庫的小型JavaScript文件。它作爲獨立文件完美運行，但我在啓用Chrome擴展程序時遇到問題。

該腳本檢查HTML頁面的每個圖像的特定特徵，並根據它在圖像周圍添加邊框。

的manifest.json

{ 
    "name": "ImageId", 
    "version": "0.1", 
    "manifest_version": 2, 
    "browser_action": { 
     "default_icon": "icon.png" 
    }, 
    "content_scripts" : [ 
     { 
      "matches" : [ 
       "http://*/*", 
       "https://*/*" 
      ], 
      "js" : ["jquery-1.8.3.min.js","jquery.exif.js","content_script.js"], 
      "run_at" : "document_start", 
      "all_frames" : false 
     } 
    ], 
    "icons":{ 
     "128":"icon.png" 
    } 
} 

content_script.js：

jQuery(window).load(function(){ 
    $('img').each(function() { 

     var gpslo=0; 
     var gpsla=0; 
     if (typeof(gpslo) != "undefined" && gpslo != null) { 
      var gpslo= $(this).exif("GPSLongitude"); 
      var gpsla = $(this).exif("GPSLatitude"); 
     } 
     console.log(gpslo+"--"+ gpsla); 

     if (gpslo!=0) { 
      $(this).css('border', "solid 20px red"); 
      $(this).click(function() { 
       alert("Long: " + $(this).exif("GPSLongitude") + ", Lat: " + $(this).exif("GPSLatitude")); 
      }); 
     } 
     else { 

      $(this).css('border', "solid 20px gray"); 
     }; 

    }); 
}); 

現在，當我在Chrome一個非常簡單的1畫面運行這個唯一網站，我收到沒有錯誤可言，但只是一個白頁。

此外，一切工作正常運行擴展系統以外的腳本。我不太清楚如何更好地解釋這一點。這些是我在教程之外的第一步，所以請親切:)

我將完整的測試和擴展文件上傳到：Working(Html).zip和NotWorking(Chrome).zip。

Answer 1

As Sudarshan answered，註釋掉document.write代碼jquery.exif.js。內容腳本中的document.write會清除以前的DOM，而VBscript在Chrome中無法正常工作。

然而，這並不是唯一的問題：

1. 當內容腳本設置爲"run_at" : "document_start"，如問題，你必須使用$(document).ready()。如有疑問，無論如何都不會傷害$(document).ready()。

2. 當內容腳本設置爲"run_at" : "document_idle"時，與您鏈接的文件一樣，the script may fire after the document.load event has。因此，$(window).load()不會總是有效。

3. 在Chrome瀏覽器中，至少在您提供的測試頁面上，Exif數據最多需要6秒才能進入！ （這在Firefox上非常瞬時。）這意味着，您需要延遲一段時間後檢查圖像。

其他不太重要的問題：

1. 使用CSS類，以幫助上述定時檢查，以避免內聯CSS。
2. 使用jQuery's .on()，而不是.click()，使處理器只連接一次，並優雅地彌補了AJAX的變化。

全部放在一起，content_script.js變（更新，看到這個劇本下）：

$(document).ready (function() { 
    $(window).load (CompForExifPluginInitDelay); 

    //--- In a content script, the load event may have already fired. 
    if (document.readyState == "complete") { 
     CompForExifPluginInitDelay(); 
    } 

    $(document.head).append ('        \ 
     <style type="text/css">        \ 
      img.myExt_HasExif {        \ 
       border:  20px solid red !important;  \ 
      }            \ 
      img.myExt_WithoutExif {       \ 
       border:  20px solid gray !important;  \ 
      }            \ 
     </style>           \ 
    '); 

    //-- Use jQuery .on(), not .click(). 
    $(document.body).on ("click", "img.myExt_HasExif", popupLatLong); 
}); 

function CompForExifPluginInitDelay() { 
    //-- Exif Init takes somewhere between 1.6 and 6 seconds on Chrome!!! 
    var numChecks  = 0; 
    var checkInterval = 444; //-- 0.4 secs is plenty fast enough 
    var maxChecks  = 6 * 1000/checkInterval + 1; 

    var imageCheckTimer = setInterval (function() { 
      numChecks++; 

      findImagesWithLatLong (numChecks); 

      if (numChecks >= maxChecks) { 
       clearInterval (imageCheckTimer); 

       //-- All remaining images don't have lat-long data. 
       $("img").not(".myExt_HasExif").addClass("myExt_WithoutExif"); 

       console.log ("***** Passes complete! *****"); 
      } 
     }, 
     checkInterval 
    ); 
} 

function findImagesWithLatLong (passNum) { 
    console.log ("***** Pass: ", passNum); 
    $("img").not (".myExt_HasExif").each (function (J) { 
     var jThis = $(this); 
     var gpslo = jThis.exif ("GPSLongitude"); 
     var gpsla = jThis.exif ("GPSLatitude"); 

     console.log (J + ": ", gpslo + "--" + gpsla); 
     if (gpslo != 0) { 
      jThis.addClass ("myExt_HasExif"); 
     } 
    }); 
} 

function popupLatLong (zEvent) { 
    var jThis = $(this); 
    alert (
     "Longitude: " + jThis.exif ("GPSLongitude") 
     + ", Latitude: " + jThis.exif ("GPSLatitude") 
    ); 
} 

這在我的測試中，到目前爲止有殺死document.write()工作，（中聯。

---

---

---

更新：使用.exifLoad()：

正如派斯指出in his answer，在Chrome時機的問題似乎被強制圖像的手動掃描與.exifLoad()解決。

這工作時我測試它，並且將是一個優選的方法使用定時器。

所以，派斯的回答作品（連同蘇達的答案），但我的代碼（解決其它問題）的版本是：

$(document).ready (function() { 
    $(window).load (findImagesWithLatLong); 

    //--- In a content script, the load event may have already fired. 
    if (document.readyState == "complete") { 
     findImagesWithLatLong(); 
    } 

    $(document.head).append ('        \ 
     <style type="text/css">        \ 
      img.myExt_HasExif {        \ 
       border:  20px solid red !important;  \ 
      }            \ 
      img.myExt_WithoutExif {       \ 
       border:  20px solid gray !important;  \ 
      }            \ 
     </style>           \ 
    '); 

    //-- Use jQuery .on(), not .click(). 
    $(document.body).on ("click", "img.myExt_HasExif", popupLatLong); 
}); 

function findImagesWithLatLong (passNum) { 
    $("img").not (".myExt_HasExif").each (function (J) { 
     $(this).exifLoad (function() { 
      var jThis = $(this); 
      var gpslo = jThis.exif ("GPSLongitude"); 
      var gpsla = jThis.exif ("GPSLatitude"); 

      console.log (J + ": ", gpslo + "--" + gpsla); 
      if (gpslo != 0) 
       jThis.addClass ("myExt_HasExif"); 
      else 
       jThis.addClass ("myExt_WithoutExif"); 
     }.bind (this)); 
    }); 
} 

function popupLatLong (zEvent) { 
    var jThis = $(this); 
    alert (
     "Longitude: " + jThis.exif ("GPSLongitude") 
     + ", Latitude: " + jThis.exif ("GPSLatitude") 
    ); 
} 

Answer 2

它可以消除jquery.exif.js下面的代碼後

/*document.write(
    "<script type='text/vbscript'>\r\n" 
    + "Function IEBinary_getByteAt(strBinary, iOffset)\r\n" 
    + " IEBinary_getByteAt = AscB(MidB(strBinary,iOffset+1,1))\r\n" 
    + "End Function\r\n" 
    + "Function IEBinary_getLength(strBinary)\r\n" 
    + " IEBinary_getLength = LenB(strBinary)\r\n" 
    + "End Function\r\n" 
    + "</script>\r\n" 
);*/ 

就消除上述可待因jquery.exif.js它的工作原理

輸出

讓我知道你是否需要更多信息

Answer 3

這比回答的評論，但它涉及到代碼，所以我不得不這樣做的一個答案......

當我想它幾乎沒有工作對我來說你試圖獲得在不存在尚未值你的工作例如，由於文件沒有被通過xhr電話獲得。
您可以通過將代碼更改爲以下來解決此問題。這可能會被納入到布洛克亞當斯的答案，以避免使用CompForExifPluginInitDelay真的可能會被擊中和錯過。

jQuery(window).load(function() { 
    $('img').each(function() { 
     $(this).exifLoad(function() { 
      var gpslo = 0; 
      var gpsla = 0; 
      if(typeof(gpslo) != "undefined" && gpslo !== null) { 
       var gpslo = $(this).exif("GPSLongitude"); 
       var gpsla = $(this).exif("GPSLatitude"); 
      } 
      console.log(gpslo + "--" + gpsla); 
      if(gpslo != 0) { 
       $(this).css('border', "solid 20px red"); 
       $(this).click(function() { 
        alert("Longitude: " + $(this).exif("GPSLongitude") + ", Latitude: " + $(this).exif("GPSLatitude")); 
       }); 
      } else { 

       $(this).css('border', "solid 20px gray"); 
      }; 

     }.bind($(this))); 
    }); 
}); 

與往常一樣，我並不真正瞭解JQuery，所以如果這可以用更多的JQ方式完成，那麼請說。