Script greasemonkey

Résolu/Fermé
yooyoo12 Messages postés 308 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 28 janvier 2014 - 19 août 2009 à 11:58
yooyoo12 Messages postés 308 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 28 janvier 2014 - 28 août 2009 à 13:51
Salut, je suis décider a créer un script greasemonkey pour améliorer les images sur un site, mais le problème c'est que sa ne marche pas.

voici ce que j'ai fait :
// ==UserScript==
// @name           ImgRempl
// @namespace      *
// @description    remplace les images par de nouvelles
// @include        http://www.red-conquest.fr
// ==/UserScript==

var origine, nouvelle;

origine = document.getElementsByTagName('img');
for (var i = 0; i< origine.length; i++) {
nouvelle = origine[i];
if(nouvelle.src =='http://www.red-conquest.fr/game/images/map/map_centre.png')
nouvelle.src="http://warchipe.free.fr/map_centre.png";
}



sur le site, le lien de l'image est bien http://www.red-conquest.fr/game/images/map/map_centre.png
et je veut la remplacer par http://warchipe.free.fr/map_centre.png ...

merci à vous.
A voir également:

26 réponses

M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
19 août 2009 à 14:28
Bonjour,

Est-ce que greasemonkey est vraiment la meilleure solution pour ça?
Je pense que le plug-in stylish est plus adapté pour ce genre de modification.

