javascript - 使用 jQuery 插件的代码可以在 Chrome 中运行，但不能在 Chrome 扩展中运行？

Question

我有一个基于 JS/jQuery 的小 JavaScript 文件和一个额外的库。它作为独立文件完美运行，但我在 Chrome 扩展程序中启动和运行时遇到问题。

脚本检查 HTML 页面的每个图像的特定特征，并根据特征在图像周围添加边框。

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

    });
});

现在，当我在一个非常简单的只有 1 张图片的网站上在 Chrome 中运行它时，我没有收到任何错误，只有一个白页。

在扩展系统之外运行脚本也一切正常。我不太确定如何更好地解释这一点。这些是我在教程之外的第一步，所以请善待 :)

我将完整的测试和扩展文件上传到:Working(Html).zip和 NotWorking(Chrome).zip .

Answer 1

As Sudarshan answered ，注释掉jquery.exif.js中的document.write代码。内容脚本中的 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():

正如 PAEz 指出的那样 in his answer , Chrome 计时问题似乎通过使用 .exifLoad() 强制手动扫描图像来解决。

这在我测试时有效，并且是使用计时器的更可取的方法。

因此，PAEz 的答案有效(结合 Sudarshan 的答案)，但我的代码版本(解决其他问题)将是:

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