Paramètres URL en JS

**rlelamer** · 20/03/2017, 14h08

Bonjour,
Je cherche à extraire les paramètres de l'Url

Code :

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

exemple : http://sail.zezo.org/clipperton-noumea/chart.pl?lat=-16.42123&lon=-151.3126&userid=1234567

J'ai cherché sur le net et j'en suis arrivé à ce code:

Code :

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

1
2
3
4
5
6
7
8
9
10
function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
 
getUrlParameter('lat'); 
getUrlParameter('lon');
getUrlParameter('userid');

- Mon soucis est le suivant : comment je fais pointer la fonction 'getUrlParameter()' sur l'adresse 'http://sail.zezo.org/*/chart.pl?lat=*&lon=*&userid=*' ?

- Je souhaite également extraire le nom de la course, est qu'avec ce code ça peut fonctionner ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
var race = function name_race(url)
 
function name_race(url) {
if (url) {
        if (url.match(/clipperton-noumea/)) {
            race = "Clipperton - Nouméa";
        } else if (url.match(/900nq/)) {
            race = "Au large de Saint Tropez - 900 Milles";
        }
    }
}

Merci d'éclairer ma lanterne

PS: Voici le code du script actuel qui agit sur un fichier 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
<html>
    <head>
        <meta charset="UTF-8">
        <script>
 
// returns info from the html file content
function info_from_file_content(_content)
{
    var res = [];
    res['course'] = /<title>(.*)<\/title>/g.exec(_content)[1];
    res['lat'] = parseFloat(/var boat_lat = (.*);/g.exec(_content)[1]);
    res['lon'] = parseFloat(/var boat_lon = (.*);/g.exec(_content)[1]);
    return res;
}
 
// Convert lon / lat decimal to degree minute second
function dms_lon(lon) {
  var NS = (lon>=0)?'E':'W'
  var d_lon = Math.trunc(lon);
  var x_lon = (lon - d_lon) * 60;
  var m_lon = Math.trunc(x_lon);
  var y_lon = (x_lon - m_lon) * 60;
  s_lon = Math.trunc(y_lon);
 
  d_lon = Math.abs(d_lon);
  m_lon = Math.abs(m_lon);
  s_lon = Math.abs(s_lon);
 
  var bd_lon = (d_lon>=100)?d_lon:'0'+d_lon;
  var ad_lon = (d_lon>=10)?bd_lon:'00'+d_lon;
  var am_lon = (m_lon>=10)?m_lon:'0'+m_lon;
  var as_lon = (s_lon>=10)?s_lon:'0'+s_lon;
  return ad_lon + '°' + NS + ' ' + am_lon + "'" + as_lon +'"'; 
}
            
function dms_lat(lat) {
  var NS = (lat>=0)?'N':'S'
  var d_lat = Math.trunc(lat);
  var x_lat = (lat - d_lat) * 60;
  var m_lat = Math.trunc(x_lat);
  var y_lat = (x_lat - m_lat) * 60;
  s_lat = Math.trunc(y_lat);
 
  d_lat = Math.abs(d_lat);
  m_lat = Math.abs(m_lat);
  s_lat = Math.abs(s_lat);
 
  var bd_lat = (d_lat>=100)?d_lat:'0'+d_lat;
  var ad_lat = (d_lat>=10)?bd_lat:'00'+d_lat;
  var am_lat = (m_lat>=10)?m_lat:'0'+m_lat;
  var as_lat = (s_lat>=10)?s_lat:'0'+s_lat;
  return ad_lat + '°' + NS + ' ' + am_lat + "'" + as_lat +'"'; 
}
 
// Display info in the table
function display_info(_values)
{
    document.getElementById('output_info').innerHTML = '<tr><td align="center">Course VR</td><td align="center">Bateau</td><td align="center">Position</td></tr><tr><td align="center">'+_values['course']+'</td><td align="center">'+_values['bateau']+'</td><td align="center">'+dms_lon(_values['lon'])+' / '+dms_lat(_values['lat'])+'</td></tr>';
}
 
