Chrome의 Greasemonkey 스크립트에서 jQuery를 사용하려면 어떻게해야하나요?
아시다시피, Chrome은 Greasemonkey 스크립트에 심각한 제한을 두었습니다.
크롬은 지원하지 않습니다
@require,@resource,unsafeWindow,GM_registerMenuCommand,GM_setValue, 또는GM_getValue.
필요하지 않으면 jQuery 라이브러리를 Chrome의 Greasemonkey 스크립트에 포함시키는 방법을 찾을 수 없습니다.
이 문제에 대해 조언이 있습니까?
에서 "- 에릭 Vold 사용자의 블로그 사용 jQuery를 사용자 스크립트 팁"
// ==UserScript==
// @name jQuery For Chrome (A Cross Browser Example)
// @namespace jQueryForChromeExample
// @include *
// @author Erik Vergobbi Vold & Tyler G. Hicks-Wright
// @description This userscript is meant to be an example on how to use jQuery in a userscript on Google Chrome.
// ==/UserScript==
// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
var script = document.createElement("script");
script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
script.addEventListener('load', function() {
var script = document.createElement("script");
script.textContent = "window.jQ=jQuery.noConflict(true);(" + callback.toString() + ")();";
document.body.appendChild(script);
}, false);
document.body.appendChild(script);
}
// the guts of this userscript
function main() {
// Note, jQ replaces $ to avoid conflicts.
alert("There are " + jQ('a').length + " links on this page.");
}
// load jQuery and execute the main function
addJQuery(main);
문서에서 함수, 코드 및 기타 스크립트를 실행할 수 있도록 Erik Vold의 스크립트 를 기반으로 몇 가지 함수를 작성했습니다 . 그것들을 사용하여 jQuery를 페이지에로드 한 다음 전역 window범위 에서 코드를 실행할 수 있습니다 .
사용법 예
// ==UserScript==
// @name Example from http://stackoverflow.com/q/6834930
// @version 1.3
// @namespace http://stackoverflow.com/q/6834930
// @description An example, adding a border to a post on Stack Overflow.
// @include http://stackoverflow.com/questions/2246901/*
// ==/UserScript==
var load,execute,loadAndExecute;load=function(a,b,c){var d;d=document.createElement("script"),d.setAttribute("src",a),b!=null&&d.addEventListener("load",b),c!=null&&d.addEventListener("error",c),document.body.appendChild(d);return d},execute=function(a){var b,c;typeof a=="function"?b="("+a+")();":b=a,c=document.createElement("script"),c.textContent=b,document.body.appendChild(c);return c},loadAndExecute=function(a,b){return load(a,function(){return execute(b)})};
loadAndExecute("//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js", function() {
$("#answer-6834930").css("border", ".5em solid black");
});
악의적 인 것을 설치하도록 속이려고하지 않으며 다른 사람을 가리 키도록 내 게시물을 편집 한 사람이 아무도 없다고 믿는 경우 여기 를 클릭 하여 설치할 수 있습니다 . 페이지를 다시로드하면 내 게시물 주위에 테두리가 나타납니다.
기능
load(url, onLoad, onError)
스크립트를 url문서에 로드합니다 . 선택적으로, 콜백이 제공 될 수있다 onLoad및 onError.
execute(functionOrCode)
함수 또는 코드 문자열을 문서에 삽입하고 실행합니다. 함수는 삽입되기 전에 소스 코드로 변환되므로 현재 범위 / 폐쇄를 잃고 전역 window범위 아래에서 실행 됩니다.
loadAndExecute(url, functionOrCode)
지름길; 이것은에서 스크립트를로드 한 url다음 functionOrCode성공하면 삽입하고 실행 합니다.
암호
function load(url, onLoad, onError) {
e = document.createElement("script");
e.setAttribute("src", url);
if (onLoad != null) { e.addEventListener("load", onLoad); }
if (onError != null) { e.addEventListener("error", onError); }
document.body.appendChild(e);
return e;
}
function execute(functionOrCode) {
if (typeof functionOrCode === "function") {
code = "(" + functionOrCode + ")();";
} else {
code = functionOrCode;
}
e = document.createElement("script");
e.textContent = code;
document.body.appendChild(e);
return e;
}
function loadAndExecute(url, functionOrCode) {
load(url, function() { execute(functionOrCode); });
}
호출 하여 충돌에 대한 두려움없이 jQuery 를 사용하십시오 jQuery.noConflict(true). 이렇게 :
function GM_main ($) {
alert ('jQuery is installed with no conflicts! The version is: ' + $.fn.jquery);
}
add_jQuery (GM_main, "1.7.2");
function add_jQuery (callbackFn, jqVersion) {
jqVersion = jqVersion || "1.7.2";
var D = document;
var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
var scriptNode = D.createElement ('script');
scriptNode.src = 'http://ajax.googleapis.com/ajax/libs/jquery/'
+ jqVersion
+ '/jquery.min.js'
;
scriptNode.addEventListener ("load", function () {
var scriptNode = D.createElement ("script");
scriptNode.textContent =
'var gm_jQuery = jQuery.noConflict (true);\n'
+ '(' + callbackFn.toString () + ')(gm_jQuery);'
;
targ.appendChild (scriptNode);
}, false);
targ.appendChild (scriptNode);
}
그러나 크로스 브라우저 스크립트의 경우 가능하면 신속하고 멋진 로컬 jQuery 사본을 활용 해보십시오.
다음은 Chrome 사용자 스크립트 및 Greasemonkey 스크립트로 작동하며 @require플랫폼에서 지원하는 경우 멋진 jQuery 로컬 사본을 사용 합니다.
// ==UserScript==
// @name _Smart, cross-browser jquery-using script
// @include http://YOUR_SERVER.COM/YOUR_PATH/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant GM_info
// ==/UserScript==
function GM_main ($) {
alert ('jQuery is installed with no conflicts! The version is: ' + $.fn.jquery);
}
if (typeof jQuery === "function") {
console.log ("Running with local copy of jQuery!");
GM_main (jQuery);
}
else {
console.log ("fetching jQuery from some 3rd-party server.");
add_jQuery (GM_main, "1.7.2");
}
function add_jQuery (callbackFn, jqVersion) {
var jqVersion = jqVersion || "1.7.2";
var D = document;
var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
var scriptNode = D.createElement ('script');
scriptNode.src = 'http://ajax.googleapis.com/ajax/libs/jquery/'
+ jqVersion
+ '/jquery.min.js'
;
scriptNode.addEventListener ("load", function () {
var scriptNode = D.createElement ("script");
scriptNode.textContent =
'var gm_jQuery = jQuery.noConflict (true);\n'
+ '(' + callbackFn.toString () + ')(gm_jQuery);'
;
targ.appendChild (scriptNode);
}, false);
targ.appendChild (scriptNode);
}
페이지에 이미 jQuery가있는 경우 다음 템플릿을 따르십시오.
// ==UserScript==
// @name My Script
// @namespace my-script
// @description Blah
// @version 1.0
// @include http://site.com/*
// @author Me
// ==/UserScript==
var main = function () {
// use $ or jQuery here, however the page is using it
};
// Inject our main script
var script = document.createElement('script');
script.type = "text/javascript";
script.textContent = '(' + main.toString() + ')();';
document.body.appendChild(script);
간단한 방법은 required키워드를 사용하는 것입니다 .
// @require http://code.jquery.com/jquery-latest.js
해당 스크립트가 실제로 권한 기능 (GM_ * 함수 등)을 사용하지 않는 경우 Chrome 용 jQuery 스크립트의 전체 사본을 포함하는 것이 가장 쉬운 방법입니다 ...
스크립트 자체를 페이지 DOM에 삽입하고 실행하십시오! 가장 좋은 점은이 기술이 Firefox + Greasemonkey에서도 잘 작동한다는 것입니다. 따라서 두 가지에 동일한 스크립트를 사용할 수 있습니다.
var script = document.createElement("script");
script.type = "text/javascript";
script.textContent = "(" + threadComments.toString() + ")(jQuery)";
document.body.appendChild(script);
function threadComments($) {
// taken from kip's http://userscripts-mirror.org/scripts/review/62163
var goodletters = Array('\u00c0','\u00c1','\u00c2','\u00c3','\u00c4','\u00c5','\u00c6','\u00c7'
,'\u00c8','\u00c9','\u00ca','\u00cb','\u00cc','\u00cd','\u00ce','\u00cf'
,'\u00d1','\u00d2','\u00d3','\u00d4','\u00d5','\u00d6'
,'\u00d8','\u00d9','\u00da','\u00db','\u00dc','\u00dd'
,'\u00e0','\u00e1','\u00e2','\u00e3','\u00e4','\u00e5','\u00e6','\u00e7'
,'\u00e8','\u00e9','\u00ea','\u00eb','\u00ec','\u00ed','\u00ee','\u00ef'
,'\u00f1','\u00f2','\u00f3','\u00f4','\u00f5','\u00f6'
,'\u00f8','\u00f9','\u00fa','\u00fb','\u00fc','\u00fd' ,'\u00ff').join('');
// from Benjamin Dumke's http://userscripts-mirror.org/scripts/review/68252
function goodify(s)
{
good = new RegExp("^[" + goodletters + "\\w]{3}");
bad = new RegExp("[^" + goodletters + "\\w]");
original = s;
while (s.length >3 && !s.match(good)) {
s = s.replace(bad, "");
}
if (!s.match(good))
{
// failed, so we might as well use the original
s = original;
}
return s;
}
in_reply_to = {};
function who(c, other_way) {
if (other_way)
{
// this is closer to the real @-reply heuristics
m = /@(\S+)/.exec(c);
}
else
{
m = /@([^ .:!?,()[\]{}]+)/.exec(c);
}
if (!m) {return}
if (other_way) {return goodify(m[1]).toLowerCase().slice(0,3);}
else {return m[1].toLowerCase().slice(0,3);}
}
function matcher(user, other_way) {
if (other_way)
{
return function () {
return goodify($(this).find(".comment-user").text()).toLowerCase().slice(0,3) == user
}
}
else
{
return function () {
return $(this).find(".comment-user").text().toLowerCase().slice(0,3) == user
}
}
}
function replyfilter(id) {
return function() {
return in_reply_to[$(this).attr("id")] == id;
}
}
function find_reference() {
comment_text = $(this).find(".comment-text").text();
if (who(comment_text))
{
fil = matcher(who(comment_text));
all = $(this).prevAll("tr.comment").filter(fil);
if (all.length == 0)
{
// no name matched, let's try harder
fil = matcher(who(comment_text, true), true);
all = $(this).prevAll("tr.comment").filter(fil);
if (all.length == 0) {return}
}
reference_id = all.eq(0).attr("id");
in_reply_to[$(this).attr("id")] = reference_id;
}
}
// How far may comments be indented?
// Note that MAX_NESTING = 3 means there are
// up to *four* levels (including top-level)
MAX_NESTING = 3
// How many pixels of indentation per level?
INDENT = 30
function indenter(parent) {
for (var i = MAX_NESTING; i > 0; i--)
{
if (parent.hasClass("threading-" + (i-1)) || (i == MAX_NESTING && parent.hasClass("threading-" + i)))
{
return function() {
$(this).addClass("threading-" + i).find(".comment-text").css({"padding-left": INDENT*i});
}
}
}
return function() {
$(this).addClass("threading-1").find(".comment-text").css({"padding-left": INDENT});
}
}
function do_threading(){
id = $(this).attr("id");
replies = $(this).nextAll("tr.comment").filter(replyfilter(id));
ind = indenter($(this));
replies.each(ind);
replies.insertAfter(this);
}
function go() {
$("tr.comment").each(find_reference);
$("tr.comment").each(do_threading);
}
$.ajaxSetup({complete: go});
go();
}
(단지 Meta.stackoverflow에서 Shog9에서 도용되지 않았으므로 메타 포스트를 삭제해야합니다.)
또한 jQuery to Chrome 확장 프로그램으로 스크립트를 포장 할 수 있습니다. Chrome의 콘텐츠 스크립트를 참조하십시오 .
Greasemonkey 스크립트와 달리 Chrome 확장 프로그램은 자동 업데이트 될 수 있습니다.
더 쉬운 해결책 : jquery.min.js의 내용을 사용자 스크립트 상단에 잘라내어 붙여 넣기하십시오. 끝난.
권장 답변과 관련된 다양한 문제를 발견했습니다. addJQuery () 솔루션은 대부분의 페이지에서 작동하지만 많은 버그가 있습니다. 문제가 발생하면 jquery 내용을 스크립트에 복사하여 붙여 넣으십시오.
I wonder if you couldn't rely on document.defaultView.jQuery in your GM script ala:
if (document.defaultView.jQuery) {
jQueryLoaded(document.defaultView.jQuery);
} else {
var jq = document.createElement('script');
jq.src = 'http://jquery.com/src/jquery-latest.js';
jq.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(jq);
(function() {
if (document.defaultView.jQuery) jQueryLoaded(document.defaultView.jQuery);
else setTimeout(arguments.callee, 100);
})();
}
function jQueryLoaded($) {
console.dir($);
}
Another approach would be to modify your script to load jQuery manually. Example from http://joanpiedra.com/jquery/greasemonkey/:
// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);
// Check if jQuery's loaded
function GM_wait() {
if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
else { $ = unsafeWindow.jQuery; letsJQuery(); }
}
GM_wait();
// All your GM code must be inside this function
function letsJQuery() {
alert($); // check if the dollar (jquery) function works
}
EDIT: DRATS! After testing it appears this code does not work since Google Chrome runs userscripts/extensions in a separate scope/process from the actual webpage. You can download the jQuery code using an XmlhttpRequest and then Eval it, but you have to host the code on a server that allows Cross-Origin Resource Sharing using the Access-Control-Allow-Origin: * header. Sadly NONE of the current CDNs with jQuery support this.
Perfect extension to embed jQuery into Chrome Console as simple as you can imagine. This extension also indocates if jQuery has been already embeded into page.
This extension used to embed jQuery into any page you want. It allows to use jQuery in the console shell (You can invoke Chrome console by "Ctrl+Shift+j").
To embed jQuery into selected tab click on extention button.
LINK to extension: https://chrome.google.com/extensions/detail/gbmifchmngifmadobkcpijhhldeeelkc
'Programming' 카테고리의 다른 글
| 다른 Git 태그로 전환 (0) | 2020.06.07 |
|---|---|
| C #에서 명명 된 문자열 형식 (0) | 2020.06.07 |
| 시간 또는 10 분 단위로 시간을 그룹화하는 방법 (0) | 2020.06.07 |
| 변경 불가능한 컬렉션과 수정 불가능한 컬렉션 (0) | 2020.06.07 |
| CultureInfo.InvariantCulture은 무슨 뜻인가요? (0) | 2020.06.07 |