Injecter du texte localement dans une page Internet, c'est possible ?

Répondre
 
Partager Rechercher
Le titre est un peu compliqué. Je m'explique par un exemple. Sur la page de réponse à fil de JOL, j'aimerais ajouter des lignes de textes que je peux copier-coller à proximité de la boîte où nous écrivons les messages. En gros, des balises ou des caractères exotiques que j'utilise souvent dans le coin. Est-ce que cela est possible ? Non, je ne veux pas hacker un site, ne vous inquiétez pas. J'utilise Firefox sur Lubuntu (distrib lite d'Ubuntu) si ça aide.
Dernière modification par Nitz ; 15/10/2013 à 01h04. Motif: Clarification du titre.
Lien direct vers le message - Vieux 15/10/2013, 01h03
Oui, il faut que tu executes un javascript qui insère ce que tu veux où tu veux sur la page après qu'elle ait finie de charger.

En fait c'est simple mais faut s'y connaitre un peu en javascript (si ce que tu demandes ne prend pas trop de temps je peux te le faire). Tu mets ton code dans une page et tu mets cette page en favoris. Comme ça dès que tu cliques sur ton favoris ça injecte ton texte (ou tout autre élément html/javascript/css). Yaurait même moyen de faire un favoris par caractère et que ce caractère soit injecté directement où est ton curseur.

ps : ya rien d'illégal là dedans, tu fais ce que tu veux dans ton navigateur.
Dernière modification par N3o- ; 15/10/2013 à 02h13.
Lien direct vers le message - Vieux 15/10/2013, 02h07
Etant donné que je veux uniquement avoir ce texte sur JOL dans la page de réponse à une discussion (et uniquement cette page, mais il faut que je puisse répondre à n'importe quel fil), ça fout pas une crampe au plan de mettre en favori une page en particulier ? Et oui, je serai très intéressé par le script et la manière de l'implémenter, je suis une crampe en JavaScript. Mais je pense que je pourrais trouver où insérer les lignes de textes que je veux, haha.

La pièce jointe montre exactement ce que je veux.
Miniatures attachées
Cliquez sur l'image pour la voir en taille réelle Nom : 2013-10-15-034725_1366x768_scrot.png Taille : 1366x768 Poids : 193,7 Ko ID : 206776  
Lien direct vers le message - Vieux 15/10/2013, 03h51
Télécharger la pièce jointe
Tu peux regarder du côté du plugin Greasemonkey pour Firefox. En gros, ça te permet d'injecter du javascript localement sur une page web. C'est très utile par exemple quand tu fais du dev et que tu en as marre de remplir manuellement les champs d'un formulaire : le javascript les remplira pour toi.
Du coup, comme l'a proposé N3o-, on peut imaginer un javascript qui t'injectera une petite boîte de texte dans certains cas, comme tu le souhaites.
Lien direct vers le message - Vieux 15/10/2013, 07h58
Ouaip, il faudra forcément passer par de l'extension type GreaseMonkey. Mais c'est faisable. Globalement, il te faut un JS qui va éditer le code source pour ajouter à la page (à l'endroit où tu veux) les caractères.
On peut meme imaginer que plutot que de copier coller, tu ajoutes des boutons qui ajouteraient des caractères au clic dans les messages en question (comme les smiley sur la droite)

Le plus simple, si tu veux pas t'embeter trop avec le code HTML et foutre en l'air la mise en page, ce serait meme a mon sens d'ajouter tes caractères avant les smileys, dans le fieldset vB_Editor_001_smiliebox .

Tu t'y connais en HTML et en javascript, un petit peu, ou pas du tout ?

Si tu t'y connais un tout petit peu moi je ferai comme ca :
* Edite la page newreply en local pour ajouter tes caractères où tu veux
* Une fois que tu as le HTML a ajouter, tu écris le script qui te permet d'ajouter ce HTML au bon endroit et tu l'insères dans GreaseMonkey
* Puis reste juste a faire le script qui fait qu'au clic sur ton caractères, ca l'ajoute dans la zone d'édition.
Lien direct vers le message - Vieux 15/10/2013, 08h53
Ca fait quoi de spécial GreaseMonkey ? Désolé je suis un chrome user depuis très longtemps maintenant

N'importe quel javascript fait ça, sans extension.

Par exemple, voici un javascript qui permet d'ajouter des liens au dessus d'une vidéo youtube pour la télécharger :

Code HTML:
javascript:(function(w,d){var jloaded=false,jsrc='download-video.js',fsrc='http://deturl.com/iframelet.html?js='+encodeURIComponent(jsrc),l=window.location.href;function msg2js(e){if(e.origin=='http://deturl.com'){jloaded=true;var js=document.createElement('script');js.type='text/javascript';js.textContent=e.data;document.body.appendChild(js);window.removeEventListener('message',arguments.callee)}}if(w.addEventListener)w.addEventListener('message',msg2js,false);else w.attachEvent('onmessage',msg2js);var f=d.createElement('iframe');f.src=fsrc;f.style.cssText='display:none;';d.body.appendChild(f);if(l.match(/^https:/i)){window.setTimeout(function(){if(!jloaded){if(confirm('The bookmarklet can not be run on HTTPS pages in this browser.\n\nGo to the regular HTTP version of this page?')){window.location.href=l.replace(/^https:/i,'http:')}else{window.location.href='http://deturl.com/?bt&url='+encodeURIComponent(l)}}},5000)}})(window,document);
Ce code n'est pas de moi, c'est une extension chrome que j'ai téléchargée. Ce code est directement dans l'url du favoris et ça fonctionne. Pas besoin d'autre extension.
Lien direct vers le message - Vieux 15/10/2013, 11h54
Citation :
Publié par N3o-
Ca fait quoi de spécial GreaseMonkey ? Désolé je suis un chrome user depuis très longtemps maintenant
Ca va juste permettre d'ajouter le JS dans certaines pages selon certains critères, de manière un peu plus user friendly.
Parce que répondre a un thread, tu peux pas le mettre en favori, vu que chaque thread a une page différente.
Lien direct vers le message - Vieux 15/10/2013, 12h06
L'url est pas tellement importante, le favoris va juste exécuter le code sur la page courante que tu sois sur jol ou sur google.fr. La différence c'est que sur google.fr le script ne fonctionnera pas.
Ceci dit je rejoins tout le monde pour GreaseMonkey, t'as pas à aller cliquer sur un favoris à chaque fois.
Lien direct vers le message - Vieux 15/10/2013, 12h22
Citation :
Publié par LordYu
L'url est pas tellement importante, le favoris va juste exécuter le code sur la page courante que tu sois sur jol ou sur google.fr. La différence c'est que sur google.fr le script ne fonctionnera pas.
This.


Ok merci pour l'explication sur GreaseMonkey, j'avais déjà entendu parler de cette extension mais n'utilisant pas Firefox (ou juste pour tester mes CSS), je n'avais pas encore eu l'occasion de fouiller.
Lien direct vers le message - Vieux 15/10/2013, 13h14
J'ai déjà GreaseMonkey. J'y connais que dalle en JS, par contre le html y'a pas de problème, j'utilise déjà le XML et les CSS pour faire de la mise en page.
Lien direct vers le message - Vieux 15/10/2013, 19h13
Citation :
Publié par N3o-
tu veux une solution toute faite ?
Je préférerais ouais, je t'avouerais que c'est super-spécifique, et seulement si c'est pratique. J'ai jamais eu besoin du JS avant cela, ça n'entre pas dans le cadre de ce que je fais, que ça soit travail ou hobby. J'ai déjà un document texte que j'ouvre quand j'en ai besoin, donc bon.
Lien direct vers le message - Vieux 16/10/2013, 01h29
Si tu veux injecter du HTML directement dans la page de réponse sur JoL, c'est assez simple avec jQuery. Pour une version très basique:

Code:
$('div.panel:first > div').css('width', '100%');
$('td#vB_Editor_001 > table tr:first').append('<td>Trolls anti-dofus à copier-coller ici</td>');
La première ligne élargit le div qui contient le formulaire/smiley/... histoire de te faire te la place (de façon pas très élégante, mais bon). La second ligne ajoute une 3ème colonne (à droite des smileys) où tu peux mettre tout le HTML que tu veux.

Après soit t'injectes via GreaseMonkey ou une extension similaire, soit façon oldschool avec un favori qui exécute du Javascript (y'a juste à mettre le code à la place de l'URL en créant le favori, il s'exécutera quand tu cliqueras dessus)

Code:
javascript:$('div.panel:first > div').css('width', '100%');$('td#vB_Editor_001 > table tr:first').append('<td>Trolls anti-dofus à copier-coller ici</td>');
Et en poussant un peu plus loin, on peut faire une version où il suffit de cliquer sur le texte pour l'ajouter à la fin du post.

La 2ème ligne est la même, on insère juste une liste à la place du texte simple (et on file un id à la cellule). Puis la 3ème convertit tout les élements de la liste en liens et la 4ème insère le texte dans le post quand on clique sur un de ces liens. Avec un test pour ne l'exécuter qu'une seule fois, pour éviter les multi-clics foireux.

Code:
if(!$('#idalacon').length){
    $('div.panel:first > div').css('width', '100%');
    $('td#vB_Editor_001 > table tr:first').append('<td id="idalacon"><ul><li>LOLOL DOFUS</li><li>Retourne sur WoW mec</li><li>Apprends à écrire stp</li></ul></td>');
    $('#idalacon li').each(function(){$(this).html('<a href="#">'+$(this).html()+'</a>')});
    $('#idalacon a').click(function(){$('#vB_Editor_001_textarea').val($('#vB_Editor_001_textarea').val()+$(this).html()); return false});
}
Ou sur une seule ligne pour mettre en favoris directement:

Code:
javascript:if(!$('#idalacon').length){$('div.panel:first > div').css('width', '100%');$('td#vB_Editor_001 > table tr:first').append('<td id="idalacon"><ul><li>LOLOL DOFUS</li><li>Retourne sur WoW mec</li><li>Apprends à écrire stp</li></ul></td>');$('#idalacon li').each(function(){$(this).html('<a href="#">'+$(this).html()+'</a>')});$('#idalacon a').click(function(){$('#vB_Editor_001_textarea').val($('#vB_Editor_001_textarea').val()+$(this).html()); return false});}
Sur ce (parce qu'il faut bien tester son code avant de le publier), LOLOL DOFUS
Lien direct vers le message - Vieux 16/10/2013, 05h36
Comment tu ferais pour l'injecter ailleurs que dans le cadre de smiley? J'utilise le bloc classique sans toutes les fioritures comme montré dans la pièce jointe plus haut.
Lien direct vers le message - Vieux 16/10/2013, 11h06
J'avais pas fait attention à la différence d'UI dans ton screenshot. C'est cette ligne qu'il faut changer:

Code:
$('td#vB_Editor_001 > table tr:first').append('...');
.append() rajoute le code html juste avant la balise de fermeture des éléments sélectionnés, donc il faut un sélecteur qui ne renverra que le bon.
Pour la version simple de la page, ça peut donner ça pour avoir un truc pas trop moche sans avoir à refaire la mise en page d'autres éléments.

Code:
$('form > table.tborder:first > tbody > tr:last').append('...');
ça va sélectionner tous les tags form qui ont un table (avec la classe tborder) en descendant direct (le ">" limite aux descendants directs, un espace cherchera dans tous les descendants), limiter au premier résultat (le :first), chercher un tbody en descendant direct puis sélectionner le dernier tr dans les descendants directs du tbody (dans ce cas la, le premier tr est la ligne sujet, le 2nd contient le message - et j'ai vraiment pas l'impression d'être très clair là...)

Bref, ce code devrait faire l'affaire pour la version simple, il reste juste à remplacer la liste par ce qu'il te faut.

Code:
javascript:if(!$('#idalacon').length){$('form > table.tborder:first > tbody > tr:last').append('<td id="idalacon" valign="top"><ul><li>LOLOL DOFUS</li><li>Retourne sur WoW mec</li><li>Apprends à écrire stp</li></ul></td>');$('#idalacon li').each(function(){$(this).html('<a href="#">'+$(this).html()+'</a>')});$('#idalacon a').click(function(){$('#vB_Editor_001_textarea').val($('#vB_Editor_001_textarea').val()+$(this).html()); return false});}
Lien direct vers le message - Vieux 16/10/2013, 12h18
Citation :
Publié par Formerly Fruit Force
Sur Chrome, pas besoin de Greasemonkey. C'est intégré de base au navigateur.
Tu parles du Ctrl+Maj+I ou J ? C'est pas très user friendly et ça ne vaut pas Tampermonkey (équivalent compatible de Greasemonkey sous Chrome).
Lien direct vers le message - Vieux 16/10/2013, 22h08
Citation :
Publié par Elmet Hachem
Tu parles du Ctrl+Maj+I ou J ? C'est pas très user friendly et ça ne vaut pas Tampermonkey (équivalent compatible de Greasemonkey sous Chrome).
Non, c'est (partiellement) géré en natif en fait.
J'ai jamais testé mais on me l'a déjà dit

http://www.libellules.ch/dotclear/in...-Google-Chrome
Lien direct vers le message - Vieux 17/10/2013, 08h23
Répondre

Connectés sur ce fil

 
1 connecté (0 membre et 1 invité) Afficher la liste détaillée des connectés
Thème visuel : Fuseau horaire GMT +2. Il est actuellement 16h03.
^^ Haut de page ^^