Commit a160bfdb authored by Oncela's avatar Oncela

Replace popup.js

parent 4c9187d5
// Étape #4 : affiche à l'écran les informations transmises par tabs.js // Étape #4 : affiche à l'écran les informations transmises par tabs.js
var popup = {} var popup = {}
popup.companies = new Map(); // Liste des entreprises suivies
popup.timer = 0; // Durée d'affichage en seconde (infini si 0)
// Liste des entreprises var titles = []; // Liste des noms d'entreprises listées dans companies.js
popup.companies = []; var colors = []; // Liste des couleurs associées
// Durée d'affichage en seconde (infini si 0)
popup.timer = 6;
// État d'initialisation
popup.ready = false;
/* ==== Réception des messages ==== /*/ /* ==== Réception des messages ==== /*/
// Reçoit un message de tabs.js
browser.runtime.onMessage.addListener( function (message) browser.runtime.onMessage.addListener( function (message)
{ {
// S'il s'agit du message d'initialisation, lance l'initialisation // S'il s'agit du message d'initialisation
if (message.type == "init") if (message.type == "init")
popup.init(message.content); {
// Initialise les informations
popup.initInfo(message.info);
}
// S'il s'agit d'un message de mise à jour, met à jour les informations et l'affichage // S'il s'agit d'un message de mise à jour
if (message.type == "update") if (message.type == "update")
popup.update(message.content); {
// Met à jour les informations sur la requête
popup.updateInfo(message.request);
// Met à jour l'affichage des informations de l'entreprise concernée par la requête
popup.updateDisplay(message.request.index);
}
}); });
/* ==== Initialisation ==== /*/ /* ==== Initialisation des informations ==== /*/
// Dès que le script est lancé, signale à tabs.js qu'il est prêt à s'initialiser // Dès que le script est lancé, signale à tabs.js qu'il est prêt à s'initialiser
browser.runtime.sendMessage("ready"); browser.runtime.sendMessage("ready");
// Réceptionnes les informations d’initialisation envoyée par tabs.js // Réceptionnes les informations d’initialisation envoyée par tabs.js
popup.init = function(info) popup.initInfo = function(info)
{ {
// Initialise les informations pour chaque entreprise // Récupère les noms et couleurs d'entreprises listées dans companies.js
for (var i = 0; i < info.companies.titles.length; i++) titles = info.companies.titles;
{ colors = info.companies.colors;
this.addCompany(info.companies.titles[i], info.companies.colors[i]);
// Pour chaque requête de la liste transmise par tabs.js
for (var request of info.requests)
{
// Met à jour les informations
this.updateInfo(request);
} }
// Met à jour les informations à partir de chacune des requêtes reçues // Met à jour l'affichage des informations de chaque entreprise listée
for (var i = 0; i < info.requests.length; i++) this.companies.forEach( function (object, index) { popup.updateDisplay(index); } );
{
this.update(info.requests[i]);
}
// Indique que l'affichage est prêt à ce mettre à jour
this.ready = true;
// Met à jour l'affichage
for (var i = 0; i < this.companies.length; i++)
this.updateFlag(i);
} }
// Ajoute une entreprise à la liste, en lui attribuant un nom et une couleur // Renvoie un objet destiné à contenir les informations sur une entreprise
popup.addCompany = function (name, color) popup.newCompany = function()
{ {
this.companies.push( var company =
{ {
title: name, // Nom de l'entreprise title: "", // Nom de l'entreprise
color: color, // Couleur du drapeau color: "", // Couleur du drapeau
domains: {content:[], count:[]}, // Nom des domaines d'où viennent les requêtes, et nombre de requêtes associées contents: new Map(), // Liste les ressources proposées par les requêtes
types: {content:[], count:[]}, // Types de ressources proposées par les requêtes, et nombre de requêtes associées requests: "", // Liste des requêtes, en détail
details: "", // Liste des requêtes, en détail flag: 0, // Élément HTML du drapeau
flag: 0, // Élément HTML du drapeau };
});
return company;
} }
/* ==== Mises à jour ==== /*/ /* ==== Mises à jour des informations ==== /*/
// Répartit les mises à jour à faire
popup.update = function (info)
{
// Si l'entreprise concernée par la requête n'en a encore aucune de listée, initialise son drapeau
if (this.companies[info.index].domains.content.length == 0)
this.initFlag(info.index);
// Met à jour les informations à afficher à l'utilisateur
this.updateInfo(info);
// Met à jour la liste détaillée des requêtes
this.updateDetails(info);
// Si le script est initialisé
if (this.ready)
// Met à jour l'affichage
this.updateFlag(info.index);
}
// Met à jour les informations à afficher popup.updateInfo = function (request)
popup.updateInfo = function (info)
{ {
// Pour chaque type d'information à traiter // Si l'entreprise concernée par la requête n'est pas encore listée
var lists = ["domains", "types"]; if (this.companies.has(request.index) == false)
var units = ["domain", "type" ];
for (var i = 0; i < 2; i++)
{ {
// La liste à modifier // Ajoute l'entreprise à la liste de celles listées
var list = this.companies[info.index][lists[i]]; this.companies.set(request.index, this.newCompany());
// 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];
// L'information à ajouter // Affiche son drapeau
var unit = info[units[i]]; this.createFlag(request.index);
}
// Si cette information n'a jamais été listée // L'entreprise concernée par la mise à jour
if (list.content.indexOf(unit) == -1) var company = this.companies.get(request.index);
// Mise à jour des ressources listées
// Si la ressource n'est pas encore listée
if (company.contents.has(request.content) == false)
{ {
// L'ajoute à la liste et créé son compteur à 1 // L'ajoute à la liste et créé son compteur à 1
list.content.push(unit); company.contents.set(request.content, 1);
list.count.push(1);
} }
// Si cette information est déjà listée, incrémente son compteur // Si la ressource est déjà listée
else else
{ {
list.count[list.content.indexOf(unit)] ++; // Incrémente son compteur
company.contents.set(request.content, company.contents.get(request.content) +1);
} }
}
} // Mise à jours de la chaîne de caractère détaillant les requêtes
// Met à jours le détail des requêtes
popup.updateDetails = function (info)
{
// Convertit la date // Convertit la date
var date = new Date(info.date).toLocaleString(); var date = new Date(request.date).toLocaleString();
// Raccourci l'url // Raccourci l'url
var url = info.url; var url = request.url.length < 100 ? request.url : request.url.substr(0,100) + " [&hellip;]";
if (url.length > 150) url = url.substr(0,150) + " [&hellip;]";
// Ajoute une ligne de texte // Ajoute une ligne de texte
this.companies[info.index].details += "<u>" + date +"</u> <b>" + info.type + "</b> <i>" + url + "</i><br>"; company.requests += "<u>" + date +"</u> <b>" + request.content + "</b> <i>" + url + "</i><br>";
} }
/* ==== Initialisation de l'affichage ==== /*/ /* ==== Initialisation de l'affichage ==== /*/
// Prépare un drapeau // Créé un drapeau
popup.initFlag = function(index) popup.createFlag = function(index)
{ {
this.newFlag(index); // L'entreprise représentée par le drapeau
var company = this.companies.get(index);
// Créé l'élément HTML
var div = document.createElement("div");
div.innerHTML = "<b>" + company.title +" sait</b> que tu es <br> en train de visiter ce site";
div.className = "flag";
div.style.backgroundColor = company.color;
div.style.top = 60 + 80 * index + "px";
document.body.appendChild(div);
company.flag = div;
// Créer un sous-élément HTML (qui liste les info)
var info = document.createElement("div");
info.className = "bubble";
info.style.backgroundColor = company.color;
company.flag.appendChild(info);
company.flag.info = info;
// Si la page a le focus
if (!document.hidden) if (!document.hidden)
{ {
// Lance le drapeau
this.launchFlag(index); this.launchFlag(index);
} }
// Si la page n'a pas le focus
else 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.launchFlag(index);});
} }
} }
// Créé un drapeau // Lance un drapeau
popup.newFlag = function(index)
{
// Créé l'élément HTML
var div = document.createElement("div");
div.innerHTML = "<b>" + this.companies[index].title +" sait</b> que tu es <br> en train de visiter ce site";
div.className = "flag";
div.style.backgroundColor = this.companies[index].color;
div.style.top = 60 + 80 * index + "px";
// Créer un sous-élément HTML (l’infobulle)
div.bubble = document.createElement("div");
div.bubble.className = "bubble";
div.bubble.style.backgroundColor = this.companies[index].color;
div.appendChild(div.bubble);
document.body.appendChild(div);
this.companies[index].flag = div;
}
// Affiche un drapeau
popup.launchFlag = function(index) popup.launchFlag = function(index)
{ {
// Attend 10ms pour afficher le drapeau
setTimeout setTimeout
( (
function(div){div.className += " show";}, function(div){div.className += " show";},
10, 10,
this.companies[index].flag this.companies.get(index).flag
); );
// Attend la durée indiquée par popup.timer pour fermer le drapeau
if (this.timer) if (this.timer)
{ {
setTimeout setTimeout
( (
function(div){div.className = "flag";}, function(div){div.className = "flag";},
1000 * this.timer, 1000 * this.timer,
this.companies[index].flag this.companies.get(index).flag
); );
} }
} }
/* ==== Mise à jour de l'affichage ==== /*/ /* ==== Mise à jour de l'affichage ==== /*/
popup.updateFlag = function(index) popup.updateDisplay = function(index)
{ {
var company = this.companies[index]; var company = this.companies.get(index);
// Début du texte // Nom de domaine de la page visitée
var text = "<b>" + company.title + "</b> t'a envoyé :"; var url = window.location.href;
url = url.substr(url.indexOf("://")+3);
url = url.substr(0, url.indexOf("/"));
if (url.indexOf("www.") != -1)
url = url.substr(url.indexOf("www.")+4);
// Liste des ressources demandées var text = "Le site <b>" + url + "</b> a demandé à " + company.title + " de t'envoyer :<br>";
for (var i = 0; i < company.types.content.length; i++)
{
var type = company.types.content[i];
var count = company.types.count[i];
var plural = company.types.count[i] > 1 ? "s" : "";
text += "<br>- <b>" + count + "</b> " + type + plural;
}
text += "<br><br>à partir des adresses suivantes :";
// Liste des noms de domaines émetteurs des ressources // Liste des ressources demandées
for (var i = 0; i < company.domains.content.length; i++) company.contents.forEach( function (number, type) { text += "<br>- <b>" + number + "</b> " + type + (number > 1 ? "s" : ""); } );
{
var domain = company.domains.content[i];
var count = company.domains.count[i];
var plural = company.domains.count[i] > 1 ? "s" : "";
text += "<br>- " + domain;
// text += " (" + count + " transfert" + plural + ")";
}
// Détails des requêtes // Détails des requêtes
text += "<br><br><u class='details_button'>Détails&hellip;</u><div class='details'>" + company.details + "</div>"; text += "<br><u class='details_button'>Détails&hellip;</u><div class='details'>" + company.requests + "</div>";
// URL de la page visitée
var url = window.location.href;
url = url.substring(url.indexOf("://")+3, url.length-1);
if (url.indexOf("www.") != -1)
url = url.substr(url.indexOf("www.")+4);
if (url.length > 50)
url = url.substr(0,50) + "&hellip;";
text += "<br><br>Cela a notamment permis à " + company.title + " de connaître ton <b>adresse IP</b> et l'<b>adresse de la page</b> que tu visites : <code>"+url+"</code><br>"; 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.";
// text += "<br>Ceci place ta vie privée en grave danger.<br>" company.flag.info.innerHTML = text;
// text += "<br>Le site que tu consultes est <b>responsable</b> de cette situation : c'est lui qui a permis à " + company.title + " d'obtenir ces informations.<br>";
// text += "<br>Ceci est <b>strictement interdit</b>, à moins que tu n'aies préalablement donné ton <b>consentement explicite</b> à ce que " + company.title + " puisse obtenir ces informations (en cliquant sur un bouton « j'accepte de pouvoir être surveillé par " + company.title + " sur le présent site », par exemple, ou en recherchant activement à interagir avec un contenu fourni par " + company.title + " - une vidéo, un bouton de réseau social, etc.). <br>";
// text += "<br><a href='https://gafam.info'>Clic ici</a> pour découvrir comment te défendre";
company.flag.bubble.innerHTML = text;
} }
/* ==== */ /* ==== */
retrunedValue = true; returnedValue = true;
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