// returns data from the html file content
function data_from_file_content(_content)
{
    var expr = /updi\(event\,\'(.*)<br>Distances:&nbsp;(.*)<br><b>Wind:<\/b>(.*)\(<b>TWA(.*);<\/b>\)<br><b>Heading:<\/b>(.*)<b>Sail:<\/b>(.*)<br><b>Boat Speed:<\/b>(.*)','(.*)'\)/gi;
    var value;
    var values = [];
    while(value = expr.exec(_content))
    {
        var res = [];
        res['date']=value[1];
        res['distance']=value[2];
        res['wind']=value[3];
        res['twa']=value[4];
        res['heading']=value[5];
        res['sail']=value[6];
        res['speed']=value[7];
        values.push(res);
    }
    return values;
}
 
// Display data in the table
function display_data(_values)
{
    var table_content = '<tr><td align="center">Date et Heure</td><td align="center">Distance</td><td align="center">Vent</td><td align="center">TWA</td><td align="center">HDG</td><td align="center">Voile</td><td align="center">Vitesse bateau</td></tr>';
    for(var l=0; l<_values.length; l++)
    {
        var twa = parseFloat(_values[l]['twa']);
        var twa_color = (twa>=0)?'green':'red';
        table_content += '<tr><td align="center">'+_values[l]['date']+'</td><td align="center">'+_values[l]['distance']+'</td><td align="center">'+_values[l]['wind']+'</td><td align="center" style=\'color:'+twa_color+';\'>'+Math.abs(twa)+'°</td><td align="center" style="color:blue" >'+_values[l]['heading']+'</td><td align="center">'+_values[l]['sail']+'</td><td align="center">'+_values[l]['speed']+'</td></tr>';
    }
    document.getElementById('output').innerHTML = table_content;
}
 
// This function is called when the button is pushed
function button_clicked()
{
    var file_content = document.getElementById('file').value;
 
    var info = info_from_file_content( file_content );
    display_info( info );
 
    var data = data_from_file_content( file_content );
    display_data( data );
}
 
        </script>
    </head>
<body style="background-color:grey;">
File&nbsp;content&nbsp;:<br />
<textarea id="file" rows="3"></textarea><br />
<br />
<button onclick="button_clicked();">Extraire Route ZEZO</button><br />
<br />
<table border="3" align="center" bgcolor="white" id="output_info"><tr><td align="center">Course VR</td><td align="center">Bateau</td><td align="center">Position</td></tr></table><br />
<br />
<table border="3" align="center" bgcolor="white" id="output"><tr><td align="center">Date et Heure</td><td align="center">Distance</td><td align="center">Vent</td><td align="center">TWA</td><td align="center">HDG</td><td align="center">Voile</td><td align="center">Vitesse bateau</td></tr></table>
</body>
</html>

Url a laquelle je souhaite extraire les données : http://sail.zezo.org/clipperton-noum...userid=1577252

c'est le code source de cette page que j'exploite en local ce qui m'oblige à l'afficher, le copier puis le coller dans le code ci dessus.

**NoSmoking** · 20/03/2017, 15h57

