Intégrer des actions javascript en favori

ccciolll

Membre expert
Club iGen
Bonjour,

j'utilise quotidiennement une page de l'extranet du groupe de mon employeur que j'ouvre à chaque fois en 4 exemplaire (4 onglets). Dans chaque exemplaire je fais un réglage différent (toujours les 4 mêmes réglages) avec les menus déroulants puis je clique un bouton pour obtenir le résultat de ce réglage.

J'aimerais garder ces 4 réglages différents d'une façon ou d'une autre, pour n'avoir, quotidiennement, qu'à ouvrir 4 onglets déjà pré-réglés. De la même façon qu'on met une url complexe en favori pour conserver des réglages récurrents (exemple quand j'ai une recherche précise sur LeBonCoin, je crée un favori et plus besoin de refaire tous les réglages de recherche, j'ouvre le favori et j'ai le résultat. Voire je fais un dossier avec toutes les recherches LBC, je clique « tout ouvrir dans des onglets » ethop, j'ai mes recherches qui apparaissent.)

Mais dans le cas de cette page, les réglages se faisant en Javascript, l'url reste identique. Donc je ne peux pas garder ces réglages en mémoire avec un favori basique.

S'agissant d'une page d'un extranet, je ne peux pas vous y donner accès, forcément.

Mais je peux vous montrer qqes morceaux du code qui n'en dévoilent pas trop, ça peut donner une idée de la structure.

Code d'un des menus déroulants :

Bloc de code:
<td class="InterParamPadding"></td><td class="ParamLabelCell"><span>BAT</span></td><td class="ParamEntryCell" style="padding-right:0px;"><div id="ctl31_ctl04_ctl05">
                                                                <select name="ctl31$ctl04$ctl05$ddValue" id="ctl31_ctl04_ctl05_ddValue" disabled="disabled">
                                                                    <option value="0">&lt;S&#233;lectionner&nbsp;une&nbsp;valeur&gt;</option>
                                                                    <option value="1">Avec&nbsp;BAT</option>
                                                                    <option value="2">Sans&nbsp;BAT</option>
                                                                    <option selected="selected" value="3">Tous</option>

                                                                </select>
                                                            </div></td>

Code du bouton à cliquer quand les réglages sont faits
Bloc de code:
<tr>
                                                            <td><input type="submit" name="ctl31$ctl04$ctl00" value="Afficher le rapport" id="ctl31_ctl04_ctl00" /></td>
                                                        </tr>

Est-ce qu'il existe une solution accessible à une non-programmeur comme moi (et qui n'a pas accès pour modifier le code de la page en question).
 
Sans programmer, faudrait regarder du côte des web extensions pour Firefox/Chrome, style AutoFill, AutoForms etc, qui permet d'un simple clic sur un profil particulier de remplir (voir d'activer, ça je sais pas) de manière automatique certains champs d'un formulaire.

Pas sur que cela suffise ici.

Autre possibilité, en activant le debugger intégré du navigateur, regarder les requetes réseaux qui font suite à la validation du formulaire pour obtenir le rapport. l'url + les données accompagnants la requete sont ce qu'il faut reproduire. Mais pour pouvoir aider à automatiser ça ensuite, il faudrait en connaitre un peu plus sur ces éventuelles données complémentaires
En particulier, la balise <form> qui encadre le formulaire en question ici est-il de type get ou post ?

En programmant, faudrait regarder côté des user-scripts via la web extension TamperMonkey. Les user scripts sont du code javascript qui s'exécute dans le contexte d'une page web particulière, et qui peut donc automatiser plein d'opérations dessus, y compris remplir et valider un formulaire selon des paramètres particuliers.
 
Sans programmer, faudrait regarder du côte des web extensions pour Firefox […]
Pas sur que cela suffise ici.

C'est la première chose que j'ai cherchée, mais quand j'ai tapé Javascript dans modules pour FFox je trouvais seulement des outils pour stopper les javascripts ou alors des outils destinés aux développeurs de site.

Autre possibilité, en activant le debugger intégré du navigateur, regarder les requetes réseaux qui font suite à la validation du formulaire pour obtenir le rapport. l'url + les données accompagnants la requete sont ce qu'il faut reproduire. Mais pour pouvoir aider à automatiser ça ensuite, il faudrait en connaitre un peu plus sur ces éventuelles données complémentaires
En particulier, la balise <form> qui encadre le formulaire en question ici est-il de type get ou post ?

