Paramètres URL en JS

Version imprimable

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

Code:

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:

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:

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:

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.

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

Code:

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:

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:

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

20/03/2017, 17h16
rlelamer

Merci NoSmoking,

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

Code:

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:

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

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

Code:

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:

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 :?
20/03/2017, 18h31
badaze

Pour afficher les 3 valeurs.

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

Éventuellement essaie alert(data);

Citation:

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:

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

Je reviens sur

Citation:

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:

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>

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 8O

voila le code :
Code:

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>

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

Pour la course, essaie ceci.

Code:

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>

20/03/2017, 23h09
rlelamer

1 pièce(s) jointe(s)
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:

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 ...:(

Pièce jointe 256131
20/03/2017, 23h14
badaze

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

3 pièce(s) jointe(s)

Actuellement je me sers pas de l'url ...
J'affiche le code source de la page comme ceci :
Pièce jointe 256146
Puis je sélectionne tous le code source avec cmd+A puis je copie avec cmd+c
J'ouvre mon fichier Route zezo.html
Pièce jointe 256151
Je copie le code source dans l'encart en haut à gauche avec cmd+v
Et je clique sur le bouton 'Extraire Route Zezo'
Pièce jointe 256155

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

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

20/03/2017, 23h49
badaze

Comment fais-tu pour obtenir l'url suivante : http://sail.zezo.org/clipperton-noum...userid=1577252
21/03/2017, 00h05
rlelamer

3 pièce(s) jointe(s)

J'vais détailler :
sur Virtual Regatta:
Pièce jointe 256193

Je clique sur 3D en bas à droite

Cette page s'ouvre:
Pièce jointe 256196

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

Cette page s'ouvre:
Pièce jointe 256201

Et l'url est dans la barre d'adresse
21/03/2017, 00h19
badaze

Bien.

A la vue de ce que tu as posté. Je dirais que tu peux automatiser quand tu cliques sur zezo.org. Non ?
21/03/2017, 07h19
rlelamer

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

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

voila l'extension zezo decompilée:

Manifest.json:

Code:

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:

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:

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:

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

22/03/2017, 19h09
rlelamer
Citation:

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:

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

1 2 Uncaught TypeError: Cannot read property 'onActivated' of undefined
:(
22/03/2017, 23h04
rlelamer
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:

1 2 3 4 5 6 7 8 function recup() { chrome.tabs.getSelected(null,function(tab) { var url = tab.url; });}
23/03/2017, 00h13
badaze

1 pièce(s) jointe(s)

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

Pièce jointe 256803

De ce que je comprends, quand tu cliques sur zezo.org ça prend les paramètres de position et ça ouvre la page.
23/03/2017, 00h19
rlelamer

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
23/03/2017, 07h53
rlelamer

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

2 pièce(s) jointe(s)

J'ai regardé les extensions chrome. Je ne connaissais pas. Je pense avoir compris le système sauf s'il est possible d'utiliser une extension dans une autre page html et comment les debugger. Ca sera mon défi des prochaines semaines... si j'ai assez de courage.

Néanmoins j'ai essayé à partir d'Ajax et de php en utilisant CURL et ma fois ça fonctionne pas trop mal.

Pièce jointe 257145
__________________________________________________________________
Pièce jointe 257152
__________________________________________________________________

Code:

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
 
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script language="JavaScript" type="text/javascript">
<!--
 
function titi() {
   var res    = Math.random();
   var lon    = document.getElementById('lon').value;
   var lat    = document.getElementById('lat').value;
   var userid = document.getElementById('userid').value; 
   var param  = '&lon='+lon+'&lat='+lat+'&userid='+userid+'&r='+res;
   $.ajax({
             url  : 'test9187b.php',
             type : 'GET',
             data : param, 
    dataType : 'html'
   }).done(function(html) {$('#resultat').html(html)}) ;
}
//-->
</script>
<meta http-equiv="pragma" content="no-cache" />
</head>
<body>
<table summary="">
<tr>
<td>Lon : </td><td><input type="text" id="lon" /></td>
</tr>
<tr>
<td>Lat : </td><td><input type="text" id="lat" /></td>
</tr>
<tr>
<td>User: </td><td><input type="text" id="userid" /></td>
</tr>
</table>
<input type="button" value="Clique" onclick="titi();"/>
<div id="resultat">
</div>
</body>
</html>

test9187b.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
<?php
// éventuellement mettre la course en paramètre <= clipperton-noumea
$lat    = $_GET['lat'];
$lon    = $_GET['lon'];
$userid = $_GET['userid'];
 
$ch = curl_init("<a href="http://sail.zezo.org/clipperton-noumea/chart.pl?lat=$lat&lon=$lon&userid=$userid" target="_blank">http://sail.zezo.org/clipperton-noum...userid=$userid</a>");
$fp = fopen("resultat_course.txt", "w");
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);
$string = file_get_contents("resultat_course.txt");
unlink("resultat_course.txt");
include("test9187c.php");

test9187c.php

Code:

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
 
<?php
 //$string = file_get_contents('test9104b.html');
 $pattrn = "/updi\(event\,\'(.*)'\)/m";
 preg_match_all($pattrn,$string,$array);
 
 $arrResultat = array();
 
 foreach($array[1] as $value) {
   $str2   = str_replace("<br>Distances:&nbsp;"     ,"|",$value);
   $str2   = str_replace("<br><b>Wind:</b>"         ,"|",$str2);
   $str2   = str_replace("(<b>TWA"                  ,"|",$str2);
   $str2   = str_replace("</b>)<br><b>Heading:</b>" ,"|",$str2); 
   $str2   = str_replace("<b>Sail:</b>"             ,"|",$str2); 
   $str2   = str_replace("<br><b>Boat Speed:</b>"   ,"|",$str2); 
   $str2   = str_replace("','"                      ,"|",$str2); 
 
   $arrResultat[] = $str2;
 }
 ob_start();?>
 <table border="1">
      <tr>
          <td>Date et heure</td><td>Distances</td><td>Wind</td><td>TWA</td><td>Heading</td><td>Sail</td><td>Boat Speed</td>
      </tr><?php
  foreach($arrResultat as $value) {
   $arrInfo = explode('|',$value);
   $TWA     = (int) $arrInfo[3];
   $color   = $TWA >= 0 ? 'green' : 'red';?>
   <tr>
    <td><?php print $arrInfo[0];?></td>
    <td><?php print $arrInfo[1];?></td>
    <td><?php print $arrInfo[2];?></td>
    <td style="color:<?php print $color;?>"><?php print abs($TWA);?></td>
    <td><?php print $arrInfo[4];?></td>
    <td><?php print $arrInfo[5];?></td>
    <td><?php print $arrInfo[6];?></td>
 
   </tr><?php
  }?>
 </table><?php
 $tableau = ob_get_contents();
    ob_end_clean();
 print $tableau;
?>

25/03/2017, 00h25
rlelamer
Citation:

Envoyé par badaze

Je pense avoir compris le système sauf s'il est possible d'utiliser une extension dans une autre page html et comment les debugger.

Heu là, tu m'as perdu ... Je comprends pas trop ce que tu veux dire :?

J'ai pas encore eu le temps de mettre en oeuvre ce code :
Code:

1 2 3 4 5 6 7 8 chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) { var url = tabs[0].url; console.log(tabURL); });
Je ne connais pas l'Ajax ... j'vais voir de quoi il en retourne
Mais je pense que c'est la solution et ce script doit être nommé background.js

