Extraire des valeurs du code source d'une page web

**rlelamer** · 02/04/2017, 12h25

Bonjour,
Dernière ligne droite pour finaliser mon extension Google Chrome

Pour rappel, actuellement:
1 - J'affiche le code source de la page
2 - Je copie celui ci
3 - J'ouvre mon fichier html dans le navigateur
4 - Je copie le code source dans une zone mise en place pour cela
5 - Je clique sur un bouton qui extrait les valeurs et qui les rangent dans un tableau

Voici le code html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
<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 EW = (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 + '°' + EW + ' ' + 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 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>

C'est long et fastidieux ... donc je me suis intéressé à la possibilité de le faire par une extension Google Chrome qui par sa simplicité ( 1 seul clique ) peut effectuée la tache complète.

Voici les différents fichiers qui la compose :

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
 
{
  "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 (Sert à récupérer l'url de l'onglet actif du navigateur soit http://sail.zezo.org/*/chart.pl?lat=*&lon=*&userid=*)

Code :

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

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 (pour l'instant le résultat s'affiche dans une popup mais c'est voué à évoluer, à terme le résultat s'affichera dans un nouvel onglet mais je verrais ça en dernier)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<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>
<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 (Script qui extrait les valeurs de l'url ainsi que du code source de la page web)

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
 
// 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 EW = (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 + '°' + EW + ' ' + 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 :

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

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

Voici ce que m'affiche popup.js quand il est exécuté sur l'url de la page web:
Nom : Capture d’écran 2017-04-02 à 12.07.21.png
Affichages : 755
Taille : 34,8 Ko

On voit qu'il récupère bien l'url, puis les valeurs lon/lat/userid et course inscrites dans l'url et en dernier la conversion des coordonnées lon et lat de décimale à degrées minutes secondes.

Ma question est la suivante:
Je dois modifier cette partie du 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
 
// 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 );
}

pour l'inclure dans popup.js sauf que je n'ai aucune idée de la manière de coder cela...
Je dois pouvoir attribuer la variable course a Course VR du tableau, la variable userid à Bateau du tableau et les variables dms_lon(data['lon']) et dms_lat(data['lat'] à Position du tableau.

Et surtout après je dois extraire les valeurs du code source et là encore je ne sais pas du tout de quelle manière m'y prendre ...

Un coup de main serait le bienvenu car là je nage comme un poisson sur le sable ...

URL VALIDE:
http://sail.zezo.org/clipperton-noum...userid=1577252

**rlelamer** · 02/04/2017, 21h01

Au final ma question se résume a comment lire le code source d'une page pour en extraire des valeurs ?

Extraire des valeurs du code source d'une page web

JavaScript

Discussions similaires

Partager

Partager