Il est justement prévu pour modifier les styles des sites visités, permettant de redéfinir tout le css. donc pour modifier une image c'est facile ^^
0
yooyoo12 Messages postés 308 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 28 janvier 2014 18
19 août 2009 à 19:34
salut, je pensait prendre greasemonkey, car la plupart des script que j'ai réaliser sont pour greasemonkey,
je fait tout sa pour le site du jeu, donc tout les utilisateurs ne voudrons surement pas télécharger stylish, mais préfèrerais avoir le script directement sur greasemonkey.
0
yooyoo12 Messages postés 308 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 28 janvier 2014 18
22 août 2009 à 00:50
petit up
0
yooyoo12 Messages postés 308 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 28 janvier 2014 18
22 août 2009 à 12:19
J'ai vu que les style stylish peuvent être aussi télécharger pour greasemonkey, mais alors comment je fait pour modifier les images, (enlever les images du site pour en mettre des personnalisé) ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
24 août 2009 à 09:35
Voici un exemple de style pour stylish:
@-moz-document domain(nomdedomaine.fr) {
    /* On cache l'image à changer */
    .conteneur img{ visibility:none!important;}
    .conteneur {
        /* On redéfinit la taille du conteneur de l'image selon l'image à afficher */
        width:100px!important;
        height:75px!important;
        /* On affiche l'image voulue en fond du conteneur de l'image */
        background-image:no-repeat url(http://www.adressedelimage.fr/image.jpg)!important;
    }
}


Sinon avec greasemonkey je ne l'ai jamais fait mais changer l'attribut src de l'image avec DOM doit être assez rapide à faire aussi.
0
yooyoo12 Messages postés 308 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 28 janvier 2014 18
25 août 2009 à 14:18
petit UP merci tout de même m@dien.
0
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
25 août 2009 à 14:30
Bon ben je me suis penché sur greasemonkey.

Il te manquait pas grand chose:
var origine, nouvelle;

origine = document.getElementsByTagName('img');
for (var i = 0; i< origine.length; i++) {
nouvelle = origine[i];
if(nouvelle.getAttribute('src') =='http://www.red-conquest.fr/game/images/map/map_centre.png')
nouvelle.setAttribute('src','http://warchipe.free.fr/map_centre.png');
}

Ce code là fonctionne chez moi.
0
yooyoo12 Messages postés 308 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 28 janvier 2014 18
25 août 2009 à 15:10
merci ! et si j'en ai plusieurs sur la page a modifier ? Ca devient plus compliquer ?
0
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
25 août 2009 à 15:38
Il suffit de mettre un if différent pour chaque image:
var origine, nouvelle;

origine = document.getElementsByTagName('img');
for (var i = 0; i< origine.length; i++) {
   nouvelle = origine[i];
   if(nouvelle.getAttribute('src') =='http://www.red-conquest.fr/game/images/map/map_centre.png')
        nouvelle.setAttribute('src','http://warchipe.free.fr/map_centre.png');
   if(nouvelle.getAttribute('src') =='image2.jpg')
        nouvelle.setAttribute('src','uneAutreImage.png');
   if(nouvelle.getAttribute('src') =='image3.jpg')
        nouvelle.setAttribute('src','uneTroisiemeImage.png');
   ...
}
0
yooyoo12 Messages postés 308 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 28 janvier 2014 18
26 août 2009 à 00:47
bonjour, je ne sait pas si c'est moi, mais ca ne marche pas :(
dans cette ligne :

if(nouvelle.getAttribute('src') =='http://www.red-conquest.fr/game/images/map/map_centre.png')


Il faut que je mette l'url de l'image ou simplement le "nom" l'image ? j'ai essayer les deux ca ne marche pas.
0
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
26 août 2009 à 09:29
Pour que ça fonctionne, il faut que l'url soit EXACTEMENT la même que celle qui a été entrée sur le site.
Donc pour ne pas se tromper, sur la page à modifier, fait [clic droit]->[code source de la page], et copie ce qui est dans l'attribut 'src' de la balise 'img'.

Je pense fortement, à la vue du site, que l'url doit être de la forme 'images/map/map_centre.png­'

Comme je n'ai pas de compte je ne peux pas voir la fameuse image en question.
0
yooyoo12 Messages postés 308 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 28 janvier 2014 18
26 août 2009 à 13:01
Bonjour, et encore merci de prendre du temps pour m'aider.
Voici ou j'en suis :

// ==UserScript==
// @name           ImgRempl
// @namespace      *
// @description    remplace les images par des nouvelles
// @include        https://www.tumblr.com/privacy/consent?redirect=https%3A%2F%2Fkingcountydot.tumblr.com%2F*
// @include        http://www.red-conquest.fr/*
// ==/UserScript==

var origine, nouvelle;

origine = document.getElementsByTagName('img');
for (var i = 0; i< origine.length; i++) {
   nouvelle = origine[i];
   if(nouvelle.getAttribute('src') =='images/map/map_centre.png')
        nouvelle.setAttribute('src','http://warchipe.free.fr/map_centre.png');
   if(nouvelle.getAttribute('src') =='images/map/map_armurerie.png')
        nouvelle.setAttribute('src','http://warchipe.free.fr/map_armurerie.png');
   if(nouvelle.getAttribute('src') =='images/map/map_avant_poste.png')
        nouvelle.setAttribute('src','http://warchipe.free.fr/map_avant_poste.png');
   if(nouvelle.getAttribute('src') =='images/map/map_avant_poste2.png')
        nouvelle.setAttribute('src','http://warchipe.free.fr/map_avant_poste2.png');
   if(nouvelle.getAttribute('src') =='images/map/map_hangar.png')
        nouvelle.setAttribute('src','http://warchipe.free.fr/map_hangar.png');
}


c'est bien comme ceci ?
ça ne marche encore pas :( pourtant c'est bien comme ceci que les liens sont dans le code source !

exemple :
<div id="centre" style="height: 55px; width: 36px; position: absolute; z-index: 5; left: 330px; top: 176px; background-image: url(images/map/map_centre.png);"></div>


C'est peut être par ce que c'est en "background" ??? et non en "src" ?
0
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
26 août 2009 à 14:42
Tout à fait.
Une balise <img> n'est pas traitée de la même manière que la propriété background d'une balise.

Du coup ça va être beaucoup plus difficile.
le code va paraître plus simple mais pour changer toutes les images ça va être compliqué.

Pour changer une image il faut la ligne de code:
document.getElementById('centre').style.background = "url(http://warchipe.free.fr/map_centre.png)";

Ca paraît simple comme ça mais:
le getElementBiId('centre') va chercher la balise ayant l'ID centre. dans ton cas c'est le div qui nous intéresse.

Pour les autres images, il faut chercher l'ID de la balise qui porte la propriété background.
Essaye avec cette méthode.

Si certaines balises n'ont pas d'ID (ce que je redoute), fait le moi savoir.
0
yooyoo12 Messages postés 308 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 28 janvier 2014 18
26 août 2009 à 16:28
sa va être simplement :

(exemple) :
// ==UserScript==
// @name           ImgRempl
// @namespace      *
// @description    remplace les image par de nouvelle
// @include        https://www.tumblr.com/privacy/consent?redirect=https%3A%2F%2Fkingcountydot.tumblr.com%2F*
// @include        http://www.red-conquest.fr/*
// ==/UserScript==

document.getElementById('centre').style.background = "url(http://warchipe.free.fr/map_centre.png)";
document.getElementById('hangar').style.background = "url(http://warchipe.free.fr/map_hangar.png)";

etc ....

????
0
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
26 août 2009 à 16:39
Oui, si la balise qui a comme fond l'image du hangar a l'id id="hangar". sans ça, ça ne marchera pas.

Comme je l'ai dit plus tôt, le document.getElementById('hangar') va chercher la balise ayant l'ID id="hangar".
La suite, .style.background = "url(http://warchipe.free.fr/map_centre.png)";, ne fait qu'attribuer un nouveau background à l'objet.

La difficulté est donc de trouver la balise.
Soit par getElementById(), soit par une autre méthode plus complexe.
Tellement complexe que je ne peux pas te l'expliquer simplement, ça reviendrait à écrire un tuto pour chercher une node avec DOM en javascript, à coups de getElementsByTagName et de ruse...
0
yooyoo12 Messages postés 308 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 28 janvier 2014 18
26 août 2009 à 18:03
ca marche mais il y a des souci. en fait quand on arrive sur le jeux, une fois connecter l'url est:

http://red-conquest.fr/game ou http://red-conquest.fr/game/
la, mais images marchent :D
mais quand on clique ailleurs, et que on revient a l'acceuil, l'url devient :
http://red-conquest.fr/game/#

et la mes images n'apparaissent pas ...
je l'ai bien préciser pourtant voici mon code :

// ==UserScript==
// @name           ImgRempl
// @namespace      *
// @description    remplace les images par des nouvelles !
// @include        https://www.tumblr.com/privacy/consent?redirect=https%3A%2F%2Fkingcountydot.tumblr.com%2F*
// @include        https://www.tumblr.com/privacy/consent?redirect=https%3A%2F%2Fkingcountydot.tumblr.com%2F*
// @include        https://www.tumblr.com/privacy/consent?redirect=https%3A%2F%2Fkingcountydot.tumblr.com%2F
// @include        http://www.red-conquest.fr/*
// @include        http://www.red-conquest.fr/game/*
// @include        http://www.red-conquest.fr/game/#
// ==/UserScript==

document.getElementById('centre').style.background = "url(http://warchipe.free.fr/map_centre.png)";
document.getElementById('hangar').style.background = "url(http://warchipe.free.fr/map_hangar.png)";
document.getElementById('garage').style.background = "url(http://warchipe.free.fr/map_garage.png)";
document.getElementById('poste_de_garde').style.background = "url(http://warchipe.free.fr/map_avant_poste3.png)";
document.getElementById('gymnase').style.background = "url(http://warchipe.free.fr/map_garage.png)";
document.getElementById('infirmerie').style.background = "url(http://warchipe.free.fr/map_avant_poste.png)";
document.getElementById('dortoir').style.background = "url(http://warchipe.free.fr/map_garage.png)";
document.getElementById('armurerie').style.background = "url(http://warchipe.free.fr/map_armurerie.png)";
document.getElementById('raffinerie').style.background = "url(http://warchipe.free.fr/map_raffinerie.png)";
document.getElementById('electrique').style.background = "url(http://warchipe.free.fr/map_elec.png)";
document.getElementById('usine').style.background = "url(http://warchipe.free.fr/map_usine.png)";
document.getElementById('recherche').style.background = "url(http://warchipe.free.fr/map_recherche.png)";
document.getElementById('permission').style.background = "url(http://warchipe.free.fr/fleche.png)";


J'ai essayer plusieurs choses ...
0
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
27 août 2009 à 09:13
Vérifie sur les page où ça ne marche pas que les blocs ont bien les même ID.

Je pense que ce n'est pas une erreur de javascript mais un mauvais paramétrage de greasemonkey.
Essaye d'inclure les adresses en *red-conquest.fr*, ça évitera peut-être des problèmes de "www." existant ou pas.

et sur les pages où ça ne marche pas, fait un [clic droit]->[informations sur la page] pour avoir l'adresse exacte de la page, pour voir si ça correspond bien à l'un de tes schéma d'adresse.
S'il n'y a pas [informations sur la page], fait [clic droit]->[ce cadre]->[information sur ce cadre], si jamais le site utilise des iframes.

A ce niveau je ne peux plus faire grand chose, il faut bidouiller pour trouver le bon schéma d'adresse pour greasemonkey
0
yooyoo12 Messages postés 308 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 28 janvier 2014 18
Modifié par yooyoo12 le 18/07/2011 à 15:27
Les bloc on les même ID, et dans le parametrage de greasemonkey, j'ai utiliser ceci en lien :


// ==UserScript== 
// @name           ImgRempl 
// @namespace      By WafWaf |Y.M 2009 
// @description    remplace les images par des nouvelles ! 
// @author         WafWaf,
// @include        https://www.tumblr.com/privacy/consent?redirect=https%3A%2F%2Fkingcountydot.tumblr.com%2F* 
// @include        https://www.tumblr.com/privacy/consent?redirect=https%3A%2F%2Fkingcountydot.tumblr.com%2F* 
// @include        https://www.tumblr.com/privacy/consent?redirect=https%3A%2F%2Fkingcountydot.tumblr.com%2F 
// @include        http://www.red-conquest.fr/* 
// @include        http://www.red-conquest.fr/game/* 
// @include        http://www.red-conquest.fr/game/# 
// @include        https://www.tumblr.com/privacy/consent?redirect=https%3A%2F%2Fkingcountydot.tumblr.com%2F* 
// @include        https://www.tumblr.com/privacy/consent?redirect=https%3A%2F%2Fkingcountydot.tumblr.com%2F* 
// @include        https://www.tumblr.com/privacy/consent?redirect=https%3A%2F%2Fkingcountydot.tumblr.com%2F 
// @include        http://red-conquest.fr/* 
// @include        http://red-conquest.fr/game/* 
// @include        http://red-conquest.fr/game/# 
// ==/UserScript==



quand je suis sur :
http://www.red-conquest.fr/game/ (donc a l'accueil quand je me connecte), sa marche, et ensuit quand il y a le : # ( http://www.red-conquest.fr/game/# ) ca ne marche plus.
0
yooyoo12 Messages postés 308 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 28 janvier 2014 18
Modifié par yooyoo12 le 18/07/2011 à 15:27
j'ai également essayer :

// ==UserScript== 
// @name           ImgRempl 
// @namespace      By WafWaf |Y.M 2009 
// @description    remplace les images par des nouvelles ! 
// @author         WafWaf, 
// @include        [http://]*.red-conquest.*/game/* 

// ==/UserScript==
0
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
27 août 2009 à 17:39
Bon j'ai fini par m'inscrire pour voir ce que ça donnait.

le fait est que ça marche bien... la première fois.
La faute à l'Ajax!
et là dessus je suis pas assez calé en javascript et évènements pour pouvoir trouver une solution facile pour régler le problème.

http://www.red-conquest.fr/* suffit à ce que ça marche sur tout le site. mais attention à bien le rentrer dans "gérer les styles"

Le problème vient du fait que le code ne se déclenche qu'au chargement de la page.
Et ajax ne rachaichit qu'une partie, donc le code n'est pas relancé après. ce n'est pas le '#' qui pose problème.
0