PS: Ok vu pour l'Ajax mais si je suis bien tu construis la variable param en fonction des données présentes dans le fichier php, c'est bien ça ? Donc tu récupères pas l'URL de l'onglet
En revanche en php tu récupères l'Url et après tu le fichier txt en local , j'ai bien tout compris ou j'ai tout faux ?
25/03/2017, 01h07
badaze

Quand je regarde les images que tu as postées, je vois que les paramètres passés à zezo.org correspondent à la longitude et à la latitude qu'on voit sur l'image qui a le bateau. J'en déduis que l'extension est capable de lire ces données.
Or pour le moment je n'ai pas vraiment cherché comment faire cela.

1 pièce(s) jointe(s)

Bonjour,
Bon ça avance c'est cool ;)

J'ai commencé à créer l'extension google chrome et ce code fonctionne pour récupérer l'URL
Code:

1 2 3 4 5 6 7 8 9 // Récupérer l'url de l'onglet actif sail.zezo.org chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) { var tabURL = tabs[0].url; }); console.log(tabURL);
Pièce jointe 257979

Comment lier la variable tabURL de background.js à la variable url que j'exploite dans popup.js, la je pige pas :?

Edit: je me réponds tout seul, ça se passe encore avec une API chrome:
Code:

1 2 chrome.runtime.getBackgroundPage()
ou le couple :
Code:

1 2 3 chrome.runtime.sendMessage // background.js chrome.runtime.onMessage // popup.js
... je creuse l'histoire

1 pièce(s) jointe(s)

Bon ça avance encore un peu plus :D

manifest.json:

Code:

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
 
{
  "manifest_version": 2,
 
  "name": "Route zezo.org",
  "version": "1.0",
  "description": "Extraire la route proposée",
  "permissions": [
    "http://sail.zezo.org/*",
    "tabs"
  ],
  "content_scripts": [
    {
     "matches": ["http://sail.zezo.org/*"],
     "js": ["content.js"],
     "run_at": "document_end"
  }],
  "icons": { 	
		"16": "icon-16.png",
        "48": "icon-48.png",
        "128": "icon-128.png"
  },    
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "background": { 
		"scripts": ["background.js"]
  }
}

background.js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// Récupérer l'url de l'onglet actif sail.zezo.org
var tabURL = ""; 
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
 
   chrome.tabs.query({active: true, currentWindow: true}, 
     function(arrayOfTabs) {
       var activeTab = arrayOfTabs[0];
       tabURL = activeTab.url;
 
     });
  }
);

popup.html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<html>
<head>
    <meta charset="UTF-8">
    <script src="popup.js"></script>
</head>
<body background="bgimg.jpg">
<h1 align="center" style="color:white"> Route zezo.org </h1>
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>

popup.js:

Code:

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
 
// Récupérer l'url de l'onglet actif sail.zezo.org
window.onload=function(){
chrome.runtime.getBackgroundPage(function(backgroundPage){ 
var url = backgroundPage.tabURL;
 
 
 
// 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 data = getParam(url);
 
 
 
// Récupérer Nom de la course     
function getCourse(url) {
var reg    = new RegExp("(.+)\/\/(.+)\/(.+)\/","gi");
var result  = reg.exec(url);
    return result[3];
}
 
var course = getCourse(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 +'"'; 
}
 
 
 
console.log(url);
console.log(data);
console.log(course);
console.log(dms_lon(data['lon']));
console.log(dms_lat(data['lat']));
});
};

content.js:

Code:

1
2
 
chrome.runtime.sendMessage("send");

Pièce jointe 258737