使用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方式完成，那么请说。