Script Grease Monkey
JohnBarkley
-
Templier Nocturne Messages postés 7734 Date d'inscription Statut Membre Dernière intervention -
Templier Nocturne Messages postés 7734 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Excusez moi de vous déranger mais je souhaiterais posséder un script grease monkey permettant de modifier localement la page de google.fr (plus particulièrement le logo mais uniquement si il n'y a pas de logo spécial évènement); en gros j'aimerais remplacer ces lignes html:
par celles-ci:
le tout via un script GM. Serait-il possible de me faire parvenir les lignes de codes à entrer, et dans le meilleur des cas me fournir quelques explications en plus?
P.S.: Je sais qu'il existe des plug-in type Stylish, mais je souhaiterais faire quelque début dans GreaseMonkey.
Excusez moi de vous déranger mais je souhaiterais posséder un script grease monkey permettant de modifier localement la page de google.fr (plus particulièrement le logo mais uniquement si il n'y a pas de logo spécial évènement); en gros j'aimerais remplacer ces lignes html:
<div style="padding-top:151px"> <div id="hplogo" align="left" onload="window.lol&&lol()" title="Google" style="background:url(images/srpr/logo3w.png) no-repeat;height:95px;width:275px"> <div style="color:#777;font-size:16px;font-weight:bold;left:214px;position:relative;top:70px" nowrap="">France</div> </div> </div>
par celles-ci:
<div style="padding-top:120px"> <div id="hplogo" align="left" onload="window.lol&&lol()" title="Google" style="background:url(http://img638.imageshack.us/img638/7679/mlgc.png) no-repeat;height:146px;width:345px"> <div style="color:#777;font-size:16px;font-weight:bold;left:265px;position:relative;top:110px" nowrap="">Bronies</div> </div> </div>
le tout via un script GM. Serait-il possible de me faire parvenir les lignes de codes à entrer, et dans le meilleur des cas me fournir quelques explications en plus?
P.S.: Je sais qu'il existe des plug-in type Stylish, mais je souhaiterais faire quelque début dans GreaseMonkey.
A voir également:
- Script Grease Monkey
- Script vidéo youtube - Guide
- Monkey jam - Télécharger - Animation
- Mp3 monkey - Télécharger - Compression & Décompression
- Mas script - Accueil - Windows
- Ghost script - Télécharger - Polices de caractères
1 réponse
Hello !
Ton intention est tout à fait louable, GreaseMonkey est un outil très puissant et rend à l'Internet sa philosophie première : celle d'un média dynamique, où l'utilisateur est maître de l'information qu'il demande. Par opposition aux médias statiques et bien souvent contrôlés par le gouvernement que sont la télévision et la radio. Mais je m'égare...
Ce que tu cherches à faire n'est pas vraiment compliqué si tu sais un peu manipuler le Document Object Model (DOM). Il y a un élément facile à repérer dans ton fragment de code :
On va donc commencer par le récupérer dans le script :
Ensuite, toutes les modifications se font à partir de cet élément.
- Modifier le padding de la <div> parente :
- Modifier le style de l'élément lui-même :
- Modifier le noeud texte de la <div> suivante ; certains te diront qu'utiliser innerHTML est plus simple mais je trouve que ce n'est pas propre.
En bonus, il reste le style de la <div> suivante à modifier. Pour celui-là je te laisse chercher ;)
Si tu ne connais pas le DOM, les tutos du Site du Zéro ou de Developpez.com sont tes amis ;)
Ton intention est tout à fait louable, GreaseMonkey est un outil très puissant et rend à l'Internet sa philosophie première : celle d'un média dynamique, où l'utilisateur est maître de l'information qu'il demande. Par opposition aux médias statiques et bien souvent contrôlés par le gouvernement que sont la télévision et la radio. Mais je m'égare...
Ce que tu cherches à faire n'est pas vraiment compliqué si tu sais un peu manipuler le Document Object Model (DOM). Il y a un élément facile à repérer dans ton fragment de code :
<div id="hplogo" ... >
On va donc commencer par le récupérer dans le script :
var $hplogo = document.getElementById('hplogo');
Ensuite, toutes les modifications se font à partir de cet élément.
- Modifier le padding de la <div> parente :
$hplogo.parentNode.style = "padding-top:120px";
- Modifier le style de l'élément lui-même :
$hplogo.style = "background:url(http://img638.imageshack.us/img638/7679/mlgc.png) no-repeat;height:146px;width:345px";
- Modifier le noeud texte de la <div> suivante ; certains te diront qu'utiliser innerHTML est plus simple mais je trouve que ce n'est pas propre.
var $divSuivante = $hplogo.nextElementSibling; $divSuivante.firstChild.data = 'Bronies';
En bonus, il reste le style de la <div> suivante à modifier. Pour celui-là je te laisse chercher ;)
Si tu ne connais pas le DOM, les tutos du Site du Zéro ou de Developpez.com sont tes amis ;)
En effet, la pluspart des gens aurait donné le script ou expliqué basiquement, toi tu fais un poste très détaillé digne du site du zéro.
Et ce poste m'auras permis de mieux comprendre certaines choses sur greasemonkey et ce qui s'y rapporte =)