2 pièce(s) jointe(s)
Modification extension Google Chrome et ajout de valeurs
Bonjour,
J'ai une extension google chrome fonctionnelle mais j'aimerais optimiser l'affichage des données existantes et en ajouter de nouvelles.
Ce sujet fait suite a de nombreux sujet déjà postés ici mais cette fois ci l'écriture du script est de meilleure facture.
Cette extension sert à extraire la route à suivre du site sail.zezo.org ( routeur web pour les régatiers virtuels de Virtual Regatta )
Voici les fichiers qui la compose :
- manifest.json :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| {
"manifest_version": 2,
"name": "Route zezo.org",
"description": "Extract route",
"version": "0.1",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": ["activeTab"],
"content_scripts": [
{
"matches": ["http://sail.zezo.org/*/chart.pl*"],
"js": ["myscript.js"]
}
],
"background": {
"scripts": ["eventPage.js"],
"persistent": false
}
} |
- eventPage.js :
Code:
1
2
3
4
5
| var points;
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
points = request;
}); |
- myscript.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
| "use strict";
const pattern = /updi\(event,'(.*)<br>Distances:(.*)<br><b>Wind:<\/b>(.*)\(<b>TWA(.*)<\/b>\)<br><b>Heading:<\/b>(.*)<b>Sail:<\/b>(.*)<br><b>Boat Speed:<\/b>(.*)'/g;
const points = [];
try {
Array.prototype.slice.call(document.getElementsByTagName("img")).forEach(function (element) {
var event = element.getAttribute('onmouseover');
if (event !== null) {
var match = pattern.exec(event);
const datetime = match[1];
const distance = match[2];
const wind = match[3];
const twa = match[4];
const btw = match[5];
const sail = match[6];
const stw = match[7];
points.push({
datetime: datetime,
distance: distance,
wind: wind,
twa: twa,
btw: btw,
sail: sail,
stw: stw
});
pattern.lastIndex = 0;
}
});
chrome.runtime.sendMessage(points);
} catch (e){
chrome.runtime.sendMessage([]);
} |
- 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
| var background = chrome.extension.getBackgroundPage();
function createCell(value, row) {
var cell = document.createElement("td");
cell.innerHTML = value;
row.appendChild(cell);
}
function createCellTwa(value, row) {
var cell = document.createElement("td");
var rep = value.replace('\u00B0','');
if(rep >= 0){
cell.style.color = "green";
} else {
cell.style.color = "red";
}
cell.innerHTML = Math.abs(rep)+'\u00B0';
row.appendChild(cell);
}
function createCellBtw(value, row) {
var cell = document.createElement("td");
cell.style.color = "blue";
cell.innerHTML = value;
row.appendChild(cell);
}
document.getElementById("pointsTable").innerHTML = "";
background.points.forEach(function (element) {
var row = document.createElement("tr");
document.getElementById("pointsTable").appendChild(row);
createCell(element.datetime, row);
createCell(element.distance, row);
createCell(element.wind, row);
createCellTwa(element.twa, row);
createCellBtw(element.btw, row);
createCell(element.sail, row);
createCell(element.stw, row);
console.log(element);
}); |
- popup.html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!doctype html>
<html>
<body>
<table border="1" align="center">
<thead>
<tr>
<th>Date et heure</th>
<th>Distances</th>
<th>Wind</th>
<th>TWA</th>
<th>BTW</th>
<th>Sail</th>
<th>STW</th>
</tr>
</thead>
<tbody id ="pointsTable">
</tbody>
</table>
</body>
<script src="popup.js"></script>
</html> |
Ce qui donne :
Pièce jointe 296645
Je souhaite modifier la Regex du fichier myscript.js ( ligne 3 ) pour mieux séparer les valeurs extraites et ainsi remodeler le tableau.
J'ai donc modifié les fichiers myscript.js / popup.js et popup.html
- myscript.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
| "use strict";
const pattern = REGEX;
const points = [];
try {
Array.prototype.slice.call(document.getElementsByTagName("img")).forEach(function (element) {
var event = element.getAttribute('onmouseover');
if (event !== null) {
var match = pattern.exec(event);
// Avec comme exemple les valeurs de la 1ère ligne du tableau
const date = match[1]; //2017-07-23
const time = match[2]; // 20:20
const ttw = match[4]; // T+0:00
const dtw = match[5]; // 0.0 nm
const twd = match[7]; // 72°
const tws = match[8]; // 8.8 kts
const twa = match[9]; // 45°
const btw = match[10]; // 120°
const sail = match[11]; // Jib
const stw = match[12]; // 12.50 kts
points.push({
date: date,
time: time,
ttw: ttw,
dtw: dtw,
twd: twd,
tws: tws,
twa: twa,
btw: btw,
sail: sail,
stw: stw
});
pattern.lastIndex = 0;
}
});
chrome.runtime.sendMessage(points);
} catch (e){
chrome.runtime.sendMessage([]);
} |
- 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
| var background = chrome.extension.getBackgroundPage();
function createCell(value, row) {
var cell = document.createElement("td");
cell.innerHTML = value;
row.appendChild(cell);
}
function createCellTwa(value, row) {
var cell = document.createElement("td");
var rep = value.replace('\u00B0','');
if(rep >= 0){
cell.style.color = "green";
} else {
cell.style.color = "red";
}
cell.innerHTML = Math.abs(rep);
row.appendChild(cell);
}
document.getElementById("pointsTable").innerHTML = "";
background.points.forEach(function (element) {
var row = document.createElement("tr");
document.getElementById("pointsTable").appendChild(row);
createCell(element.date, row);
createCell(element.time, row);
createCell(element.ttw, row);
createCell(element.dtw, row);
createCell(element.twd, row);
createCell(element.tws, row);
createCellTwa(element.twa, row);
createCell(element.btw, row);
createCell(element.sail, row);
createCell(element.stw, row);
console.log(element);
}); |
- popup.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
| <!doctype html>
<html>
<body>
<table border="1" align="center">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>TTW</th>
<th>DTW</th>
<th>TWD</th>
<th>TWS</th>
<th>TWA</th>
<th>BTW</th>
<th>Sail</th>
<th>STW</th>
</tr>
</thead>
<tbody id="pointsTable">
</tbody>
</table>
</body>
<script src="popup.js"></script>
</html> |
Ce qui donne :
Pièce jointe 296653
Je galère pour la REGEX j'ai essayé plein de chose mais ça se solde systématiquement par un échec ... :weird:
REGEX testées :
Code:
/updi\(event\,\'([0-9]{4}-[0-9]{2}-[0-9]{2}) ([0-9]{2}:[0-9]{2}) (.*?) \((.*?)\)<br>Distances: (.*?)\/(.*?)<br><b>Wind:<\/b>(.*?)\;(.*?)\(<b>TWA(.*?)<\/b>\)<br><b>Heading:<\/b>(.*?)\;<b>Sail:<\/b>(.*?)<br><b>Boat Speed:<\/b>(.*?)'/g;
Code:
/updi\(event\,\'(.*?)[ ](.*?)[ ](.*?)[ ]\((.*?)\)<br>Distances: (.*?)\/(.*)<br><b>Wind:<\/b>(.*?)\;(.*?)\(<b>TWA(.*?);<\/b>\)<br><b>Heading:<\/b>(.*?)<b>Sail:<\/b>(.*?)<br><b>Boat Speed:<\/b>(.*?)\'\,\'(.*?)\'\)/g;
Et bien d'autres encore ... mais pas une fois j'ai écris la bonne ...:(
Dernière chose, j'aimerais bien que la popup s'auto-adapte à la largeur du tableau, de ce faite ça serait plus lisible.
Je suis preneur de toutes les pistes pour régler ces 2 soucis
Merci
