Script Tampermonkey Choisir une date disponible automatiquement dans un formulaire

**mielpops77** · 06/03/2019, 16h40

Bonjour à tous

Je suis actuellement en train de coder un script sur Tampermonkey afin de remplir un formulaire automatiquement
J'ai réussis à remplir touts le formulaire(nom, prénom etc) sauf la date de rendez vous

Pour remplir le formulaire il me suffisais de modifier du code html grâce au DOM tel que :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 document.getElementById('last_name').value = 'mister';

Seulement pour remplir la partie date de rendez vous il me faut connaître les date disponible , et ceux ci sont stocker dans une variable situé dans un script
Ma question est donc comment faire pour récupérer la valeur d'une variable d'un script d'un site web ne nous appartenant pas

Merci d'avance

**Watilin** · 06/03/2019, 17h42

Bienvenue dans le monde merveilleux de l’userscripting

Malheureusement, mettre au point un userscript ça se fait souvent au cas par cas. Je ne peux que te donner des pistes pour progresser.

Les scripts dans la page sont de deux types : ceux qui ont un attribut src, les scripts distants, et ceux qui contiennent du texte, les scripts inline.
Les scripts inline sont les plus faciles à atteindre, par exemple avec querySelectorAll et une boucle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
for (let $script of document.querySelectorAll("script:not([src])")) {
  let text = $script.textContent;
  ...
}

Pour les scripts distants, il faut utiliser GM_xmlhttpRequest pour récupérer leurs codes sources. Tu auras probablement besoin d’ajouter des en-têtes @connect à ton userscript. Je te renvoie à la documentation pour les détails.

L’idée derrière tout ça c’est d’utiliser des expressions rationnelles (ou des substring dans les cas les plus simples) pour :

déterminer quel script contient les données que tu veux ;
récupérer ces données.

Et donc il faut préparer le terrain, en regardant toi-même les scripts. La console F12 est d’une aide précieuse avec ses différents onglets, notamment l’onglet sources et l’onglet network. N’hésite pas à enregistrer les fichiers aussi, pour travailler dessus plus confortablement. Souvent ils sont minifiés, tu peux utiliser certains outils pour reformater le code, des outils qu’on appelle parfois beautifiers ou pretty-printers. Fais une recherche « JS beautifier », tu trouveras plein de services.

Si les données qui t’intéressent arrivent par ajax, tu as peut-être moyen d’imiter la requête pour les obtenir dans ton propre script, plutôt que devoir analyser le code d’un autre script. Là encore, l’onglet network sera utile. Mais si tu n’as pas de chance, la requête utilisera une authentification et sera impossible à imiter.

Plus simple, vérifie le DOM de la page avec l’onglet elements, les données s’y trouvent peut-être sous une forme cachée (un élément avec display: none, ou un commentaire HTML, oui, j’ai déjà vu ça).

Examine aussi comment sont envoyées les données quand tu soumets le formulaire. Il y aura forcément un truc qui apparaîtra dans l’onglet network. Tu as peut-être moyen de fabriquer une valeur de date conforme sans être obligé de la récupérer auparavant.

Bon courage

**mielpops77** · 06/03/2019, 20h21

Merci beaucoup pour toutes c'est informations très enrichissante.

J'ai réussis à localiser ma balise script qui m'intéresse

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var tous_les_scripts = document.getElementsByTagName('Script');
                var script = tous_les_scripts [9];
                alert(script);

Je suis donc bien dans la balise recherché cependant quand je fais une recherche de la variable sur cette balise impossible de mettre la main sur la variable recherché

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
var tous_les_scripts = document.getElementsByTagName('Script');
                var script = tous_les_scripts [9];
 
                var result= script.available_dates;
                alert(result);

script.available_dates est le noms de ma variable

