IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Fonction click s'exécutant plusieurs fois


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2019
    Messages : 26
    Points : 15
    Points
    15
    Par défaut Fonction click s'exécutant plusieurs fois
    Bonjour,
    Je suis en train de développer une extension qui a pour but d'appeler des numéros de téléphones présents sur une page web. Pour cela avant de passer l'appel je dois me connecter et sélectionner un compte SIP via mon extension. Donc quand je lance mon extension et à la première sélection du compte SIP l'appel téléphonique ne se fait qu'une seule fois donc c'est bon mais si choisis de sélectionner un autre compte SIP, l'appel se fait deux fois alors que je n'ai cliqué qu'une seule fois sur le numéro et ainsi de suite suivant le nombre de fois où je sélectionne un compte SIP.

    Voici ce que je fais quand je sélectionne mon compte SIP et que j'appuie sur un bouton pour valider
    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
    $('#valider2').click(function(){
    	if (document.formulaire.sip.value == 0) {
            alert("choisissez un compte sip");
    	} else {
    		var dselect = document.getElementById('tonSelect');
            // récupération de la valeur sélectionné
            valeur = dselect.options[dselect.selectedIndex].text;
    		localStorage.setItem("sipSelectionne", valeur);
    		chrome.tabs.executeScript(null, {
    			code: 'var token = "' + localStorage.getItem('token') + '";var sip = "' + valeur + '";'
    		},function() {
    			chrome.tabs.executeScript(null, {file: 'appel.js'});
    		});
    	    document.location.href = "parametres.html";
    	}
    });
    et voici comment je passe l'appel:
    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
    var numeroTelephone = new RegExp('0\\d{9}|0\\d[.](\\d{2}[.]){3}\\d{2}|0\\d[ ]?(\\d{2}[ ]?){3}\\d{2}|0(\\d[ ]?){9}', 'g');
    var trouve;
    trouve = htmlString.match(numeroTelephone);
    console.log(htmlString);
    var j = 0;
    if (trouve != null) {
    	for (var i = 0; i < trouve.length; i++) {
    		console.log(trouve[i]);
    		if (!htmlString.includes("<a class=\"numTel\">" + trouve[i] + "</a>")) {
    			document.getElementsByTagName('body')[0].innerHTML = document.getElementsByTagName('body')[0].innerHTML.replace(trouve[i],"<a class=numTel>" + trouve[i] + "</a>");
    		}
    	}
    }
     
    $('.numTel').click(function(){
    		alert("ca clique");
     
    		var numTel = document.getElementsByClassName('numTel')[$('.numTel').index(this)].innerHTML;
    		numTel = numTel.replace(/ |[.]/g,"");
    		localStorage.setItem("numTel", numTel);
    		alert(numTel);
     
    		const params = {
    			"sipExtension": sip,
    			"calledNum" : numTel
    		}
     
    		var xhr = new XMLHttpRequest();
    		xhr.open('POST', 'https://extranet.occicom.fr/api/voip/v1/calls/' + sip + '/makeCall', true);
    		xhr.setRequestHeader('Authorization', token);
    		xhr.setRequestHeader('accept', 'application/json');
    		xhr.setRequestHeader('Content-type', 'application/json');
    		xhr.send(JSON.stringify(params));
    });
    Merci d'avance pour toute l'aide que vous pourrez m'apporter.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    Un souci de propagation du click ?
    Mais tu ne nous montre pas le html ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2019
    Messages : 26
    Points : 15
    Points
    15
    Par défaut
    Sûrement oui mais je vois pas pourquoi il apparaît

    Voici le
    Code HTML : 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
    <!doctype html>
    <html>
     
    <head>
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    	<link rel="stylesheet" href="css/extranet.css"/>
    	<title>Login Extranet</title>
     
    </head>
     
    <body>
        <div class="container-fluid">
    	    <br/><br/>
    	    <div class="row">
    		    <div class="col-xs-12 centrer" >
    				<p>
    				<a href="https://www.occicom.fr" id="site">Site</a> | <a href="http://extranet.occicom.fr/index.php/component/facturation/?controller=client&task=lister_tarifs&Itemid=957&a=C&t=2" id="tarif">Tarif international</a> | <a href="">Connexion</a> | <a href="http://extranet.occicom.fr/index.php/component/users/?view=reset&Itemid=101" id="mdpperdu">Mot de passe perdu?</a> 
    				</p>
    			</div>
    		</div>
    	    <br/>
    		<div id="couleur">
    			<div class="row">
    				<div class="col-md-3">
    					<img src="images/logoOccicom.png" alt="logo d'Occicom" class="image"/>
    				</div>
    			</div>
    			<br/>
     
    				<div class="row">
    					<div class="col-xs-12 centrer" >
    						<input type="text" placeholder="login" id="login" />
    					</div>
    				</div>
    				<br/>
    				<div class="row">
    					<div class="col-xs-12 centrer">
    						<input type="password" placeholder="OTP" id="otp" />
    					</div>
    				</div>
    				<br/>
    				<div class="row">
    					<div class="col-xs-12 centrer">
    						<input type="submit" value="Connexion" id="connexion"/>
    					</div>
    				</div>
    				<br/>
    				<br/>			
     
    		</div>
    	</div>
    	<script src="jquery.js"></script>
    	<script type="text/javascript" src="extranet2.js"></script>
        <script type="text/javascript" src="extranet.js"></script>
    	<!-- <script type="text/javascript" src="appel.js"></script> -->
     
    </body>
     
    </html>

    Code HTML : 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
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    <!doctype html>
    <html>
     
    <head>
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    	<link rel="stylesheet" href="css/extranet.css"/>
    	<title>Parametres Extranet</title>
     
    </head>
     
    <body">
        <div class="container-fluid">
     
    	    <br/><br/>
     
    		<div id="couleur">
     
    		    <div class="row">
    				<div class="col-md-3">
    					<img src="images/logoOccicom.png" alt="logo d'Occicom" class="image"/>
    				</div>
    			</div>
     
    			<br/>
     
    			<div class="row centrer">
    				<div class="col-xs-12">
    					<h1>Parametres</h1>
    				</div>
    			</div>
     
    			<div class="row">
    			    <div class="col-xs-6">
    				    <label>busyMaxCalls:</label>
    				</div>
    			</div>
    			<div class="row">
    			    <div class="col-xs-4">
    				    <input type="text" placeholder="entier" class="param" />
    				</div>
    			</div>
     
    			<div class="row">
    			    <div class="col-xs-4">
    				    <label>unconditional: </label>
    				</div>
    			</div>
    			<div class="row">
    			    <div class="col-xs-4 centrer">
    				    <input type="text" placeholder="true ou false" class="param" />
    				</div>
    			</div>
     
    			<div class="row">
    			    <div class="col-xs-6">
    				    <label>unconditionalNum: </label>
    				</div>
    			</div>
    			<div class="row">
    			    <div class="col-xs-4 centrer">
    				    <input type="text" placeholder="numero de telephone" class="param" />
    				</div>
    			</div>
     
    			<div class="row">
    			    <div class="col-xs-6">
    				    <label>unconditionalNumInternal: </label>
    				</div>
    			</div>
    			<div class="row">
    			    <div class="col-xs-4 centrer">
    				    <input type="text" placeholder="true ou false" class="param" />
    				</div>
    			</div>
     
    			<div class="row">
    			    <div class="col-xs-6">
    				    <label>noAnswer: </label>
    				</div>
    			</div>
    			<div class="row">
    			    <div class="col-xs-4 centrer">
    				    <input type="text" placeholder="true ou false" class="param" />
    				</div>
    			</div>
     
    			<div class="row">
    			    <div class="col-xs-6">
    				    <label>noAnswerNum: </label>
    				</div>
    			</div>
    			<div class="row">
    			    <div class="col-xs-4 centrer">
    				    <input type="text" placeholder="numero de telephone" class="param" />
    				</div>
    			</div>
     
    			<div class="row">
    			    <div class="col-xs-6">
    				    <label>noAnswerNumInternal: </label>
    				</div>
    			</div>
    			<div class="row">
    			    <div class="col-xs-4 centrer">
    				    <input type="text" placeholder="true ou false" class="param" />
    				</div>
    			</div>
     
    			<div class="row">
    			    <div class="col-xs-6">
    				    <label>noAnswerTimer: </label>
    				</div>
    			</div>
    			<div class="row">
    			    <div class="col-xs-4 centrer">
    				    <input type="text" placeholder="entier" class="param" />
    				</div>
    			</div>
     
    			<div class="row">
    			    <div class="col-xs-6">
    				    <label>busy: </label>
    				</div>
    			</div>
    			<div class="row">
    			    <div class="col-xs-4 centrer">
    				    <input type="text" placeholder="true ou false" class="param" />
    				</div>
    			</div>
     
    			<div class="row">
    			    <div class="col-xs-6">
    				    <label>busyNum: </label>
    				</div>
    			</div>
    			<div class="row">
    			    <div class="col-xs-4 centrer">
    				    <input type="text" placeholder="numero de telephone" class="param" />
    				</div>
    			</div>
     
    			<div class="row">
    			    <div class="col-xs-6">
    				    <label>busyNumInternal: </label>
    				</div>
    			</div>
    			<div class="row">
    			    <div class="col-xs-4 centrer">
    				    <input type="text" placeholder="true ou false" class="param" />
    				</div>
    			</div>
     
    			<div class="row">
    			    <div class="col-xs-6">
    				    <label>unavailable: </label>
    				</div>
    			</div>
    			<div class="row">
    			    <div class="col-xs-4 centrer">
    				    <input type="text" placeholder="true ou false" class="param" />
    				</div>
    			</div>
     
    			<div class="row">
    			    <div class="col-xs-6">
    				    <label>unavailableNum: </label>
    				</div>
    			</div>
    			<div class="row">
    			    <div class="col-xs-4 centrer">
    				    <input type="text" placeholder="numero de telephone" class="param" />
    				</div>
    			</div>
     
    			<div class="row">
    			    <div class="col-xs-6">
    				    <label>unavailableNumInternal: </label>
    				</div>
    			</div>
    			<div class="row">
    			    <div class="col-xs-4 centrer">
    				    <input type="text" placeholder="true ou false" class="param" />
    				</div>
    			</div>
     
    			<br/>
    			<div class="row">
    				<div class="col-xs-12 centrer">
    					<input type="submit" value="Valider" id="valider"/>
    				</div>
    			</div>
    			<br/>
    			<br/>
     
    		</div>
     
    	</div>
     
    	<script src="jquery.js"></script>
    	<script type="text/javascript" src="parametre.js"></script>
        <script type="text/javascript" src="extranet.js"></script>
    	<!-- <script type="text/javascript" src="appel.js"></script> -->
     
    </body>
     
    </html>

    Code HTML : 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
    <!doctype html>
    <html>
     
    <head>
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    	<link rel="stylesheet" href="css/extranet.css"/>
    	<title>Compte SIP</title>
     
    </head>
     
    <body>
        <div class="container-fluid">
    	    <br/><br/>
    	    <div class="row">
    		    <div class="col-xs-12 centrer" >
    				<h1>Selectionner un compte SIP</h1> 
    			</div>
    		</div>
     
    		<div id="couleur">
    			<div class="row">
    				<div class="col-md-3">
    					<img src="images/logoOccicom.png" alt="logo d'Occicom" class="image"/>
    				</div>
    			</div>
    			<br/>
     
    			<div class="row">
    				<div class="col-xs-12 centrer" >
    				    <form name="formulaire">
    						<select name="sip" id="tonSelect">
    						    <option selected value="0">Selectionner un compte SIP</option>
     
    						</select>
    					</form>
    				</div>
    			</div>
    			<br/>
    			<div class="row">
    				<div class="col-xs-12 centrer">
    					<input type="submit" value="Valider" id="valider2"/>
    				</div>
    			</div>
    			<br/>
    			<br/>			
     
    		</div>
    	</div>
        <script src="jquery.js"></script>
        <script type="text/javascript" src="extranet.js"></script>
    	<script type="text/javascript" src="sip.js"></script>
     
    </body>
     
    </html>

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="submit" value="Valider" id="valider2"/>
    input type submit :
    tu n'empeches pas le formulaire d'être soumis lors du click ...

    cf. preventDefault()

    ou modifie le en input type button
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2019
    Messages : 26
    Points : 15
    Points
    15
    Par défaut
    J'ai essayé mais ça ne marche pas.
    Je ne pense pas que ça aurait pu être le problème car quand je sélectionne pour la première fois un compte SIP ça ne lance qu'un appel lors du clic (donc ça fonctionne correctement), c'est à partir de la deuxième sélection qu'il passe plusieurs appels en un clic.

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Bonjour,
    à chaque fois que tu exécutes ton script il affecte l’évènement aux différents éléments.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('.numTel').click(function()
    Nota :
    cela me pique toujours les yeux lorsque je vois du JavaScript « vanilla » dans du code jQuery

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    $('.numTel').click(function(){
        var numTel = document.getElementsByClassName('numTel')[$('.numTel').index(this)].innerHTML;

  7. #7
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Moi il y a ceci qui me dérange :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    $('#valider2').click(function () {
      …
      chrome.tabs.executeScript( ... );
      document.location.href = "parametres.html";
      …
    });
    La page "parametres.html" est chargée avant que la fonction de rappel de executeScript() n’ait pu être appelée.

    D’ailleurs il y a d’autres problèmes rien que dans ce premier script :
    • valeur n’est pas déclarée. Si le script marche malgré ça, ça veut dire que tu n’utilises pas le mode strict, et c’est pas bien ;
    • la propriété .text n’existe pas dans dselect.options[dselect.selectedIndex].text – c’est soit .value, soit .textContent ;
    • on n’est pas censés utiliser localStorage dans une extension, et ça je t’en ai déjà parlé.


    Et sinon, je te propose une expression rationnelle plus simple : /0\d([\s.]?)\d{2}(?:\1\d{2}){3}/g.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  8. #8
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Dans mon précédent post je me suis retenu de parler de innerHTML, parce que la solution qui permet d’éviter de s’en servir est loin d’être évidente.

    Ce n’est pas avisé d’utiliser innerHTML dans une extension, à plus forte raison sur le <body> tout entier, car il y a possibilité de corruption du DOM, et l’extension risquerait de « casser » des pages web. La corruption a lieu quand des éléments réécrits avec innerHTML avaient des gestionnaires d’évènements attachés ; les gestionnaires sont détruits par innerHTML et les évènements ne fonctionnent plus.

    J’ai réfléchi à une méthode récursive qui parcourt les nœuds texte du document. Les points-clés sont .spitText() et .replaceWith().

    manifest.json
    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
    {
      "manifest_version": 2,
      "name": "phonenums",
      "version": "1.0",
     
      "permissions": [ "storage" ],
     
      "content_scripts": [
        {
          "matches": [ "*://localhost/*" ],
          "js": [ "content.js" ],
          "run_at": "document_end"
        }
      ]
    }
    content.js
    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
    "use strict";
     
    console.log("%cdébut script de contenu", "background: #8FF");
    console.log("document.readyState = ", document.readyState);
     
    // en cas de rechargement de l’extension, empêche d’agir après "document_end"
    if ("loading" === document.readyState || "interactive" === document.readyState) {
     
      const getAllNumMatches = (text) => {
        const matches = [];
        const phoneRegex = /0\d([\s.]?)\d{2}(?:\1\d{2}){3}/g;
     
        let match = null;
        while (match = phoneRegex.exec(text)) {
          const length = match[0].length;
          matches.push({
            index  : phoneRegex.lastIndex - length,
            text   : match[0],
            length : length
          });
        }
     
        return matches;
      };
     
      // peut-être plus économe en mémoire sur les grosses pages (à tester)
      //const getAllNumMatches = function* (text) {
      //  const phoneRegex = /0\d([\s.]?)\d{2}(?:\1\d{2}){3}/g;
      //
      //  let match = null;
      //  while (match = phoneRegex.exec(text)) {
      //    const length = match[0].length;
      //    yield {
      //      index  : phoneRegex.lastIndex - length,
      //      text   : match[0],
      //      length : length
      //    };
      //  }
      //};
     
      const transformNums = (element) => {
        // on doit travailler sur une copie de element.childNodes pour le « geler »,
        // sinon il se met à jour et inclut nos nœuds nouvellement ajoutés
        for (const node of Array.from(element.childNodes)) {
          switch (node.nodeType) {
            case Node.TEXT_NODE: {
              const text = node.data.trim();
     
              if (!text) {
                console.log("%c(espaces blancs ignorés)", "color: gray");
              }
              else {
                console.log("#text:", text);
                for (const match of getAllNumMatches(text)) {
                    console.log(match);
                    const numTextNode = match.index > 0
                      ? node.splitText(match.index + 1)
                      : node;
                    const restTextNode = match.length < node.data.length
                      ? numTextNode.splitText(match.length)
                      : null;
     
                    const $a = document.createElement("a");
                    const canonicalNum = match.text.replace(/(?!^)\D+/g, "");
                    $a.href = `tel:${canonicalNum}`; // à remplacer par ce qu’on veut
                    $a.textContent = canonicalNum;
     
                    // ici éventuellement rajouter un gestionnaire de "click" sur $a
     
                    numTextNode.replaceWith($a);
                }
              }
              break;
            }
     
            case Node.ELEMENT_NODE: {
              // appel récursif
              transformNums(node);
              break;
            }
     
            default: {
              // ignore tous les autres types de nœuds
              break;
            }
          }
        }
      };
     
      //console.log(document.body.innerHTML);
      //document.body.insertAdjacentHTML("afterbegin",
      //  '<p style="color: red">Contenu injecté par l’extension</p>');
     
      //browser.storage.local.set({ reponse: 42 })
      //  .then(() => { console.log("storage set a réussi"); })
      //  .catch((reason) => { console.error(reason); });
     
      browser.storage.local.get()
        .then((data) => console.log("storage get :", data));
     
      transformNums(document.body);
     
    }
     
    console.log("%cfin script de contenu", "background: #8FF");
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  9. #9
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2019
    Messages : 26
    Points : 15
    Points
    15
    Par défaut
    Merci pour ces réponses j'essaye actuellement d'appliquer tes conseils.
    Cependant je rencontre un autre problème j'essaye d'utiliser chrome.runtime.onMessage mais je ne vois pas comment l'utiliser correctement. Quelqu'un pourrait me l'expliquer. Voilà où j'en suis pour l'instant:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    chrome.runtime.sendMessage({
        data : "runContentScript"
    });
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    chrome.runtime.onMessage.addListener(
    function(message, callback) {
        if (message === "runContentScript"){
            console.log("c'est le bon message");
            chrome.tabs.executeScript({
                file: 'contentScript.js'
            });
        }
    });
    Merci d'avance pour vos réponses

  10. #10
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Pourrais-tu préciser, à chaque fois que tu montres du code, s’il s’agit d’un script de contenu ou d’un script d’arrière-plan ? La différence est importante.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  11. #11
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2019
    Messages : 26
    Points : 15
    Points
    15
    Par défaut
    Ici les deux morceaux de code sont du script de contenu.

  12. #12
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Le même fichier ?
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  13. #13
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2019
    Messages : 26
    Points : 15
    Points
    15
    Par défaut
    oui

  14. #14
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2019
    Messages : 26
    Points : 15
    Points
    15
    Par défaut
    je viens de mettre cette partie dans un fichier javascript différent et qui tourne en arrière-plan (définit dans le fichier manifest) et ça génère l'alerte mais j'ai pas l'impression que ça exécute le fichier que je veux juste après.
    Du coup est-ce que c'est normal que le fichier ne soit pas exécuté par ce que ça ne me fait aucune erreur quand je teste?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
        alert(message);
        if (message === "runContentScript"){
    	console.log("c'est le bon message");
    	chrome.tabs.executeScript({
    		file: 'extranet.js'
    	});
    }
    });
    Merci d'avance pour toutes vos réponses.

  15. #15
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2019
    Messages : 26
    Points : 15
    Points
    15
    Par défaut
    Bonjour,
    je suis partie sur une autre idée je veux envoyer un message contenant des informations textuelles à partir d'un script de contenu (sip.js) vers le script qui est chargé par la page web au lancement de l'extension (appel.js)

    Voici le code que je mets dans sip.js:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    chrome.runtime.sendMessage(localStorage.getItem('token') + "\n" + localStorage.getItem("sipSelectionne"));
    Voici le code que je mets dans appel.js:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
        alert(message);
    });
    Merci d'avance pour vos réponses.

  16. #16
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Bonjour,
    désolé pour l’attente, j’ai voulu faire quelques tests avant de te répondre.

    À propos des messages : quand ils sont passés, ils ont la forme d’un objet avec une propriété data. Il faut donc examiner message.data, par exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
        if (message.data === "runContentScript") {
            console.log("c'est le bon message");
            ...
        }
    });
    Pour injecter des scripts avec tabs.executeScript(), il faut deux choses :
    1. la permission "activeTab", à rajouter dans le manifeste ;
    2. une action explicite de l’utilisateur ou de l’utilisatrice.

    Comme indiqué dans la doc permission activeTab, l’action explicite n’est pas seulement un clic trusted (comme les évènements DOM d’une page web classique), il faut que ce clic ait eu lieu sur un bouton ou menu exposé par l’extension elle-même. Une conséquence de ça, c’est qu’on ne peut pas le faire depuis un script de contenu.

    D’après mes tests j’ai conclu que la solution la plus simple était d’ajouter un bouton browser_action et d’écouter les clics sur ce bouton (browserAction.onClicked) depuis ton script d’arrière-plan. Du coup, avec cette solution, on n’utilise plus les messages.

    manifest.json
    Code json : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {
      "manifest_version": 2,
      "name": "phonenums",
      "version": "1.0",
     
      "permissions": [ "storage", "activeTab" ],
      "browser_action": {},
     
      "background": {
        "scripts": [ "background.js" ]
      }
    }

    background.js
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    "use strict";
     
    console.log("%cbackground script start", "color: black; background: #F8F");
     
    browser.browserAction.onClicked.addListener((tab) => {
      console.log("browserAction.onClicked:", tab);
     
      browser.tabs.executeScript({ file: "extranet.js" })
        .then(() => console.log("executeScript() ok"))
        .catch((error) => console.error(error.message));
    });
     
    console.log("%cbackground script end", "color: black; background: #F8F");
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

Discussions similaires

  1. Fonction s'exécute plusieurs fois
    Par bigbob195 dans le forum jQuery
    Réponses: 4
    Dernier message: 14/12/2012, 00h09
  2. [Débutant] PC qui rame, fonctions exécutées plusieurs fois
    Par KaloOopS dans le forum C#
    Réponses: 7
    Dernier message: 14/09/2012, 22h14
  3. Fonction Ajax sur clique qui s'exécute plusieurs fois
    Par arthuro45 dans le forum Général JavaScript
    Réponses: 22
    Dernier message: 21/03/2011, 11h58
  4. Réponses: 3
    Dernier message: 28/11/2007, 16h44
  5. Sous-requête excutée plusieurs fois dans une requête
    Par sheridan31 dans le forum Oracle
    Réponses: 8
    Dernier message: 03/07/2006, 17h18

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo