Paramètres URL en JS

**badaze** · 24/03/2017, 00h48

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.

Nom : 170323-002.JPG
Affichages : 243
Taille : 19,8 Ko

Nom : 170323-002.JPG
Affichages : 243
Taille : 19,8 Ko

__________________________________________________________________
Nom : 170323-003.JPG
Affichages : 238
Taille : 226,9 Ko

__________________________________________________________________

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
 
<!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 php :

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
 
 
<?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 php :

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
 
<?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;
?>

**rlelamer** · 25/03/2017, 01h25

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 :

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

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 ?

**badaze** · 25/03/2017, 02h07

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.

**rlelamer** · 27/03/2017, 09h40

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 :

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

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);

Nom : Capture d’écran 2017-03-27 à 08.35.10.png
Affichages : 200
Taille : 20,3 Ko

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 :

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

1
2
 
chrome.runtime.getBackgroundPage()

ou le couple :

Code :

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

1
2
3
 
chrome.runtime.sendMessage // background.js
chrome.runtime.onMessage // popup.js

... je creuse l'histoire

**rlelamer** · 29/03/2017, 00h28

Bon ça avance encore un peu plus

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:

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:

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

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

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

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

Nom : Capture d’écran 2017-03-28 à 23.27.37.png
Affichages : 251
Taille : 45,9 Ko

Paramètres URL en JS

JavaScript

Discussions similaires

Partager

Partager