Commit 41a37073 authored by Oncela's avatar Oncela

affiche la liste des requêtes en fonction du type de ressource qu'ellent proposent

parent cd74114a
// Étape #4 : affiche à l'écran les informations transmises par tabs.js
var popup = {}
popup.companies = new Map(); // Liste des entreprises suivies
popup.timer = 0; // Durée d'affichage en seconde (infini si 0)
var popup = {}
popup.companies = new Map(); // Liste des entreprises suivies
popup.timer = 6; // Durée d'affichage en seconde (infini si 0)
var titles = []; // Liste des noms d'entreprises listées dans companies.js
var colors = []; // Liste des couleurs associées
var titles = []; // Liste des noms d'entreprises listées dans companies.js
var colors = []; // Liste des couleurs associées
console.log("= START =");
/* ==== Réception des messages envoyés par tabs.js ==== /*/
/* ==== Réception des messages ==== /*/
browser.runtime.onMessage.addListener( function (message)
{
// S'il s'agit du message d'initialisation
......@@ -28,6 +31,7 @@ browser.runtime.onMessage.addListener( function (message)
}
});
/* ==== Initialisation des informations ==== /*/
// Dès que le script est lancé, signale à tabs.js qu'il est prêt à s'initialiser
......@@ -48,22 +52,7 @@ popup.initInfo = function(info)
}
// Met à jour l'affichage des informations de chaque entreprise listée
this.companies.forEach( function (object, index) { popup.updateDisplay(index); } );
}
// Renvoie un objet destiné à contenir les informations sur une entreprise
popup.newCompany = function()
{
var company =
{
title: "", // Nom de l'entreprise
color: "", // Couleur du drapeau
contents: new Map(), // Liste les ressources proposées par les requêtes
requests: "", // Liste des requêtes, en détail
flag: 0, // Élément HTML du drapeau
};
return company;
this.companies.forEach( function (object, index) { popup.updateDisplay (index); } );
}
/* ==== Mises à jour des informations ==== /*/
......@@ -73,70 +62,106 @@ popup.updateInfo = function (request)
// Si l'entreprise concernée par la requête n'est pas encore listée
if (this.companies.has(request.index) == false)
{
console.log(request.index);
console.log(this.companies);
// Ajoute l'entreprise à la liste de celles listées
this.companies.set(request.index, this.newCompany());
this.companies.set(request.index,
{
title: titles[request.index], // Nom de l'entreprise
color: colors[request.index], // Couleur de l'entreprise
contents: new Map() // Liste des ressources proposées par ses requêtes
});
// Donne à l'entreprise son nom et sa couleur
this.companies.get(request.index).title = titles[request.index];
this.companies.get(request.index).color = colors[request.index];
console.log(this.companies);
console.log("===");
// Affiche son drapeau
this.createFlag(request.index);
// Initialise l'affichage des informations
this.initDisplay(request.index);
}
// L'entreprise concernée par la mise à jour
var company = this.companies.get(request.index);
// Mise à jour des informations concernant les ressources proposées par les requêtes de l'entreprise
var contents = this.companies.get(request.index).contents;
// Mise à jour des ressources listées
// Si la ressource n'est pas encore listée
if (company.contents.has(request.content) == false)
if (contents.has(request.content) == false)
{
// L'ajoute à la liste et créé son compteur à 1
company.contents.set(request.content, 1);
// Initialise les informations à ajouter
var newContent =
{
type : request.content, // Type de ressource
number : 1, // Nombre de fois où elle a été proposée
}
// Date de la requête
var date = new Date(request.date).toLocaleString();
date = date.substr(0, date.length -3);
// Début du texte à afficher à propos de chaque type de ressource
newContent.text = "Requêtes de type <" + request.content + "> envoyées le " + date + " ";
newContent.text += "depuis la page <u>" + window.location.href + "</u>&nbsp;:";
newContent.text += "<ol>";
// Première entrée
newContent.text += this.printRequestURL(request.url);
// Ajoute les informations
contents.set(request.content, newContent);
}
// Si la ressource est déjà listée
else
{
// Incrémente son compteur
company.contents.set(request.content, company.contents.get(request.content) +1);
contents.get(request.content).number ++;
// Ajoute une nouvelle ligne de texte
contents.get(request.content).text += this.printRequestURL(request.url);
}
// Mise à jours de la chaîne de caractère détaillant les requêtes
}
// Convertit la date
var date = new Date(request.date).toLocaleString();
// Renvoie une chaîne de caractère contenant l'URL d'une requête
popup.printRequestURL = function (url)
{
// Nombre maximum de caractère à afficher
var limit = 100;
var url = url.length < limit ? url : url.substr(0, limit) + " [&hellip;]";
// Met en valeurs le nom de domaine
// Raccourci l'url
var url = request.url.length < 100 ? request.url : request.url.substr(0,100) + " [&hellip;]";
var url1 = url.substr(0, url.indexOf("://")+3); // avant http://
var url5 = url.substr(url.indexOf("://")+3); // après http://
var url2 = url5.substring(0, url5.indexOf("/")); // entre http:// et le premier /
var url4 = url2.substr(url2.lastIndexOf(".")); // entre le dernier . précédant le premier / et le premier /
url2 = url2.substring(0, url2.lastIndexOf(".")); // entre http:// et le dernier point avant le premier /
var url3 = url2.substr(url2.lastIndexOf(".")); // entre l'avant dernier point . précédant le premier / et le dernier point . précédant le premier /
url3 = url3.substr(1);
url2 = url2.substring(0, url2.lastIndexOf(".")); // entre http:// et l'avant dernier point précédant le premier /
url5 = url5.substr(url5.indexOf("/")); // après le premier /
// Ajoute une ligne de texte
company.requests += "<u>" + date +"</u> <b>" + request.content + "</b> <i>" + url + "</i><br>";
return "<li>" + url1 + url2 + ".<b><u>" + url3 + url4 + "</u></b>" + url5 + "</li>";
}
/* ==== Initialisation de l'affichage ==== /*/
// Créé un drapeau
popup.createFlag = function(index)
popup.initDisplay = function(index)
{
// L'entreprise représentée par le drapeau
// L'entreprise concernée
var company = this.companies.get(index);
// Créé l'élément HTML
// Créé un élément HTML (le drapeau)
var div = document.createElement("div");
div.innerHTML = "<b>" + company.title +" sait</b> que tu es <br> en train de visiter ce site";
div.innerHTML = "<b>" + company.title +" sait</b><br> que tu visites ce site";
div.className = "flag";
div.style.backgroundColor = company.color;
div.style.top = 60 + 80 * index + "px";
div.style.top = 60 + 80 * (this.companies.size -1) + "px";
document.body.appendChild(div);
company.flag = div;
// Créer un sous-élément HTML (qui liste les info)
// Créer un sous-élément HTML (qui affiche les info)
var info = document.createElement("div");
info.className = "bubble";
info.style.backgroundColor = company.color;
company.flag.appendChild(info);
company.flag.info = info;
......@@ -144,20 +169,21 @@ popup.createFlag = function(index)
// Si la page a le focus
if (!document.hidden)
{
// Lance le drapeau
this.launchFlag(index);
// Lance l'affichage
this.startDisplay(index);
}
// Si la page n'a pas le focus
else
{
// Appelle le lancement de drapeau dès qu'elle prend le focus
document.addEventListener('visibilitychange', function(e) {if (!document.hidden) popup.launchFlag(index);});
document.addEventListener('visibilitychange', function(e) {if (!document.hidden) popup.startDisplay(index);});
}
}
// Lance un drapeau
popup.launchFlag = function(index)
/* ==== Timing de l'affichage ==== /*/
popup.startDisplay = function(index)
{
// Attend 10ms pour afficher le drapeau
setTimeout
......@@ -172,17 +198,23 @@ popup.launchFlag = function(index)
{
setTimeout
(
function(div){div.className = "flag";},
function(div){div.className += " fold";},
1000 * this.timer,
this.companies.get(index).flag
);
}
}
/* ==== Mise à jour de l'affichage ==== /*/
popup.updateDisplay = function(index)
{
// Texte à afficher
var text = "";
// Entreprise concernée
var company = this.companies.get(index);
// Nom de domaine de la page visitée
......@@ -192,16 +224,19 @@ popup.updateDisplay = function(index)
if (url.indexOf("www.") != -1)
url = url.substr(url.indexOf("www.")+4);
var text = "Le site <b>" + url + "</b> a demandé à " + company.title + " de t'envoyer :<br>";
text += "Le site <b>" + url + "</b> a demandé à <b>" + company.title + "</b> de t'envoyer&nbsp;:<ul>";
// Liste des ressources demandées
company.contents.forEach( function (number, type) { text += "<br>- <b>" + number + "</b> " + type + (number > 1 ? "s" : ""); } );
company.contents.forEach( function (content)
{
text += "<li class='details_button'><b>" + content.number + "</b> <u>" + content.type + (content.number > 1 ? "s" : "") + "</u></li>";
text += "<div class='details'>" + content.text + "</div>";
});
// Détails des requêtes
text += "<br><u class='details_button'>Détails&hellip;</u><div class='details'>" + company.requests + "</div>";
text += "<br><br>Cela lui a permis de connaître ton <b>adresse IP</b> et l'adresse de la <b>page</b> que tu visites.";
// Fin du message
text += "</ul>Cela a permis à " + company.title + "de connaître ton <b>adresse IP</b> et l'adresse de la <b>page</b> que tu visites.";
// Intègre le message dans le drapeau
company.flag.info.innerHTML = text;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment