Получение jQuery и GM_addStyle для работы в пользовательском скрипте Chrome на основе работающего скрипта Greasemonkey - PullRequest
Новая
       6

Получение jQuery и GM_addStyle для работы в пользовательском скрипте Chrome на основе работающего скрипта Greasemonkey

2 голосов
/ 24 декабря 2011

Я написал простой Greasemonkey скрипт , который увеличивает уменьшенные изображения во всплывающем окне.Он использует много jQuery.Он отлично работает на Firefox.Но не в Chrome, поскольку он не поддерживает @ require.

Я наткнулся на это решение по этому вопросу.Но скрипт не работал на 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);

1 Ответ

2 голосов
/ 25 декабря 2011

Две основные проблемы и 1 возможная проблема:

1) Не переносите GM_addStyle() внутри функции main().GM_addStyle() работает только в области действия сценария, он не будет работать, внедренный в целевую страницу (что и делает бизнес main() и addJQuery()).

2) В текущем коде используется E4X для создания многострочной строки для отправки на GM_addStyle(), но Chrome не поддерживает E4X.

Увы, взлом многострочной строки, которую поддерживает Chrome (на данный момент) не работает в Firefox.

Это означает, что немного сложнее кодировать реалистичные стили с GM_addStyle(), если вы хотите поддерживать оба браузера.Используйте многострочный escape-символ (\) следующим образом: 

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

¿3?) Эта конкретная версия addJQuery() может не всегда работать (условие гонки).Дайте мне знать, если это не так.

...