Param�tres URL en JS

Version imprimable

Voir 40 message(s) de cette discussion en une page

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

Voir 40 message(s) de cette discussion en une page