使用jQuery插件的代码可在Chrome中使用，但不能在Chrome扩展程序中使用？

Question

I have a small JavaScript file based in JS/jQuery and an additional library. It is running perfectly as independent files, but I am having problems getting it up and running in a Chrome extension.

The script checks each image of an HTML page for specific characteristics, and depending on that adds a border around the image.

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"); 
        };

    });
});

Now, when I run this in Chrome on a very simple 1-picture only website, I receive no error at all but just a white page.

Also everything works fine running the script outside of the extension system. I am not quite sure how to explain this better. These are my first steps outside of tutorials, so please be kind :)

I uploaded the complete test and extension files to: Working(Html).zip and NotWorking(Chrome).zip .

Answer 1

As Sudarshan answered , comment out that document.write code in jquery.exif.js . document.write in a content script erases the previous DOM, and VBscript doesn't work in Chrome anyway.

However, that is not the only problem:

1. When the content script is set to "run_at" : "document_start" , as in the question, you must use $(document).ready() . When in doubt, it never hurts to use $(document).ready() anyway.

2. When the content script is set to "run_at" : "document_idle" , as in the files you linked, the script may fire after the document.load event has . So, $(window).load() will not always work.

3. In Chrome, at least on the test page you provided, it takes up to 6 seconds for the Exif data to come in! (It's pretty much instantaneous on Firefox.) This means, you need to check the images after a time delay.

Other, less critical, issues:

1. Use CSS classes to help with the aforementioned timed checks and to avoid inline CSS.
2. Use jQuery's .on() , rather than .click() , so that the handler only is attached once and gracefully compensates for AJAX changes.

Putting it all together, content_script.js becomes ( Update, see below this script ):

$(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")
    );
}

which works in all my tests so far, (In conjunction with killing that document.write() .

---

---

---

Update: Using .exifLoad() :

As PAEz pointed out in his answer , the Chrome timing issue seems to be resolved by forcing a manual scan of the images with .exifLoad() .

This works when I tested it, and would be a preferable approach to using a timer.

So, PAEz's answer works (in conjunction with Sudarshan's answer), but my version of the code (addressing the other issues) would be:

$(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

It works after eliminating following code in 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"
);*/

Just eliminate the above codein jquery.exif.js it works

Output

Let me know if you need more information

Answer 3

This is more of a comment than an answer, but it involves code so I had to do it as an answer...

When I tried your working example it hardly ever worked for me as your trying to get at values that aren't present yet due to the file not being got yet by the xhr call.
You can fix this by changing your code to the below. This may possibly be incorporated into Brock Adams answer to avoid using CompForExifPluginInitDelay which really could be hit and miss.

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)));
    });
});

As always, I don't really know JQuery so if this could be done in a more JQ way then please say.