Il y a cette ligne de code aussi.
Bloc de code:
</HEAD>
<BODY style="margin:0px;" class="msrs-normal" onload=""><form name="ui_form" method="POST" action="Report.aspx?ItemPath=xx" id="ui_form" enctype="multipart/form-data">

Est-ce que ça répond à la question ?

Je vais essayer de comprendre comment faire fonctionner ce que tu appelles debugger (PS je suis sous Ffox 48.0.2 / SnowLeo)
 
Je découvre donc ce fameux Debogueur.
Il y a bcp de boutons !

Voici un capture de ce que j'ai après avoir essayé qqes trucs.

J'ai cliqué sur l'œil noir, mais il parle d'une boîte noire. Je ne sais pas si c'est de ce coté là que je dois chercher.
Dans l'onglet du bas, je suis allé voir dans le menu JS mais il ne propose que Erreurs et Avertissements, je ne crois pas que ce soit ça qu'on cherche.

ecran 2018-03-27 à 11.07.35.webp



--- EDIT ---

Ah, là je crois que je tiens qqchose.
J'ai pris l'onglet réseau, vidé la corbeille et lancé une action, voici ce que ça affiche

ecran 2018-03-27 à 11.13.23.webp
 
Dernière édition:
Le debugger s'ouvre sur F12.

C'est bien une URL de type POST, c.a.d. ou l'URL seul ne porte pas l'ensemble des paramètres. A tester, toutefois, si ca passe pas en mode GET aussi, c'est souvent le cas d'ailleurs.

Dans le débugger, onglet Network, vous verrez l'URL et les données envoyés par le navigateur suite au clic sur le bouton.
S'il y a peu de données, essayer d"ouvrir dans un onglet cet URL sans argument (cela devrait échoué), puis en ajoutant chaque paramètre en mode GET, c.a.d. en ajoutant "?" suivi de "parametre1=valeur1&parametre2=valeur2" etc
Si le serveur ne vérifie pas la méthode PSOT ou GET à la réception, cela doit passer, et permet de construire un URL à mettre en favori.

Sinon, va falloir en passer par une mini page web local qui fera juste la requete POST automatiquement à son ouverture :

Ici un exemple :
https://superuser.com/questions/426...okmark-or-something-similar-as-you-would-with
 
Un autre essai, cette fois-ci sans modifier aucun déroulant, juste le bouton final.
Voici le résultat réseau
ecran 2018-03-27 à 11.38.02.webp

Comme tu m'as conseillé, j'ai pris le premier, il ouvre le détail à droite.
Voici le contenu des onglets

En-Têtes (apparemment pas grand chose de nouveau ici)
ecran 2018-03-27 à 11.37.00.webp

Cookies est vide…

Paramètres, là il y a peut-être à creuser ?
ecran 2018-03-27 à 11.37.07.webp

Réponse, pas sûr que ça soit utile mais il est bien fourni !
ecran 2018-03-27 à 11.37.12.webp

Les délais j'imagine que ça n'a pas d'intérêt pour ce qu'on cherche à faire.




Sinon RESTED il servirait à quoi ? étant en Anglais et parlant d'un domaine auquel je ne connais rien, je n'ai pas compris sa fonction.
 
Bon, alors, visiblement (enfin, façon de parler) cela va pas etre possible de reproduire la requete telle quelle, car le contenu de la réponse est manipulée par le code javascript de la page initiale (ReportWebView & co) avant de l'afficher dans celle-ci.

L'option de la page locale qui fait l'affectation des valeurs et le submit du formulaire automatique lors de son chargement risque de pas être simple non plus, vu qu'il faut embarquer le reste du code js de la page d'origine pour qu'il puisse traiter la réponse.

Reste alors le user script TamperMonkey. Mais cela nécessite de "programmer" en fonction de la page web cible

Un p"tit tutorial qui ajoute un bete bouton qui, dans un premier temps, affiche juste un message dans la console du debugger:
https://hibbard.eu/tampermonkey-tutorial-2/

Il faut évidement adapter en particulier la ligne :

// @match http://hibbard.eu/*

à votre cas particulier pour que le user-script s'exécute *que* sur votre page web qui vous intéresse.
Puis de trouver comme affecter les valeurs des champs du formulaire kivabien et faire submit.

Un fois que cela marchera sur un clic du bouton ajouté, on peut appeler le code sur l'évenement Document.onLoaded() je crois, mais là faudrait un spéciliste user-script pour t'aider.
 
