作業中のGreasemonkeyスクリプトに基づいて、ChromeのuserscriptでjQueryとGM_addStyleを動作させるようにしました。

Question

私は、フライオーバーポップアップでサムネイル画像を拡大する単純なGreasemonkey scriptを書きました。それはそれで多くのjQueryを使います。 Firefox上でうまく動作します。 Chromeでは@requireをサポートしていないため、Chromeでは使用できません。

この件に関してはsolutionと出会いました。しかし、このスクリプトは、get-aroundコードと統合しても、Chromeで動作しませんでした。私はすべてのスクリプトコードをソリューションコードのmain関数の中に入れています。

間違っていますか？誰が問題がどこにあるのかを指摘でき、それを正しくするためにできることがあれば、非常に感謝しています。

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

Answer 1

二つの主要な問題と1 可能問題：

1）main()関数内GM_addStyle()をラップしないでください。 GM_addStyle()はスクリプトスコープ内でのみ動作し、ターゲットページ（これはmain()とaddJQuery()ビジネスが行うものです）に注入されません。

2）現在のコードではE4Xを使用して複数行の文字列をGM_addStyle()に送信しますが、ChromeではE4Xがサポートされていません。

アラス、the multiline string hack that Chrome does support (for now)はFirefoxでは動作しません。

つまり、両方のブラウザをサポートしたい場合は、GM_addStyle()で現実的なスタイルをコーディングするのが少し難しくなります。そのように複数行のエスケープ文字（\）を使用してください：？

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()の特定のバージョンは常に（仕事の競合状態ではない場合があります）。そうでない場合は教えてください。

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.