Script greasemonkey [Résolu/Fermé]

Signaler
Messages postés
308
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
28 janvier 2014
-
Messages postés
308
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
28 janvier 2014
-
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.

26 réponses

Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
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 ^^
Messages postés
308
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
28 janvier 2014
18
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.
Messages postés
308
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
28 janvier 2014
18
petit up
Messages postés
308
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
28 janvier 2014
18
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é) ?
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
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.
Messages postés
308
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
28 janvier 2014
18
petit UP merci tout de même m@dien.
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
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.
Messages postés
308
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
28 janvier 2014
18
merci ! et si j'en ai plusieurs sur la page a modifier ? Ca devient plus compliquer ?
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
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');
   ...
}
Messages postés
308
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
28 janvier 2014
18
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.
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
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.
Messages postés
308
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
28 janvier 2014
18
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" ?
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
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.
Messages postés
308
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
28 janvier 2014
18
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 ....

????
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
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...
Messages postés
308
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
28 janvier 2014
18
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 ...
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
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
Messages postés
308
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
28 janvier 2014
18
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.
Messages postés
308
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
28 janvier 2014
18
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==
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
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.