Bonjour,
perso j'utilise cette fonction, simple d'intégration.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * @see {@link http://papermashup.com/read-url-get-variables-withjavascript/}
 */
function getParam(url) {
  'use strict';
  var param = {};
  url.replace( 
    /[?&]+([^=&]+)=?([^&]*)?/gi,  // regexp
    function( str, key, value ) { // callback
      param[key] = value !== undefined ? value : '';
    }
  );
  return param;
}

elle retourne un objet JSON avec tous les paramètres trouvés.
Dans ton cas un

Code :

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

1
2
var url = "http://sail.zezo.org/clipperton-noumea/chart.pl?lat=-16.42123&lon=-151.3126&userid=1234567";
var data = getParam(url);

te retournerais l'objet suivant

Code :

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

1
2
3
4
5
data = {
  "lat": "-16.42123",
  "lon": "-151.3126",
  "userid": "1234567"
}

**rlelamer** · 20/03/2017, 17h16

Merci NoSmoking,

J'arrive à afficher les différentes valeurs avec un

Code :

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

alert(data['lat ou lon ou userid'])

pour contrôler il existe une syntaxe particulière si jamais je voulais afficher les 3 d'un coup

Code :

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

alert(data['lat']['lon']['userid'])

ne fonctionne pas j'ai un soucis de syntaxe visiblement ...

Code :

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

var url = window.location.href

ça fonctionne à partir d'une extension je suppose si c'est exécuté de mon fichier html ça va me retourner Route zezo.html et non

Code :

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

http://sail.zezo.org/clipperton-noumea/chart.pl?lat=-16.42123&lon=-151.3126&userid=1234567

je suis paumé et j'ai la tête qui fume

**badaze** · 20/03/2017, 18h31

Pour afficher les 3 valeurs.

alert(data['lat']+' '+data['lon']+' '+data['userid']);

Éventuellement essaie alert(data);

**NoSmoking** · 20/03/2017, 18h43

ne fonctionne pas j'ai un soucis de syntaxe visiblement ...

badaze vient de te donner la syntaxe mais commence à utiliser la console, touche F12 de ton navigateur.

Code :

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

console.log( data); // simplement pour tout voir

Je reviens sur

c'est le code source de cette page que j'exploite en local ce qui m'oblige à l'afficher, le copier puis le coller dans le code ci dessus

si tu veux récupérer les données de la page il serait préférable de faire cela coté serveur.

Maintenant si c'est juste pour la mettre dans une <iframe> alors tu peux récupérer l'url de celle-ci pour en extraire les paramètres

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
<iframe src="http://sail.zezo.org/clipperton-noumea/chart.pl?lat=-16.00303&lon=-151.7829&userid=1577252"></iframe>
<script>
/**
 * @see {@link http://papermashup.com/read-url-get-variables-withjavascript/}
 */
function getParam(url) {
  'use strict';
  var param = {};
  url.replace( 
    /[?&]+([^=&]+)=?([^&]*)?/gi,  // regexp
    function( str, key, value ) { // callback
      param[key] = value !== undefined ? value : '';
    }
  );
  return param;
}
var oIframe = document.querySelector( 'iframe');
var data = oIframe.src;
console.log( getParam(data));
</script>

**rlelamer** · 20/03/2017, 20h12

Merci badaze, effectivement j'ai deja eu l'occasion de manipuler cette syntax ...

Merci NoSmoking, je découvre la console ...

Je pars de loin je sais merci de votre patience et surtout de vos explications c'est décourageant et surtout rageant de voir toute ces possibilités et d'être capable de rien ou presque mais je suis trop près du but pour abandonner

Je m'exprime mal désolé concernant l'Url
j'vais essayé de faire mieux:

hxxp://sail.zezo.org/clipperton-noumea/chart.pl?lat=-14.98521&lon=-152.966&userid=1577252

En Noir : ces paramètres de l'Url ne changent jamais
En Vert : le nom de la course, il y en a plusieurs (je participe actuellement à 2 d'entre elles 'clipperton-noumea' et '900nq'
En Orange : les coordonnées GPS du bateau (lat & lon) qui évoluent également chaque secondes et userid lui c'est mon bateau ( j'en ai 2 sur chaque courses )

Le problème est que l'Url varie donc je peux pas la mettre en dur dans le script, est ce qu'il existe un moyen via une fonction définie ou à définir pour lier la variable url à l'adresse dynamique de l'onglet ?

Si j'obtiens ça je peux donc extraire les paramètres lon / lat / userid ainsi que le nom de la course (avec url.match) et donc le tableau info peut être rempli

il me restera donc la seconde partie avec les valeurs pour chaque ligne mais c'est pas tout de suite j'y vais aussi vite que je peux avec mes piètres connaissances.

Voila j'espère que c'est plus clair comme cela

Merci

Je voulais avancer un peu j'ai donc commencé a réécrire le script et en même temps jouer avec console.log mais y'a pas grand chose qui fonctionne ... c'est désespérant

c'est a devenir fou, drogué et alcoolique

voila le code :

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
 
<html>
<head>
    <meta charset="UTF-8">
    <script>
// Récupérer les paramètres lat - lon - userid dans l'Url
function getParam(url) {
'use strict';
var param = {};
url.replace( 
    /[?&]+([^=&]+)=?([^&]*)?/gi,  // regexp
    function( str, key, value ) { // callback
      param[key] = value !== undefined ? value : '';
    }
  );
  return param;
}
 
var url = "http://sail.zezo.org/clipperton-noumea/chart.pl?lat=-16.42123&lon=-151.3126&userid=1234567";
var data = getParam(url);
 
 
 
// Récupérer Nom de la course     
function name_race(url) {
if (url) {
        if (url.match(/clipperton-noumea/)) {
            race = "Clipperton - Nouméa";
        } else if (url.match(/900nq/)) {
            race = "Au large de Saint Tropez - 900 Milles";
        }
    }
}
 
var race = name_race(url);
 
 
 
// Convertir lon / lat décimale en degrées minutes secondes
function dms_lon(lon) {
  var NS = (lon>=0)?'E':'W'
  var d_lon = Math.trunc(lon);
  var x_lon = (lon - d_lon) * 60;
  var m_lon = Math.trunc(x_lon);
  var y_lon = (x_lon - m_lon) * 60;
  s_lon = Math.trunc(y_lon);
 
  d_lon = Math.abs(d_lon);
  m_lon = Math.abs(m_lon);
  s_lon = Math.abs(s_lon);
 
  var bd_lon = (d_lon>=100)?d_lon:'0'+d_lon;
  var ad_lon = (d_lon>=10)?bd_lon:'00'+d_lon;
  var am_lon = (m_lon>=10)?m_lon:'0'+m_lon;
  var as_lon = (s_lon>=10)?s_lon:'0'+s_lon;
  return ad_lon + '°' + NS + ' ' + am_lon + "'" + as_lon +'"'; 
}
 
function dms_lat(lat) {
  var NS = (lat>=0)?'N':'S'
  var d_lat = Math.trunc(lat);
  var x_lat = (lat - d_lat) * 60;
  var m_lat = Math.trunc(x_lat);
  var y_lat = (x_lat - m_lat) * 60;
  s_lat = Math.trunc(y_lat);
 
  d_lat = Math.abs(d_lat);
  m_lat = Math.abs(m_lat);
  s_lat = Math.abs(s_lat);
 
  var bd_lat = (d_lat>=100)?d_lat:'0'+d_lat;
  var ad_lat = (d_lat>=10)?bd_lat:'00'+d_lat;
  var am_lat = (m_lat>=10)?m_lat:'0'+m_lat;
  var as_lat = (s_lat>=10)?s_lat:'0'+s_lat;
  return ad_lat + '°' + NS + ' ' + am_lat + "'" + as_lat +'"'; 
}
 
    </script>
</head>
</html>

**badaze** · 20/03/2017, 21h40

Je ne comprends pas trop ton souci. La fonction de NoSmoking te renvoie les paramètres.

Pour la course, essaie ceci.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script>
function getCourse(url) {
 var reg    = new RegExp("(.+)\/\/(.+)\/(.+)\/","gi");
 var result  = reg.exec(url);
 return result[3];
}
var url = 'http://sail.zezo.org/clipperton-noumea/chart.pl?lat=-14.98521&lon=-152.966&userid=1577252';
alert(getCourse(url));
 
</script>

**rlelamer** · 20/03/2017, 23h09

c'est bon ... ouffff merci badaze
C'est moi qui ai du mal avec les syntax mais bon ça vient doucement ...

Reste l'histoire de récupérer l'url en automatique en non en dur dans le script

Code :

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

1
2
3
4
5
6
 
old
var url = "http://sail.zezo.org/clipperton-noumea/chart.pl?lat=-14.98521&lon=-152.966&userid=1577252"
 
new
var url = ?

Je sais pas si avec du code en JS on peut le faire, ça semble compliqué mon truc ...

Nom : Capture d’écran 2017-03-20 à 22.58.30.png
Affichages : 892
Taille : 38,8 Ko

**badaze** · 20/03/2017, 23h14

Quelles opérations fais-tu actuellement pour récupérer l'url ? N'hésite pas à être précis.

**rlelamer** · 20/03/2017, 23h32

Actuellement je me sers pas de l'url ...
J'affiche le code source de la page comme ceci :
Nom : Capture d’écran 2017-03-20 à 23.19.36.png
Affichages : 826
Taille : 124,6 Ko

Nom : Capture d’écran 2017-03-20 à 23.19.36.png
Affichages : 826
Taille : 124,6 Ko

Puis je sélectionne tous le code source avec cmd+A puis je copie avec cmd+c
J'ouvre mon fichier Route zezo.html
Nom : Capture d’écran 2017-03-20 à 23.24.21.png
Affichages : 713
Taille : 49,6 Ko

Nom : Capture d’écran 2017-03-20 à 23.24.21.png
Affichages : 713
Taille : 49,6 Ko

Je copie le code source dans l'encart en haut à gauche avec cmd+v
Et je clique sur le bouton 'Extraire Route Zezo'
Nom : Capture d’écran 2017-03-20 à 23.27.03.png
Affichages : 854
Taille : 209,9 Ko

Nom : Capture d’écran 2017-03-20 à 23.27.03.png
Affichages : 854
Taille : 209,9 Ko

je récupère les valeurs 'lon / lat et course' avec ce code :

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
 
// returns info from the html file content
function info_from_file_content(_content)
{
    var res = [];
    res['course'] = /<title>(.*)<\/title>/g.exec(_content)[1];
    res['lat'] = parseFloat(/var boat_lat = (.*);/g.exec(_content)[1]);
    res['lon'] = parseFloat(/var boat_lon = (.*);/g.exec(_content)[1]);
    return res;
}
 
// Convert lon / lat decimal to degree minute second
function dms_lon(lon) {
  var NS = (lon>=0)?'E':'W'
  var d_lon = Math.trunc(lon);
  var x_lon = (lon - d_lon) * 60;
  var m_lon = Math.trunc(x_lon);
  var y_lon = (x_lon - m_lon) * 60;
  s_lon = Math.trunc(y_lon);
 
  d_lon = Math.abs(d_lon);
  m_lon = Math.abs(m_lon);
  s_lon = Math.abs(s_lon);
 
  var bd_lon = (d_lon>=100)?d_lon:'0'+d_lon;
  var ad_lon = (d_lon>=10)?bd_lon:'00'+d_lon;
  var am_lon = (m_lon>=10)?m_lon:'0'+m_lon;
  var as_lon = (s_lon>=10)?s_lon:'0'+s_lon;
  return ad_lon + '°' + NS + ' ' + am_lon + "'" + as_lon +'"'; 
}
 
function dms_lat(lat) {
  var NS = (lat>=0)?'N':'S'
  var d_lat = Math.trunc(lat);
  var x_lat = (lat - d_lat) * 60;
  var m_lat = Math.trunc(x_lat);
  var y_lat = (x_lat - m_lat) * 60;
  s_lat = Math.trunc(y_lat);
 
  d_lat = Math.abs(d_lat);
  m_lat = Math.abs(m_lat);
  s_lat = Math.abs(s_lat);
 
  var bd_lat = (d_lat>=100)?d_lat:'0'+d_lat;
  var ad_lat = (d_lat>=10)?bd_lat:'00'+d_lat;
  var am_lat = (m_lat>=10)?m_lat:'0'+m_lat;
  var as_lat = (s_lat>=10)?s_lat:'0'+s_lat;
  return ad_lat + '°' + NS + ' ' + am_lat + "'" + as_lat +'"'; 
}

Je ne récupère pas le userid (bateau) il n'apparait nul part dans le code source

Voila la démarche que je fais 8x mini par jours ( 2 bateaux sur 2 courses )

Pour le nouveau fichier html j'ai mis l'adresse en dur ( var url = http://sail.zezo.org/...) comme ca je vois le script en fonction avec console.log

Le tableau html je m'en sers pour le taf je me connecte vite fait aux itérations precise et je modifie mon cap ou twa même si c'est pas 100% précis je suis dans une route quasi optimisée

**badaze** · 20/03/2017, 23h49

Comment fais-tu pour obtenir l'url suivante : http://sail.zezo.org/clipperton-noum...userid=1577252

**rlelamer** · 21/03/2017, 00h05

J'vais détailler :
sur Virtual Regatta:
Nom : Capture d’écran 2017-03-20 à 23.53.57.png
Affichages : 831
Taille : 333,7 Ko

Je clique sur 3D en bas à droite

Cette page s'ouvre:
Nom : Capture d’écran 2017-03-20 à 23.59.35.png
Affichages : 788
Taille : 510,2 Ko

La je clique sur l'extension zezo.org en haut à droite

Cette page s'ouvre:
Nom : Capture d’écran 2017-03-20 à 23.55.19.png
Affichages : 854
Taille : 215,4 Ko

Et l'url est dans la barre d'adresse

**badaze** · 21/03/2017, 00h19

Bien.

A la vue de ce que tu as posté. Je dirais que tu peux automatiser quand tu cliques sur zezo.org. Non ?

**rlelamer** · 21/03/2017, 07h19

Je te détaille ça ce soir, j'ai décompiller l'extension pour voir comment il faisait

**rlelamer** · 21/03/2017, 22h42

Bonsoir Badaze désolé pour l'heure tardive mais c'est le taf ...

voila l'extension zezo decompilée:

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
{
    "update_url": "https://clients2.google.com/service/update2/crx",
    "name": "Zezo.org",
    "version": "2.0.9",
    "description": "Provides a quick access to the zezo.org weather routng site via icon in the VR address bar.",
    "permissions": [
        "webRequest",
        "http://*.virtualregatta.com/*"
    ],
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "manifest_version": 2,
    "icons": {
        "16": "icon-16.png",
        "48": "icon-48.png",
        "128": "icon-128.png"
    },
    "page_action": {
        "default_icon": {
            "16": "icon-16.png",
            "19": "icon-19.png"
        },
        "default_popup": "popup.html",
        "default_title": "zezo.org"
    }
}

background.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
 
var races = {};
var last_race = null;
function set_last(url) {
    if (url) {
        if (url.match(/index_vendeeglobe/)) {
            last_race = "vendeeglobe";
        } else if (url.match(/index_vgsprint/)) {
            last_race = "vg-sprint";
        } else if (url.match(/index_downunder/)) {
            last_race = "downunder";
        } else if (url.match(/index_carib600/)) {
            last_race = "carib600";
        } else if (url.match(/clipperton-noumea/)) {
            last_race = "clipperton-noumea";
        } else if (url.match(/index_900nq/)) {
            last_race = "900nq";
        }
    }
}
chrome.tabs.onActivated.addListener(function(activeInfo) {
    chrome.tabs.get(activeInfo.tabId, function(tab) {
        set_last(tab.url);
    });
});
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (!(typeof tab === "undefined")) {
        set_last(tab.url);
    }
});
chrome.webRequest.onSendHeaders.addListener(
    function(info) {
        var params, p;
        if (params = info.url.match(/http:\/\/([^.]+).*GetPosition&id_user=([0-9]+)/)) {
            chrome.pageAction.show(info.tabId);
            if (!races[params[1]]) {
                races[params[1]] = {
                    "userid": params[2],
                    "pos_stamp": info.timeStamp,
                    "w_stamp": 0,
                    "name": params[1]
                };
            } else {
                races[params[1]].userid = params[2];
                races[params[1]].pos_stamp = info.timeStamp;
            }
        } else if (params = info.url.match(/service=GetWeather&latitude=([^&]+)&longitude=([^&]+)/)) {
            for (header in info.requestHeaders) {
                if (info.requestHeaders[header].name === "Origin") {
                    var p = info.requestHeaders[header].value.match(/http:\/\/([^.]+)/);
                }
            }
            if (races[p[1]]) {
                races[p[1]].lat = params[1];
                races[p[1]].lon = params[2];
                races[p[1]].w_stamp = info.timeStamp;
            }
        }
        return;
    },
    // filters
    {
        urls: [
            "http://www.virtualregatta.com/core/Service/ServiceCaller.php?service=GetWeather*",
            "http://*.virtualregatta.com/core/Service/ServiceCaller.php?service=GetPosition*"
            /*
                  "http://vendeeglobe.virtualregatta.com/core/Service/ServiceCaller.php?service=GetPosition*",
                  "http://vg-sprint.virtualregatta.com/core/Service/ServiceCaller.php?service=GetPosition*",
                  "http://downunder.virtualregatta.com/core/Service/ServiceCaller.php?service=GetPosition*"
            */
        ],
        types: ["xmlhttprequest"]
    }, ["requestHeaders"]
);

