爲什麼我的jQuery-UI腳本不能在Greasemonkey中執行？它運行在Firebug控制檯

Question

我試圖在這個相當多的研究，因爲這是我第一次的Greasemonkey腳本：

// ==UserScript== 
// @name   Codecademy Resizeable Code 
// @description Adds jQuery resizable to editor 
// @namespace  http://chrisneetz.com 
// @include  http://www.codecademy.com/courses/* 
// ==/UserScript== 

$('#editor').resizable({ alsoResize: ".ace_scroller, .ace_editor, .ace_content, .ace_sb, .ace_print_margin_layer", handles: "n, s" }); 

我已經試過的Greasemonkey的建議，我不知道這是否是一個兼容性問題或不。 Third Party Libraries我已經將它包裝在一個文檔中，它沒有任何區別，但是當我使用Firebug控制檯時，它工作正常。

Answer 1

更新：

現在我建議只使用託管在谷歌標準的主題之一，而忘記了試圖讓一切從本地副本運行（在 @resource指令的目的和CSS重新編寫，如下圖所示

）。

參見this answer for a less maintenance-intensive approach to jQuery-UI loading。

---

老答案（仍然有效）：

Firebug的JavaScript中的目標頁面範圍內執行。
Greasemonkey JavaScript在受保護和特權的sandbox中執行。

這意味着如果頁面加載庫，如jQuery和jQuery-UI，Greasemonkey腳本通常不會看到它們。 （有辦法，但儘可能避免它們。）

這個鏈接在問題中給出了答案。由於代碼：$('#editor').resizable(...使用jQuery和jQuery的UI，你的腳本必須包括那些庫 - 像這樣：

// ==UserScript== 
// @name  Codecademy Resizeable Code 
// @description Adds jQuery resizable to editor 
// @namespace http://chrisneetz.com 
// @include  http://www.codecademy.com/courses/* 
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 
// @require  http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js 
// @grant  GM_addStyle 
// ==/UserScript== 

$('#editor').resizable ({ 
    alsoResize: ".ace_scroller, .ace_editor, .ace_content, .ace_sb, .ace_print_margin_layer", 
    handles: "n, s" 
}); 

---

然而，jQuery的UI也使用了大量的自定義CSS。讓這個CSS與Greasemonkey一起工作更有意義。像這樣改變腳本，使用CSS，加上2個更好的圖標集：

// ==UserScript== 
// @name  Codecademy Resizeable Code 
// @description Adds jQuery resizable to editor 
// @namespace http://chrisneetz.com 
// @include  http://www.codecademy.com/courses/* 
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 
// @require  http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js 
// @resource jqUI_CSS http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css 
// @resource IconSet1 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_222222_256x240.png 
// @resource IconSet2 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_454545_256x240.png 
// @grant  GM_addStyle 
// @grant  GM_getResourceURL 
// @grant  GM_getResourceText 
// ==/UserScript== 

$('#editor').resizable ({ 
    alsoResize: ".ace_scroller, .ace_editor, .ace_content, .ace_sb, .ace_print_margin_layer", 
    handles: "n, s" 
}); 

/*--- Process the jQuery-UI, base CSS, to work with Greasemonkey (we are not on a server) 
    and then load the CSS. 

    *** Kill the useless BG images: 
     url(images/ui-bg_flat_0_aaaaaa_40x100.png) 
     url(images/ui-bg_flat_75_ffffff_40x100.png) 
     url(images/ui-bg_glass_55_fbf9ee_1x400.png) 
     url(images/ui-bg_glass_65_ffffff_1x400.png) 
     url(images/ui-bg_glass_75_dadada_1x400.png) 
     url(images/ui-bg_glass_75_e6e6e6_1x400.png) 
     url(images/ui-bg_glass_95_fef1ec_1x400.png) 
     url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 

    *** Rewrite the icon images, that we use, to our local resources: 
     url(images/ui-icons_222222_256x240.png) 
     becomes 
     url("' + GM_getResourceURL ("IconSet1") + '") 
     etc. 
*/ 
var iconSet1 = GM_getResourceURL ("IconSet1"); 
var iconSet2 = GM_getResourceURL ("IconSet2"); 
var jqUI_CssSrc = GM_getResourceText ("jqUI_CSS"); 
jqUI_CssSrc  = jqUI_CssSrc.replace (/url\(images\/ui\-bg_.*00\.png\)/g, ""); 
jqUI_CssSrc  = jqUI_CssSrc.replace (/images\/ui-icons_222222_256x240\.png/g, iconSet1); 
jqUI_CssSrc  = jqUI_CssSrc.replace (/images\/ui-icons_454545_256x240\.png/g, iconSet2); 

GM_addStyle (jqUI_CssSrc);