Skip to content
GitLab
Commit a160bfdb authored by Oncela's avatar Oncela
Browse files

Replace popup.js

parent 4c9187d5
Hide whitespace changes
Inline Side-by-side
popup.js
View file @ a160bfdb
// É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
popup.companies = [];
// Durée d'affichage en seconde (infini si 0)
popup.timer = 6;
// État d'initialisation
popup.ready = false;
var titles = []; // Liste des noms d'entreprises listées dans companies.js
var colors = []; // Liste des couleurs associées
/* ==== Réception des messages ==== /*/
// Reçoit un message de tabs.js
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")
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")
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
browser.runtime.sendMessage("ready");
// 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
for (var i = 0; i < info.companies.titles.length; i++)
{
this.addCompany(info.companies.titles[i], info.companies.colors[i]);
// Récupère les noms et couleurs d'entreprises listées dans companies.js
titles = info.companies.titles;
colors = info.companies.colors;
// 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
for (var i = 0; i < info.requests.length; i++)
{
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);
// Met à jour l'affichage des informations de chaque entreprise listée
this.companies.forEach( function (object, index) { popup.updateDisplay(index); } );
}
// Ajoute une entreprise à la liste, en lui attribuant un nom et une couleur
popup.addCompany = function (name, color)
// Renvoie un objet destiné à contenir les informations sur une entreprise
popup.newCompany = function()
{
this.companies.push(
var company =
{
title: name, // Nom de l'entreprise
color: color, // Couleur du drapeau
domains: {content:[], count:[]}, // Nom des domaines d'où viennent les requêtes, et nombre de requêtes associées
types: {content:[], count:[]}, // Types de ressources proposées par les requêtes, et nombre de requêtes associées
details: "", // Liste des requêtes, en détail
flag: 0, // Élément HTML du drapeau
});
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;
}
/* ==== Mises à jour ==== /*/
// 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);
}
/* ==== Mises à jour des informations ==== /*/
// Met à jour les informations à afficher
popup.updateInfo = function (info)
popup.updateInfo = function (request)
{
// Pour chaque type d'information à traiter
var lists = ["domains", "types"];
var units = ["domain", "type" ];
for (var i = 0; i < 2; i++)
// Si l'entreprise concernée par la requête n'est pas encore listée
if (this.companies.has(request.index) == false)
{
// La liste à modifier
var list = this.companies[info.index][lists[i]];
// Ajoute l'entreprise à la liste de celles listées
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
var unit = info[units[i]];
// Affiche son drapeau
this.createFlag(request.index);
}
// Si cette information n'a jamais été listée
if (list.content.indexOf(unit) == -1)
// L'entreprise concernée par la mise à jour
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
list.content.push(unit);
list.count.push(1);
company.contents.set(request.content, 1);
}
// Si cette information est déjà listée, incrémente son compteur
// Si la ressource est déjà listée
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
var date = new Date(info.date).toLocaleString();
var date = new Date(request.date).toLocaleString();
// Raccourci l'url
var url = info.url;
if (url.length > 150) url = url.substr(0,150) + " [&hellip;]";
var url = request.url.length < 100 ? request.url : request.url.substr(0,100) + " [&hellip;]";
// 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 ==== /*/
// Prépare un drapeau
popup.initFlag = function(index)
// Créé un drapeau
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)
{
{
// Lance le drapeau
this.launchFlag(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);});
}
}
// Créé 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
// Lance un drapeau
popup.launchFlag = function(index)
{
// Attend 10ms pour afficher le drapeau
setTimeout
(
function(div){div.className += " show";},
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)
{
setTimeout
(
function(div){div.className = "flag";},
1000 * this.timer,
this.companies[index].flag
this.companies.get(index).flag
);
}
}
/* ==== 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
var text = "<b>" + company.title + "</b> t'a envoyé :";
// Nom de domaine de la page visitée
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
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 :";
var text = "Le site <b>" + url + "</b> a demandé à " + company.title + " de t'envoyer :<br>";
// Liste des noms de domaines émetteurs des ressources
for (var i = 0; i < company.domains.content.length; i++)
{
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 + ")";
}
// Liste des ressources demandées
company.contents.forEach( function (number, type) { text += "<br>- <b>" + number + "</b> " + type + (number > 1 ? "s" : ""); } );
// Détails des requêtes
text += "<br><br><u class='details_button'>Détails&hellip;</u><div class='details'>" + company.details + "</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><u class='details_button'>Détails&hellip;</u><div class='details'>" + company.requests + "</div>";
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>"
// 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;
company.flag.info.innerHTML = text;
}
/* ==== */
retrunedValue = true;
returnedValue = true;
Supports Markdown
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