popup.html:

Code :

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

1
2
3
4
5
6
7
8
9
 
<html>
<head>
    <script src="popup.js"></script>
</head>
<body style="width: 400px">
    <div id="race_info">Please open a race and then switch to 3d view</div>
</body>
</html>

popup.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
 
var info = null;
function new_tab(r, q) {
    chrome.tabs.create({
        url: "http://sail.zezo.org/" + r + "/chart.pl?" + q
    });
}
function add_race_info(race, last_race) {
    info.innerHTML += "<h5>" + race.name + ":</h5><p>";
    console.log("Date.now() " + Date.now() + " race.pos_stamp " + race.pos_stamp);
    if (Date.now() - 300000 > race.pos_stamp) {
        info.innerHTML += "Position data is more than 5 minutes old<br>Please refresh and reopen the 3D view";
    } else if (!race.w_stamp || race.w_stamp < race.pos_stamp) {
        info.innerHTML += "Please open the 3D viewer to get current boat position";
    } else {
        info.innerHTML += "Lat:" + race.lat + " Lon:" + race.lon;
        if (race.name === last_race) {
            new_tab(race.name, 'lat=' + race.lat + '&lon=' + race.lon + '&userid=' + race.userid);
        }
    }
    info.innerHTML += "</div>";
}
function fill_info() {
    info.innerHTML = "";
    var bg = chrome.extension.getBackgroundPage();
    for (i in bg.races) {
        add_race_info(bg.races[i], bg.last_race);
    }
}
document.addEventListener('DOMContentLoaded', function() {
    info = document.getElementById("race_info");
    fill_info();
});

