script greasemonkey Résolu/Fermé

Question

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.

M@dien · Answer

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 ^^

yooyoo12 · Answer

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.

yooyoo12 · Answer

petit up

yooyoo12 · Answer

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é) ?

M@dien · Answer

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.

yooyoo12 · Answer

petit UP merci tout de même m@dien.

M@dien · Answer

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.

yooyoo12 · Answer

merci ! et si j'en ai plusieurs sur la page a modifier ? Ca devient plus compliquer ?

M@dien · Answer

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

yooyoo12 · Answer

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.

M@dien · Answer

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.

yooyoo12 · Answer

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 :

C'est peut être par ce que c'est en "background" ??? et non en "src" ?

M@dien · Answer

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.

yooyoo12 · Answer

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 ....

????

M@dien · Answer

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...

yooyoo12 · Answer

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 ...

M@dien · Answer

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

yooyoo12 · Answer

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.

yooyoo12 · Answer

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==

M@dien · Answer

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.

yooyoo12 · Answer

je n'utilise pas stylish ^^ donc avec greasemonkey sa serait : 

en mettant "http://www.red-conquest.fr/*" dans @include  


// ==UserScript== 
// @name ImgRempl 
// @namespace By Y.M 2009 
// @description remplace les images par des nouvelles ! 
// @author WafWaf, Y.M. 
// @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)"; 
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)";



Je vais tester sa et je revient :)

yooyoo12 · Answer

me re voila, bon alors avec http://www.red-conquest.fr/*  comme tu as dit, sa ne marche pas.
lorsque je suis sur : http://www.red-conquest.fr/game/ sa marche et après : http://www.red-conquest.fr/game/# sa ne marche pas :(

M@dien · Answer

Oups j'ai dit "gérer les styles" au lieu de "gérer les scripts".

Les lignes "// @include        http://*.red-conquest.*/game/*" ne modifient en rien le paramétrage des scripts. Il faut faire "gérer les scripts..." pour ajouter ou non un schéma d'URL.

Et comme je disais, voilà pourquoi ça ne marche pas:
1- La page est totalement chargée.
2- A la toute fin du chargement de la page, le script greasemonkey est lancé
3- on clique sur un lien: Une partie de la page est modifiée
4- on reclique sur accueil: Une partie de la page est modifiée

Hors nos modifications ne s'activent qu'au chargement de la page et non lors de la modification. donc dès qu'on reclique sur "Accueil", le code ne s'active pas et les images ne sont pas changées.

Tu n'es sans doute pas le premier à créer un thème par greasemonkey pour ce jeu, non?
Cherche sur leur forum voir comment les autres font. là dans l'immédiat je n'ai pas assez de temps pour chercher une solution pour ce porblème...


Et je reste convaincu qu'avec stylish ça serait 1000 fois plus facile!

yooyoo12 · Answer

salut, je suis le 1er à le faire pour ce jeu :)

en faisant gérer les script, et en entrant l' Url, sa ne marche pas non plus.
je vais tenté avec stylish, même si je préfère greasemonkey :P

EDIT : oops comment on fait maintenant avec stylish pour changer plusieurs images ><"

M@dien · Answer

Je sais que ça ne marche pas ça fait 2 fois que je le dis. L'ajax empèche que ça fonctionne tout le temps.

Le code pour stylish:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("red-conquest.fr") {
	#centre {		background-image:url(http://warchipe.free.fr/map_centre.png)!important;}
	#hangar {		background-image:url(http://warchipe.free.fr/map_hangar.png)!important;}
	#garage {		background-image:url(http://warchipe.free.fr/map_garage.png)!important;}
	#poste_de_garde {	background-image:url(http://warchipe.free.fr/map_avant_poste3.png)!important;}
	#gymnase {		background-image:url(http://warchipe.free.fr/map_garage.png)!important;}
	#infirmerie {		background-image:url(http://warchipe.free.fr/map_avant_poste.png)!important;}
	#dortoir {		background-image:url(http://warchipe.free.fr/map_garage.png)!important;}
	#armurerie {		background-image:url(http://warchipe.free.fr/map_armurerie.png)!important;}
	#raffinerie {		background-image:url(http://warchipe.free.fr/map_raffinerie.png)!important;}
	#electrique {		background-image:url(http://warchipe.free.fr/map_elec.png)!important;}
	#usine {		background-image:url(http://warchipe.free.fr/map_usine.png)!important;}
	#recherche {		background-image:url(http://warchipe.free.fr/map_recherche.png)!important;}
	#permission {		background-image:url(http://warchipe.free.fr/fleche.png)!important;}
}

C'est rapide, c'est facile, et ça marche tout le temps.
J'aime pas le Javascript! vive le CSS!!!

yooyoo12 · Answer

merci beaucoup, bon ok, la j'avoue Stylish est bien pour ca :D

je met en résolu, ça me va :)

Script greasemonkey

26 réponses

Discussions similaires