Voici le code du script auquel je cherche à récupéré les valeurs de la variables available_dates

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<script type="text/javascript">
	var today = new Date();
	var dd = today.getDate()+1;
	var mm = today.getMonth()+1; //January is 0!
	var yyyy = today.getFullYear();
	if(dd<10){
		dd='0'+dd
	} 
	if(mm<10){
		mm='0'+mm
	} 
	var today = yyyy+'-'+mm+'-'+dd;
	function formatDate(rawDate) {
	  var day = ("0" + rawDate.getDate()).slice(-2);
	  var month = ("0" + (rawDate.getMonth() + 1)).slice(-2);
	  return (day)+ "-" + (month)+ "-" +rawDate.getFullYear() ;
	}		
	$(document).ready(function() {
		var dt1  = '2019-03-06';
		var checkService  = 'Normal';
		$('#dateOfBirth').datepicker({
			format: "yyyy-mm-dd",
            endDate: new Date(dt1),
			startDate: '-100y',
            autoclose: true,
			startView: 2
		});
		$('#pptIssueDate').datepicker({
			format: "yyyy-mm-dd",
            endDate: new Date(dt1),
			startDate: '-100y',
            autoclose: true,
			startView: 2
		});
		$('#pptExpiryDate').datepicker({
			format: "yyyy-mm-dd",
			startDate: new Date(dt1),
            autoclose: true,
			startView: 2
		});
		var dt4  = '2019-03-07';
		var blocked_dates = ["20-03-2019","01-01-1970","28-03-2019","29-03-2019","20-03-2019","01-01-1970","28-03-2019","29-03-2019"];
		var available_dates = ["07-03-2019","08-03-2019","11-03-2019","12-03-2019","13-03-2019","14-03-2019","15-03-2019","18-03-2019","19-03-2019","21-03-2019","22-03-2019","25-03-2019","26-03-2019","27-03-2019"];
		var fullCapicity_dates = [];
		var offDates_dates = ["09-03-2019","10-03-2019","16-03-2019","17-03-2019","20-03-2019","23-03-2019","24-03-2019","28-03-2019","29-03-2019","30-03-2019","31-03-2019"];
		var allowArray = [1];
		if(checkService == 'Normal')
		{
			/*if((jQuery.inArray(2, allowArray)!='-1') || (jQuery.inArray(3, allowArray)!='-1')) 
			{
				var classFull = 'fullcapspecial';
				var tooltipTitle = '&nbsp;';
				var backDatetitle = 'Not Allowed';
			}else{
				var classFull = 'fullcap';
				var tooltipTitle = 'Slots Full';
				var backDatetitle = 'Not Allowed';
			}*/
			var classFull = 'fullcap';
			var tooltipTitle = 'Slots Full';
			var backDatetitle = 'Not Allowed';
		}else{
			var classFull = 'fullcap';
			var tooltipTitle = 'Slots Full';
			var backDatetitle = 'Not Allowed';
		}
		$('.app_date').datepicker({
			language: "en",
			Default: true,
			format: "yyyy-mm-dd",
			startDate: new Date(dt4),
			endDate: '2019-03-31',
			autoclose: true,
			forceParse:true,
			startView: 0,
			beforeShowDay: function(date){
				   var formattedDate = formatDate(date);
				   if ($.inArray(formattedDate.toString(), blocked_dates) != -1){
					   return {
						  enabled : false,
						  classes: 'inactiveClass',
						  tooltip: 'Holiday'
					   };
				   }
				   if ($.inArray(formattedDate.toString(), available_dates) != -1){
					   return {
						  enabled : true,
						  classes: 'activeClass',
						  tooltip: 'Book'
					   };
				   }
 
				   if ($.inArray(formattedDate.toString(), fullCapicity_dates) != -1){
					   return {
						  enabled : false,
						  classes: classFull,
						  tooltip: tooltipTitle
					   };
				   }
				   if ($.inArray(formattedDate.toString(), offDates_dates) != -1){
					   return {
						  enabled : false,
						  classes: 'offday',
						  tooltip: 'Off Day'
					   };
				   }
					return {
					  enabled : false,
					  tooltip: backDatetitle
				   };
				  return;
			  }
	    });
		/*====== CALL POP FOR PL/PT IN NORMAL CASE=======*/		
		if(checkService == 'Normal')
		{
			if((jQuery.inArray(2, allowArray)!='-1') || (jQuery.inArray(3, allowArray)!='-1')) 
		    {
				/*$(document).on('click', '.fullcap,.fullcapspecial', function () {
				$(".datepicker").hide();
				$('.popupBG').show();
				$('#IDBodyPanel').show();
				});
				$(".popupCloseIcon").click(function() {
				$(".popupBG").hide();
				$("#IDBodyPanel").hide(); 
				});
 
				$('input[type=radio][name=serviceChange]').change(function() {
				if (this.value == 'Premium') {
					$("#premiumService").prop('value', 'GO FOR PREMIUM');
				}
				else if (this.value == 'Prime') {
					$("#premiumService").prop('value', 'GO FOR PRIME TIME');
				}
 
				});*/
			}
		}
		/*====== CALL POP FOR PL/PT IN NORMAL CASE=======*/
		var eventhandler = function(e) {
		   e.preventDefault();      
		}
		if (checkService == 'Premium' || checkService == 'Prime') {
			$('input[name="vasId[]"]:checked').each(function() {
			   $("#vasId"+this.value).bind('click', eventhandler);
			});
		}
 
		if (checkService != 'Premium')
		{
			$(document).on('click', '.chkbox', function () {
				if($(this).val() == 1)
				{
					if($(this).is(":checked")){
					  //$("#vasId6").prop('checked', true);
					  //$("#vasId6").bind('click', eventhandler);
					}else{
					  //$("#vasId6").prop('checked', false);	
					  //$("#vasId6").unbind('click', eventhandler);
					}
				}
			});
		}
 
	});
