2009-04-22 932 views
14

estoy tratando de escribir un script de Greasemonkey, y me gustaría utilizar la biblioteca jQuery para hacerlo, pero no estoy muy seguro de cómo me gustaría incluir jQuery desde una dirección web para conseguir el balanceo.¿Cómo incluyo un archivo javascript remoto en un script de Greasemonkey?

¿Cómo puedo incluir jQuery (desde el servidor web de Google) en el script de Greasemonkey modo que solo puedo ir:

$(document).ready(function(){ 
    // Greasemonkey stuff here 
}); 

preferiría obtener de esta fuente:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> 

Actualización: Gracias por la ayuda, las respuestas fueron muy informativas. Yo, sin embargo, utilizar mis googleFU un poco más y me encontré con esta solución : http://joanpiedra.com/jquery/greasemonkey/

funciona como un encanto .. acaba de actualizar la fuente a la versión alojada de Google de jQuery para completar.

+0

El enlace no funcionó para mí, esto lo hizo: http://joanpiedra.com/portfolio/jquery-greasemonkey – newenglander

Respuesta

31

La forma recomendada en las versiones recientes de greasemonkey es usar la etiqueta @require comment.

E.g.

// ==UserScript== 
// @name   Hello jQuery 
// @namespace  http://www.example.com/ 
// @description jQuery test script 
// @include  * 
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js 
// ==/UserScript== 

Sin embargo ... tenga en cuenta que jQuery 1.4.1 y 1.4.2 son incompatibles con este método

Gracias Paul Tarjan, por señalar esto. Ver jQuery forum thread.

También ser conscientes de esta semántica @require

En el momento en que el script de usuario se instala, Greasemonkey tendrá que descargar y guardar una copia en caché local del archivo remoto que se puede leer casi al instante. La copia en caché se guarda en la misma carpeta que la secuencia de comandos de usuario instalada. El archivo remoto no se monitorea por cambios.

Tenga en cuenta que, en el momento de escribir esta respuesta, esta etiqueta @require solo se lee en el momento de la instalación. Si edita una secuencia de comandos de usuario existente para agregar esta etiqueta, se ignorará. Necesita desinstalar y volver a instalar su script de usuario para recoger el cambio.

+0

Guau, esa es una solución extremadamente simple. ¡Eso es increíble, también se almacena en la memoria caché! Gracias. – tester

+0

impresionante, completa y excelente respuesta. –

+3

Cuidado, esto no funciona para 1.4.1 o 1.4.2: http://forum.jquery.com/topic/importing-jquery-1-4-1-into-greasemonkey-scripts-generates-an-error –

4

Usted podría tratar de forma dinámica la creación de un elemento de script:

var script = document.createElement("script"); 
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"; 
document.getElementsByTagName("head")[0].appendChild(script); 

Es posible que tenga que retrasar un poco mientras se carga el script de

+0

no funciona si necesito cargar el script de http para https – fdrv

9

De here (setTimeout?):

// ==UserScript== 
// @name   jQueryTest 
// @namespace  http://www.example.com/ 
// @include  * 
// ==/UserScript== 