Dernière édition:
  • J’aime
Réactions: ccciolll
Las, TamperMonkey ne semble pas vouloir fonctionner sur mon FFox 48 (bien qu'annoncé compatible sur 46 et supérieur), même après redémarrage.
ecran 2018-03-30 à 10.15.05.webp
ecran 2018-03-30 à 10.16.55.webp
 
Essayez avec GreaseMonkey v3.17 alors (pas la v4.x, qui nécessite FF 57 minimum).

Je pensais - parce que j'avais pas bien lu, puisque vous l'aviez précisé, désolé - que vous aviez un FireFox plus récent, Quantum-based.
 
  • J’aime
Réactions: ccciolll
Je pensais - parce que j'avais pas bien lu, puisque vous l'aviez précisé, désolé - que vous aviez un FireFox plus récent, Quantum-based.

Y'a pas de mal ! Je considère que c'est plutôt au site de téléchargement de module qu'il y aurait un reproche à faire : pourquoi proposer la dernière version de GreaseMonkey alors que qd je me connecte il « sait » que je n'ai pas la dernière version. Malheureusement, c'est souvent le cas (version proposée en téléchargement pas compatible avec la machine utilisée pour télécharger, pas même une alerte pour dire que ça ne sera pas compatible) et le pire est que souvent il n'est même pas possible de trouver les versions de machine ou d'OS nécessaire pour installer un logiciel. Comme si tout le monde avait tj le dernier cri…
 
Edit : est-ce que je peux quand-même suivre le tuto tamper monkey sur le site hibbard.eu ?
 
Oui, normalement c'est compatible pour 99% des cas. Ouais, je sais, en disant ça je n'offre aucune garantie ^_^
Des garanties, non, mais des pistes, oui. On est sur un forum, pas un SAV.
Et tu m'as déjà pas mal balisé la piste, en plus.
Merci, donc. Je pourrai creuser ça peut-être dans la semaine. (ça dépend des moments de calme que j'ai dans le flot des dossiers à traiter)
 
Salut, j'ai pu essayer d'approfondir l'idée.

byte_order, est-ce que j'ai bien compris le résultat que je peux obtenir avec GreaseMonkey en suivant le tuto de Hibbard.

Il va créer ce qu'il appelle un « bouton », qui apparait graphiquement sous la forme d'un choix dans le menu déroulant GreaseMonkey, comme dans cette capture faite sur ma fameuse page après avoir commencé un test

ecran 2018-04-04 à 11.00.33.webp

Donc si j'ai 4 réglages possibles pour ma page et que je souhaite ouvrir ces 4régalges simultanément, il me faudra
1) ouvrir 4 onglets de cette page, de façon traditionnelle (donc ici, rien de nouveau par rapport à ce que je fais déjà)
2) pour chaque page faire défiler le menu GreaseMonkey et choisir un des 4 « boutons » que j'aurai créé (qui fera les réglages des déroulants à ma place, et pourra peut-être appuyer sur le bouton « afficher » (qui envoie les infos JS, le fameux POST, je crois)

C'est bien ce que je peux espérer obtenir ?

Si oui, je pense que ça ne me fera pas gagner bcp de tps. En effet, pour chacune de mes 4 pages, je n'ai qu'un choix à faire parmi les 10 menus déroulants (deux choix pour la dernière). Le faire avec les menus déroulants originaux ou avec un menu déroulant GreaseMonkey, finalement, c'est quasi la même gestuelle. Que je répèterai sur chacune des 4 pages ouvertes manuellement.

Si j'avais, je sais pas, 5 choix à régler à chaque fois, ça commencerait à devenir intéressant, mais là, c'est du 1 pour 1 en gros. Il y aura un petit gain, bien sûr, car un seul menu dans lequel choisir au lieu de 10, et seulement 4 choix possibles correspondant tous à ce que je recherche au lieu de 3 par-ci, 4 par-là, dont un seul me correspond… Un gain, oui, mais probablement minime.
 
Une possibilité serait de gérer, dans le user-script, un paramètre supplémentaire passé en url (genre &autofill=1/2/3/4) pour
1) ne pas avoir besoin de cliquer le bouton
2) ne pas avoir besoin d'activer une variante du même user-script juste pour appliquer un autofill particulier

Je suis mal placé pour évaluer si l'investissement en temps de dev vaut le gain au quotidien ou pas, par contre.