</script>

Merci pour toutes c'est pistes je vais continuer mes recherches sur les éléments que vous avez mis en avant

**Watilin** · 06/03/2019, 23h48

available_dates n’est pas une propriété de l’objet script, et il y a plusieurs raisons à ça.
La première, c’est que script est un objet DOM, et du point de vue du DOM, son contenu est juste du texte. C’est pour ça que j’ai utilisé textContent dans mon exemple. Il n’y a pas de phénomène magique par lequel les variables du script se retrouveraient attachées à l’objet DOM qui représente le script.
La seconde raison, c’est que la variable available_dates est locale à la fonction $(document).ready(function() { ... }), on ne peut pas y accéder depuis l’extérieur.

Heureusement, sa déclaration a l’air très régulière, on peut donc extraire ces données du code source avec une regexp plutôt simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
let regexp = /var available_dates = \[[^\]]*\]/;
console.log(script.textContent.match(regexp));

Cela te donne la ligne de code source qui déclare le tableau. Pour faire plus précis, il faudrait isoler les différentes dates à l’intérieur du tableau.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
let regexp = /var available_dates = \[([^\]]*)\]/;
// parenthèses capturantes :...........^.....^
let match = script.textContent.match(regexp);
if (match) {
  let dateList = match[1];
  let dateRegexp = /(\d{2})-(\d{2})-(\d{4})/g;
  let dateMatch;
  while (dateMatch = dateRegexp.exec(dateList)) {
    console.log(dateMatch);
    ...
  }
}

Tu verras dans la console :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
Array(4) [ "07-03-2019", "07", "03", "2019" ]
Array(4) [ "08-03-2019", "08", "03", "2019" ]
Array(4) [ "11-03-2019", "11", "03", "2019" ]
...

Je te renvoie à ce guide sur les expressions rationnelles, notamment le paragraphe sur les parenthèses, pour comprendre comment ça fonctionne. Des outils en ligne comme regexper.com, regexpal.com ou regex101.com peuvent t’aider également.

Du coup, on a maintenant une boucle while qui nous sort chacune des dates du tableau une par une. À toi d’ajouter le code que tu veux dans cette boucle, par exemple pour ajouter ces entrées dans un tableau à toi que tu auras initialisé au préalable.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
let monTableau = [];
 
...
 
  while (dateMatch = dateRegexp.exec(dateList)) {
    console.log(dateMatch);
    monTableau.push(dateMatch);
  }

**mielpops77** · 07/03/2019, 11h19

Merci beaucoup j'ai pu grâce à vous remplir mon formulaire date de rendez vous comme je l'espérais et d'une pierre de coup découvrir les expressions rationnelles

J'ai maintenant le formulaire date de rendez vous qui se remplis automatiquement génial !!! mais malheureusement cela me ramène à un autre problème

Ce formulaire est équipé d'un onchange qui active une fonction qui fais apparaitre la case à remplir suivante

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" readonly="" class="form-control-input app_date validate" style="width: 260px;" id="app_date" name="app_date" placeholder="YYYY-MM-DD" onchange="this.form.submit();showLoader();" value="">

Donc cela me ramène à devoir activé la fonction depuis mon script , ya t-il une méthode pour activer directement le onchange ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function showLoader()
{
    $("#overlay").show({
			}, 1500);
}

Je pense que c'est cette fonction qui une fois activé dévoile le formulaire suivant

**mielpops77** · 07/03/2019, 11h44

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function showLoader()
{
    $("#overlay").show({
			}, 1500);
}

Ha nn finalement cette fonction charge seulement une animation cela viens donc du

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.form.submit()

Script Tampermonkey Choisir une date disponible automatiquement dans un formulaire

JavaScript

Vue hybride

Discussions similaires

Partager

Partager