¿Cómo puedo usar jQuery en los scripts de Greasemonkey en Google Chrome?
https://stackoverflow.com/questions/2246901
-
20-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Como algunos de ustedes saben, Google Chrome ha puesto alguna limitación severa en scripts de Greasemonkey.
El cromo no soporta
@require,@resource,unsafeWindow,GM_registerMenuCommand,GM_setValueoGM_getValue.
Sin requerir, no puedo encontrar una manera de incluir la librería jQuery en el script de Greasemonkey en virtud de Google Chrome.
¿Alguien tiene algún consejo en este asunto?
Solución
Desde "usuario guión Tip: Uso de jQuery - Blog de Erik Vold"
// ==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);
Otros consejos
He escrito algunas funciones basadas en el guión de Erik Vold para ayudar a dirigir yo corro funciones, código y otras secuencias de comandos en un documento. Puede usarlos para cargar jQuery en la página y luego ejecutar código en el ámbito window global.
Ejemplo de Uso
// ==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");
});
Puede clic aquí para instalarlo, si confía en que no estoy tratando de engañarle para instalar algo malicioso y que nadie ha editado mi post para apuntar a otra cosa. Recargar la página y debería ver un borde alrededor de mi puesto.
Funciones
load(url, onLoad, onError)
Carga el guión en url en el documento. Opcionalmente, las devoluciones de llamada se pueden proporcionar para onLoad y onError.
execute(functionOrCode)
Inserta una función o una cadena de código en el documento y lo ejecuta. Las funciones se convierten en código fuente antes de ser insertado, por lo que pierden su alcance actual / cierres y se ejecutan bajo el alcance window global.
loadAndExecute(url, functionOrCode)
Un acceso directo; esta carga un script desde url, a continuación, inserta y ejecuta functionOrCode si tiene éxito.
Código
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); });
}
Usar jQuery sin temor a conflictos , llamando jQuery.noConflict(true). De esta manera:
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);
}
Pero, Para los scripts cross-browser, ¿por qué no aprovechar las ventajas de una buena copia local, rápido, de jQuery, cuando se puede?
Los siguientes trabajos como userscript Chrome y un script de Greasemonkey, y utiliza el buen copia local del @require jQuery, si la plataforma es compatible con ella.
// ==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);
}
Si la página ya cuenta con jQuery, a continuación, sólo tiene que seguir esta plantilla:
// ==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);
La forma más sencilla está utilizando palabras clave required:
// @require http://code.jquery.com/jquery-latest.js
Hay una manera muy fácil de recorrer incluyendo una copia completa de jQuery para los scripts de Chrome cuando esos guiones en realidad no usar cualquier función privilegiados (* GM_ funciones, etc) ...
Sólo tiene que insertar el propio script en la página DOM y ejecutar! La mejor parte es que esta técnica funciona igual de bien en Firefox + Greasemonkey, para que pueda utilizar el mismo guión para ambos:
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();
}
(robado sin complejos de Shog9 en meta.stackoverflow ya que él no se movió aquí, y tengo que borrar el mensaje meta ..)
Además, se puede empacar su guión con jQuery para extensión de Chrome. Ver Scripts contenido Google de Chrome .
extensiones de Chrome, a diferencia de los scripts de Greasemonkey, puede auto-actualización de sí mismo.
solución más sencilla: corte + pegar el contenido de jquery.min.js en la parte superior de la secuencia de comandos de usuario. Hecho.
He encontrado varios problemas con las respuestas recomendadas. La solución addJQuery () funciona en la mayoría de las páginas, pero tiene bichos en muchos. Si se encuentra con problemas simplemente copiar + pegar el contenido de jQuery en su guión.
Me pregunto si no se podía confiar en document.defaultView.jQuery en su ala escritura de GM:
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($);
}
Otro enfoque sería modificar la secuencia de comandos para cargar jQuery manualmente. Ejemplo de 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
}
EDITAR: drats Después de probar parece que este código no funciona desde que Google Chrome se ejecuta userscripts / extensiones en un ámbito / proceso independiente de la página web real. Puede descargar el código jQuery usando un XmlHttpRequest y luego se Eval, pero hay que acoger el código en un servidor que permite origen cruzado de intercambio de recursos usando la cabecera Access-Control-Allow-Origin: *. NINGUNO tristemente de los CDN actuales con jQuery compatible con esta.
extensión perfecta para incrustar jQuery en Chrome consola tan simple como se puede imaginar. Esta extensión también indocates si jQuery ya se ha Embebido en la página.
Esta extensión se utiliza para incrustar jQuery en cualquier página que desea. Permite utilizar jQuery en la cáscara de la consola (Puede invocar consola Chrome por "Ctrl + Shift + j").
Para incrustar en jQuery ficha seleccionada, haga clic en el botón extensión.
LINK para extensión: https://chrome.google.com/extensions/detail/gbmifchmngifmadobkcpijhhldeeelkc