voila le code source de son extension
tu pourras remarquer qu'il construit l'url avec ses valeurs en dur et les paramètres r et q ...
je suis pas un génie mais ca je capte

**rlelamer** · 22/03/2017, 19h09

Envoyé par badaze

A la vue de ce que tu as posté. Je dirais que tu peux automatiser quand tu cliques sur zezo.org.

Bah je veux bien une piste

Apres plusieurs lectures et relectures, il semble que c'est le fichier background.js qui récupère la variable 'r' donc la course et la variable 'p' qui récupère les paramètres lon, lat et userid.

si j'insère ce code dans ma page html, la console me donne une erreur à la fonction :

Code :

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

1
2
3
4
 
chrome.tabs.onActivated.addListener(function(activeInfo) {
    chrome.tabs.get(activeInfo.tabId, function(tab) {
        set_last(tab.url)

Console JS:

Code :

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

1
2
 
Uncaught TypeError: Cannot read property 'onActivated' of undefined

**rlelamer** · 22/03/2017, 23h04

Comme ca se passe sous chrome et que le but final est une extension j'ai peut être une piste ...
il me faut utiliser une des API chrome et le code pourrait ressembler à ça :

Code :

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

1
2
3
4
5
6
7
8
 
function recup() {
chrome.tabs.getSelected(null,function(tab) {
 
    var url = tab.url;
 
 
});}

**badaze** · 23/03/2017, 00h13

Est-ce que c'est à partir de cette page et de ces paramètres que tu récupères les données ?

Nom : 170323-001.JPG
Affichages : 741
Taille : 17,8 Ko

De ce que je comprends, quand tu cliques sur zezo.org ça prend les paramètres de position et ça ouvre la page.

**rlelamer** · 23/03/2017, 00h19

Bonsoir badaze,
Yep c'est ça l'extension zezo.org récupère la course ainsi que longitude, latitude et bateau (userid)
Et c'est le code source de cette page ( sail.zezo.org ) que j'exploite

La fonction exacte pour chrome est chrome.tabs.query() en gros tu peux récupérer l'url de l'onglet actif de la fenêtre active

**rlelamer** · 23/03/2017, 07h53

Je te mets un lien externe ( j'espère que ça sera pas mal vu par la modération ... ) c'est pour montrer la fonction chrome.tabs.query() je pense que c'est vraiment la fonction dont j'ai besoin pour récupérer url complete de l'onglet sail.zezo.org

http://stackoverflow.com/questions/2...sing-requirejs

Si tu passes par là jettes y un oeil et dis moi si je suis dans le vrai, merci

Paramètres URL en JS

JavaScript

Discussions similaires

Partager

Partager