¿Por qué jQuery no funciona en los scripts de usuario de Chrome(Greasemonkey)?

google-chrome userscripts

Question

Posible duplicado:
¿Cómo puedo usar jQuery en los scripts de Greasemonkey en Google Chrome?

No puedo conseguir que este script de usuario funcione en Google Chrome.

// ==UserScript==
// @name voip
// @namespace 1
// @description voip
// @include *
// @require http://jquery.com/src/jquery-latest.js
// ==/UserScript==
$(document).ready(function() {
alert("Hello world!");
});

La alerta no aparece. Si acabo de poner alert("Hello world!"); En el guión, funciona.

¿Cómo puedo usar jQuery en los scripts de usuario de Chrome?

Answer 1

El documento de diseño para la implementación del script de usuario de Chrome menciona estos problemas conocidos:

• Chromium no admite @require , @resource , unsafeWindow , GM_registerMenuCommand , GM_setValue o GM_getValue .
• GM_xmlhttpRequest es solo del mismo origen.

Esto se aborda en la pregunta Incluir Jquery dentro del script GreaseMonkey en Google Chrome . Aquí está mi respuesta de esa pregunta :

He escrito algunas funciones basadas en el guión de la respuesta de Erik Vold para ayudarme a ejecutarme a ejecutar funciones, código y otros guiones en un documento. Puede usarlos para cargar jQuery en la página y luego ejecutar el código bajo el alcance de la window global.

Ejemplo de uso

// ==UserScript==
// @name Example from https://.com/q/6825715
// @version 1.2
// @namespace https://.com/q/6825715
// @description An example, adding a border to a post on .
// @include https://.com/questions/2588513/*
// ==/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-6825715").css("border", ".5em solid black");
});

Puede hacer clic aquí para instalarlo, si confía en que no estoy tratando de engañarlo para que instale algo malicioso y que nadie haya editado mi publicación para señalar otra cosa. Vuelve a cargar la página y deberías ver un borde alrededor de mi publicación.

Funciones

load(url, onLoad, onError)

Carga la secuencia de comandos en la url en el documento. Opcionalmente, se pueden proporcionar devoluciones de llamada para onLoad y onError .

execute(functionOrCode)

Inserta una función o cadena de código en el documento y lo ejecuta. Las funciones se convierten a código fuente antes de insertarse, por lo que pierden su alcance / cierre actual y se ejecutan debajo del alcance de la window global.

loadAndExecute(url, functionOrCode)

Un atajo; esto carga un script desde url , luego inserta y ejecuta functionOrCode si tiene éxito.

Código

Fuente CoffeeScript

Los escribí en CoffeeScript ( un pequeño lenguaje que compila a JavaScript ). Aquí está la fuente de CoffeeScript para que usted use CofeeScript. Para los usuarios de JavaScript, el código compilado y minificado se incluye a continuación.

load = (url, onLoad, onError) ->
e = document.createElement "script"
e.setAttribute "src", url
if onLoad? then e.addEventListener "load", onLoad
if onError? then e.addEventListener "error", onError
document.body.appendChild e
return e
execute = (functionOrCode) ->
if typeof functionOrCode is "function"
code = "(#{functionOrCode})();"
else
code = functionOrCode
e = document.createElement "script"
e.textContent = code
document.body.appendChild e
return e
loadAndExecute = (url, functionOrCode) ->
load url, -> execute functionOrCode

JavaScript compilado y minificado (468 caracteres)

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

Answer 2

El soporte de Greasemonkey en Chrome no incluye declaraciones requeridas. Sería mejor crear una extension lugar de un script de Greasemonkey.

Eso, o podrías usar la API de Google para cargar jQuery.

Answer 3

Este es un buen artículo: cómo jugar bien con jQuery y Greasemonkey

El método explicado funciona también para Chrome.

Actualizar:

Se me ocurrió un método mejor que funciona en todos los navegadores, que puedes leer aquí .

Answer 4

Solo crea una extensión de Chrome usando un script de contenido . Es bastante simple:

manifest.json

{
"name": "Hello World",
"version": "1.0",
"description": "Greets the world",
"content_scripts": [
{
"matches": ["*"],
"css": ["main.css"],
"js": ["jquery.min.js","main.js"],
"run at":"document_end",
}
]
}

main.js

$(document).ready(function(){
alert(''Hello World'');
});

Vale la pena señalar que en este ejemplo, ajustar la alerta en $ (document) .ready () no es realmente necesario, ya que el archivo de manifiesto ya especifica que el script debe "run at" : "document_end" .

Además, como verá en los documentos, jquery.min.js y main.js deben incluirse en la misma carpeta que manifest.json

Answer 5

Trate de usar TamperMonkey .

Tu guión funcionó como está para mí y he creado varios guiones de otros usuarios que utilizan jQuery.

Answer 6

Una solución sencilla (si es viable para usted) sería simplemente copiar y pegar la versión minificada de jQuery en su script de greasemonkey.

// ==UserScript==
// @name voip
// @namespace 1
// @description voip
// @include *
// ==/UserScript==
//jQuery 1.4.2 minified code
(function(A,w){function ma(){if(!c.isReady){try{s.documentElement.doScroll...
....
A.jQuery=A.$=c})(window);
//your code
$(document).ready(function() {
alert("Hello world!");
});