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