userscript greaseMonkey et jquery [Résolu]

[SpaceFrog]

Bonjour,

Je tente de comprendre le fonctionnement et la portée de jquery dans greaseMonkey

Voici mon code

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var $;
 
// Add jQuery
(function(){
	if (typeof unsafeWindow.jQuery == 'undefined') {
		var GM_Head = document.getElementsByTagName('head')[0] || document.documentElement,
			GM_JQ = document.createElement('script');
 
		GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
		GM_JQ.type = 'text/javascript';
		GM_JQ.async = true;
 
		GM_Head.insertBefore(GM_JQ, GM_Head.firstChild);
	}
	GM_wait();
})();
 
// Check if jQuery's loaded
function GM_wait() {
	if (typeof unsafeWindow.jQuery == 'undefined') {
		window.setTimeout(GM_wait, 100);
	} else {
		$ = unsafeWindow.jQuery.noConflict(true);
		letsJQuery();
	}
}
 
// All your GM code must be inside this function
function letsJQuery() {
 
 
      //Ici la ou les fonctions à inserer 
        function foo(){
        alert('bar')
        $("#barreOutils").append("<input type=\"button\" value=\"test\" />")
       }
 
      //Document.ready sur la page 
      $(document).ready(function(){
 
        $("head:eq(0)").append( $('<script />').attr("type","text/javascript").text(foo.toString() +"\n foo()") )
      })
}

La première partie du code permet l'utilisation de jquery dasn GM,

Ce qui m'echappe c'est que j'ai bien l'alert, mais pas l'insertion du bouton ..

[christouphh]

Il ne te manquerais pas des ; à la fin de tes .append() ??
et à la fin de l'alert() aussi ???

[SpaceFrog]

non a priori le toString ou toSource (testé egalement) retourne bien les retours ligne.

La console firebuf me dit

TypeError: $ is not a function

pour le $ dans la fonction foo
ce qui m'amène à penser que jquery n'est pas chargé sur la page ???

[SpaceFrog]

Curieusement si je rajoute une balise script jquery il ne sort plus de message
d'erreur, mais me retourne un null pour le contenu html du div ???

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// All your GM code must be inside this function
function letsJQuery() {
 
    // inserer jquery sur l apage
    Doc_JQ = document.createElement('script');
    Doc_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
    Doc_JQ.type = 'text/javascript';
    Doc_JQ.async = true;
    document.getElementsByTagName('head')[0].appendChild(Doc_JQ);
 
      //Ici la ou les fonctions à inserer 
        function foo(){
        $("#barreOutils").append('<input type="button" value="test" />');
        alert($("#barreOutils").html());
       }
 
 
      //Document.ready sur la page 
      $(function(){
        alert('loaded')
       $("head:eq(0)").append( $('<script />').attr("type","text/javascript").text(foo.toString() +"\n foo()") )
      })
}

[Bovino]

Pourquoi tu ne mets pas tout simplement un @require

Code :

// @require http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

dans l'en-tête de ton script ?

[SpaceFrog]

parce que ça ne fonctionne pas ?

Ou que je n'arrive pas à la faire fonctionner ?
tu as un exemple ? un tuto ?

[Bovino]

Apparemment, certains événements (comme load()) fonctionnent mal dans GreaseMonkey.
Sinon, un exemple fonctionnel (mais un peu gonflant ) :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
// ==UserScript==
// @name          Test jQuery
// @namespace     http://www.developpez.com
// @description   Teste le fonctionnement de jQuery
// @include       *
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// @version       1.0
// ==/UserScript==
 
$('body').click(function(e){
	alert('Balise ' + e.target.nodeName + ' cliquée !');
});

[SpaceFrog]

Pour être gonflant...
ça l'est !!!!!!!!!!!!
aucune reaction sur la page !!!!!!!!!!
je n'y comprends rien

Code :

1
2
3
4
5
6
7
8
9
10
11
12
// ==UserScript==
// @name          Test jQuery
// @namespace     http://www.developpez.com
// @description   Teste le fonctionnement de jQuery
// @include       http://127.0.0.1:85/PHP_Dev/GM_Tests.php
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// @version       1.0
// ==/UserScript==
 
$('body').click(function(e){
	alert('Balise ' + e.target.nodeName + ' cliquée !');
});

c'est même pire ...
un simple alert ne fonctionne pas ...
ça m'a pas l'air très au point ce greasemokey ...

[Bovino]

Bah... pourtant chez moi ça marche...

Tu fais comment pour intégrer ton script ?
Et à tout hasard, tu le testes bien depuis la page http://127.0.0.1:85/PHP_Dev/GM_Tests.php ?

[SpaceFrog]

Je teste depusi la bonne page, et le userscript est créé sur la page
ceci fonctionne

Code :

1
2
3
4
5
6
// ==UserScript==
// @name           test
// @namespace      testGM
// @include        http://127.0.0.1:85/PHP_Dev/GM_Tests.php
// ==/UserScript==
alert('hello')

Mais des que je rajoute le require ça ne fonctionne plus

Code :

1
2
3
4
5
6
7
8
 
// ==UserScript==
// @name           test
// @namespace      testGM
// @include        http://127.0.0.1:85/PHP_Dev/GM_Tests.php
// @require  http://ajax.googleapis.com/ajax/libs/jquery
// ==/UserScript==
alert('hello')

Et ensuite si je supprime le require ça ne fonctionne plus non plus

J'ai vraiment des doutes sur greasemonkey ...

[SpaceFrog]

Conclusion:
Exit Greasmonkey
Raisons:
- obscur
- peu fiable
- complexe
- pas stable
pas performant

Welcome Scriptish
- clair
- simple
- fiable
- performant
- interface beaucoup plus simple