구글 크롬의 그리스몽키 스크립트에서 jQuery를 어떻게 사용할 수 있습니까?
아시는 분들도 계시겠지만 구글 크롬은 그리스몽키 스크립트에 몇 가지 심각한 제한을 두고 있습니다.
은 크은지원지않습다니하롬다니▁support▁not▁chromium를 지원하지 않습니다.
@require,@resource,unsafeWindow,GM_registerMenuCommand,GM_setValue또는GM_getValue.
필요 없이 구글 크롬 아래의 그리스몽키 스크립트에 jQuery 라이브러리를 포함시키는 방법을 찾을 수 없습니다.
이 문제에 대해 조언을 해줄 사람이 있습니까?
출처: "사용자 스크립트 팁: 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);
문서에서 함수, 코드 및 기타 스크립트를 실행하는 데 도움이 되는 에릭 볼드 스크립트를 기반으로 몇 가지 함수를 작성했습니다.이를 사용하여 페이지에 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 복사본을 활용하는 것이 어떻습니까?
다음은 크롬 사용자 스크립트와 그리스몽키 스크립트로 작동하며, 멋진 로컬을 사용합니다.@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_* 함수 등)을 실제로 사용하지 않는 크롬용 jQuery 스크립트의 전체 복사본을 포함하여 이동하는 매우 쉬운 방법이 있습니다.
DOM 페이지에 스크립트 자체를 삽입하고 실행하기만 하면 됩니다!가장 좋은 점은 이 기술이 Firefox+Greasmonkey에서도 작동하므로 다음 두 가지 모두에 동일한 스크립트를 사용할 수 있다는 것입니다.
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();
}
(shog9에서 meta.stack 오버플로에 대해 사과하지 않고 도난당했습니다. 왜냐하면 그가 여기로 옮기지 않았기 때문입니다. 그리고 저는 meta 게시물을 삭제해야 합니다.)
또한 스크립트를 jQuery to Chrome 확장으로 패킹할 수 있습니다.Google Chrome의 컨텐츠 스크립트를 참조하십시오.
Greasemonkey 스크립트와 달리 Chrome 확장은 자동으로 업데이트할 수 있습니다.
더 쉬운 해결책: jquery.min.js의 내용을 사용자 스크립트의 맨 위에 잘라내거나 붙여넣습니다.다 했어요.
저는 추천 답변에서 다양한 문제점을 발견했습니다.추가JQuery() 솔루션은 대부분의 페이지에서 작동하지만 버그가 많습니다.문제가 발생하면 jquery 내용을 스크립트에 복사/붙여넣기만 하면 됩니다.
당신이 믿을 수 없었는지 궁금합니다.document.defaultView.jQueryGM 스크립트에서:
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($);
}
또 다른 방법은 수동으로 jQuery를 로드하도록 스크립트를 수정하는 것입니다.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
}
편집: DRATS! 테스트 후 Google Chrome이 실제 웹 페이지와 별도의 범위/프로세스에서 사용자 스크립트/확장을 실행하기 때문에 이 코드가 작동하지 않는 것으로 나타납니다.XmlhttpRequest를 사용하여 jQuery 코드를 다운로드한 다음 Evaluate를 수행할 수 있지만, 다음을 사용하여 Cross-Origin Resource Sharing을 허용하는 서버에서 코드를 호스트해야 합니다.Access-Control-Allow-Origin: *표제의안타깝게도 현재 jQuery를 사용하는 CDN 중 이를 지원하는 CDN은 없습니다.
크롬 콘솔에 jQuery를 쉽게 내장할 수 있는 완벽한 확장입니다.이 확장명은 jQuery가 이미 페이지에 포함되어 있는지도 나타냅니다.
이 확장은 원하는 페이지에 jQuery를 포함하는 데 사용됩니다.콘솔 셸에서 jQuery를 사용할 수 있습니다("Ctrl+Shift+j"로 크롬 콘솔을 호출할 수 있습니다).
jQuery를 선택한 탭에 삽입하려면 확장 버튼을 클릭합니다.
확장자 링크: https://chrome.google.com/extensions/detail/gbmifchmngifmadobkcpijhhldeeelkc
언급URL : https://stackoverflow.com/questions/2246901/how-can-i-use-jquery-in-greasemonkey-scripts-in-google-chrome
'it-source' 카테고리의 다른 글
| Spring MVC 컨트롤러 테스트에서 서비스 클래스를 모의 실행할 수 없습니다. (0) | 2023.07.30 |
|---|---|
| Oracle의 LEFT 함수 (0) | 2023.07.30 |
| 도커 합성을 사용하여 컨테이너에 파일 복사 (0) | 2023.07.30 |
| Spring Hibernate Template 실행 메서드가 Oracle에서 카운트 쿼리에 대해 반환하는 개체 유형은 무엇입니까? (0) | 2023.07.30 |
| git 명령에 대한 PowerShell의 별칭을 생성하시겠습니까? (0) | 2023.07.30 |