Javascript 让jQuery和gmu addStyle在基于Greasemonkey脚本的Chrome用户脚本中工作

我写了一个简单的例子，可以放大立交桥弹出窗口中的缩略图。它使用了大量jQuery。它在Firefox上运行良好。但不在Chrome上，因为它不支持@require

我是因为这件事才发现这件事的。但是，即使在我将其与get-around代码集成之后，该脚本也无法在Chrome上运行。我只是将所有脚本代码放在解决方案代码的主函数中

错了吗？如果有人能指出问题所在，以及我能做些什么来解决问题，我将不胜感激

function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
  script.addEventListener('load', function() {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

function main() 
{
  $("body").append ('<div id="idLargePicturePopupWindow"><img></div>');

$('#idLargePicturePopupWindow').bind 
(
    "mouseenter mouseleave",
    {bInPopup: true},
    myImageHover
);

$('#profPhotos .profPhotoLink > img').bind 
(
    "mouseenter mouseleave",
    {bInPopup: false},
    myImageHover
);

function myImageHover (zEvent) 
{
    if (zEvent.type == 'mouseenter') 
    {

        if ( ! zEvent.data.bInPopup) 
        {

            var imgurl = this.src.toString();
            var bigimg = imgurl.replace(/\/thumbs\/[0-9x]+\//i, "/photos/");

            $("#idLargePicturePopupWindow img").attr ('src', bigimg);
        }

        $("#idLargePicturePopupWindow").show();
    }
    else 
    {
        $("#idLargePicturePopupWindow").hide();
    }
}

GM_addStyle ( (<><![CDATA[
    #idLargePicturePopupWindow 
    {
        position:               absolute;
        background:             white;
        border:                 none;
        margin:                 1ex;
        opacity:                1.0;
        z-index:                1222;
        min-height:             100px;
        min-width:              200px;
        padding:                0;
        display:                none;
        top:                    2em;
        left:                   50em;
    }
    #idLargePicturePopupWindow img 
    {
        margin:                 0;
        margin-bottom:          -4px;
        padding:                0;
    }
]]></>).toString () );
}

addJQuery(main);

函数addJQuery（回调）{
var script=document.createElement（“脚本”）；
script.setAttribute（“src”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
script.addEventListener（'load'，function（））{
var script=document.createElement（“脚本”）；
script.textContent=“（“+callback.toString（）+”）；”；
document.body.appendChild（脚本）；
}，假）；
document.body.appendChild（脚本）；
}
函数main（）
{
$（“body”）.append（'）.toString（）；
}
addJQuery（main）；

两个主要问题和一个可能的问题：

1） 不要将

GM\u addStyle（）

包装在

main（）

函数中

GM_addStyle（）

仅在脚本范围内工作，它不会注入到目标页面（这就是

main（）

和

addJQuery（）

业务所做的）

2） 当前代码用于生成多行字符串以发送到

GM\u addStyle（）

，但Chrome不支持E4X

唉，在Firefox中不起作用

这意味着，如果您希望同时支持两种浏览器，则使用

GM_addStyle（）

编写真实样式会稍微困难一些。使用多行转义字符（

\

），如下所示：

---

addJQuery（）

的特定版本可能并不总是有效（竞争条件）。如果没有，请告诉我。

该

结构在Chrome中不起作用。另外，jQuery注入并不是最好的。我会在几个小时后发布一个更详细的答案，如果有人没有抢先回答的话。我也有点猜到了。谢谢。：）它现在可以在铬上正常工作。不过Firefox上没有。但是没关系。我刚做了两个版本。非常感谢你。圣诞快乐，新年快乐！顺便说一句，如果这种注入方法不是最佳实践，有没有更好的方法将第三方JS库集成到用户脚本中？？或者我应该为此单独问一个问题，这样对其他人也有帮助吗？节日快乐！如果修改正确，那么脚本应该可以在FF和Chrome上运行，而不需要2个版本。至于库加载，我更喜欢检查库变量是否在计时器中定义。有时，库只有在
的加载事件触发后不久才能准备就绪。（尽管我不认为jQuery是这样的。）然后我会再次检查。顺便说一下，我不太清楚如何在JavaScript中使用计时器。你能给我举个好例子吗？谢谢。在回答问题1时：如果通过在页面中注入用户脚本来使用jQuery，那么如何从回调函数内部调用GM_*函数？或者如果这是不可能的，那么如何在Chrome的用户脚本中同时使用jQuery和GM_*函数呢？
GM_addStyle ( "                                 \
    #idLargePicturePopupWindow  {               \
        position:               absolute;       \
        background:             white;          \
        border:                 none;           \
        margin:                 1ex;            \
        opacity:                1.0;            \
        z-index:                1222;           \
        min-height:             100px;          \
        min-width:              200px;          \
        padding:                0;              \
        display:                none;           \
        top:                    2em;            \
        left:                   50em;           \
    }                                           \
    #idLargePicturePopupWindow img  {           \
        margin:                 0;              \
        margin-bottom:          -4px;           \
        padding:                0;              \
    }                                           \
" );