// 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 
    // the next call fails 
    $("<div id='example' class='flora' title='This is my title'>I'm in 
a dialog!</div>").dialog({ 
      buttons: { 
       "Ok": function() { 
        alert("Ok"); 
       }, 
       "Cancel": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
} 

Funciona perfectamente, pero es posible que desee limitar los sitios en los que se ejecuta o alojar el archivo jQuery js en su propio sitio para no robar su ancho de banda.

+0

jaja eso es lo que acaba de publicar que también. Acabo de encontrar ese enlace y he sustituido GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'; Gracias por contribuir !! – tester

+0

Esto no es necesario para versiones recientes de greasemonkey y puede usar la etiqueta @require en su lugar. – Cheekysoft

+1

Una ventaja del uso de este método es que debería funcionar en Chrome, donde el uso de @require no. –

0

Basado en Chris's answer, me ajusto a mis propias necesidades como a continuación.

// ==UserScript== 
// @description require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.jss 
// @name   Baidu Mask 
// @namespace http://tampermonkey.net/ 
// @version  0.1 
// @description try to take over the world! 
// @author  You 
// @match  https://www.ibm.com/developerworks/cn/opensource/os-cn-greasemonkey/index.html 
// @match  *://www.baidu.com/* 
// @match  *://baike.baidu.com/* 
// @match  *://zhidao.baidu.com/* 
// @match  *://www.weather.com.cn/* 
// @grant  none 
// ==/UserScript== 

(function() { 
    'use strict'; 

    // Your code here... 

    var $j; 

    function GM_wait() { 
     if (typeof jQuery === 'undefined') { 
      window.setTimeout(GM_wait, 100); 
     } 
     else { 
      $j = jQuery.noConflict(); 
      doJob(); 
     } 
    } 

    function loadJquery() { 
     // Check if jQuery's loaded 

     if (typeof jQuery === 'undefined') { 
      // Add jQuery 
      var GM_JQ = document.createElement('script'); 
      GM_JQ.src = 'https://code.jquery.com/jquery-1.12.4.min.js'; 
      GM_JQ.type = 'text/javascript'; 
      GM_JQ.id = 'jquery-lyz'; 
      document.getElementsByTagName('head')[0].appendChild(GM_JQ); 
      GM_wait(); 
     } else { 
      doJob(); 
     } 
    } 

    loadJquery(); 


    function doJob() { 
     if (typeof $j === 'undefined') { 
      $j = $; 
     } 

     var url_arr = [ 
      {'name': "baidu", 'value': "www.baidu.com"}, 
      {'name': "baike", 'value': "baike.baidu.com"}, 
      {'name': "zhidao", 'value': "zhidao.baidu.com"}, 
      {'name': "weather", 'value': "http://www.weather.com.cn"}, 
     ]; 
     var url = location.href; 
     var siteObj = {}; 
     $j(url_arr).each(function (i, item) { 
      if (url.indexOf(item.value) > -1) { 
       siteObj = item; 
       return false; 
      } 
     }); 

     var delay_arr = []; 
     var timerCount = 1; 

     function hideTimer() { 
      timerCount++; 
      if (timerCount > 20) { 
       return; 
      } 
      delay_arr = $j.grep(delay_arr, function (_selector, i) { 
       var $ele = $j(_selector); 
       var visible = $ele.is(':visible'); 
       console.log($ele, visible); 
       if (visible) { 
        $ele.hide(); 
        return false; 
       } 


       return true; // keep the element in the array 
      }); 
      if (delay_arr.length > 0) { 
       setTimeout(hideTimer, 500); 
      } 
     } 

     setTimeout(hideTimer, 500); 
     var $frms; 
     switch (siteObj.name) { 
      case 'baidu': 
       $j('#content_right').hide(); 
       break; 
      case 'baike': 
       $j('.topA, .lemmaWgt-promotion-slide, .union-content, .right-ad, .lemmaWgt-promotion-vbaike, .nav-menu').hide(); 
       delay_arr.push('#side_box_unionAd'); 
       break; 
      case 'zhidao': 
       $j('.widget-new-graphic, #union-asplu, .jump-top-box').hide(); 
       delay_arr.push('.wgt-daily'); 
       delay_arr.push('.shop-entrance'); 
       delay_arr.push('.cms-slide'); 
       delay_arr.push('.nav-menu'); 
       $frms = $j('iframe'); 
       $frms.hide(); 
       break; 
      case 'weather': 
       $j('.right, .hdImgs, .tq_zx, #di_tan, #zu_dui').hide(); 
       //delay_arr.push('.wgt-daily'); 
       $frms = $j('iframe'); 
       $frms.hide(); 
       break; 
     } 
    } 

})(); 

Mi script que trabajar en diferentes sitios, mientras que algunos tiene jQuery incluido y otros no, así que tengo que probar.La forma "requerir" no funciona aquí.

Cuestiones relacionadas