Skip to content

GitLab

Gafam Detector
Gafam Detector
Commit 01403422 authored by Oncela's avatar Oncela
Browse files
Options

localisation ajoutée et simplifications

parent dc57c536
Hide whitespace changes
Inline Side-by-side
Showing with 134 additions and 183 deletions
popup.js
View file @ 01403422
// Étape #4 : affiche à l'écran les informations transmises par tabs.js
var popup = {}
popup.companies = new Map(); // Liste des entreprises suivies
popup.timer = 6; // Durée d'affichage en seconde (infini si 0)
var popup = {};
var 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
console.log("= START =");
// Signale à tabs.js que la page est chargée ======================
browser.runtime.sendMessage("ready");
/* ==== Réception des messages envoyés par tabs.js ==== /*/
// Réception des messages envoyés par tabs.js ===================
browser.runtime.onMessage.addListener( function (message)
{
// S'il s'agit du message d'initialisation
if (message.type == "init")
{
// Initialise les informations
popup.initInfo(message.info);
// Récupère les noms et couleurs d'entreprises
popup.titles = message.info.companies.titles;
popup.colors = message.info.companies.colors;
// Pour chaque requête de la liste transmise par tabs.js
for (var request of message.info.requests)
{
// Met à jour les informations sur la requête
popup.update(request);
}
}
// S'il s'agit d'un message de mise à jour
if (message.type == "update")
{
// 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);
popup.update(message.request);
}
});
/* ==== 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.initInfo = function(info)
// Mise à jour =========================================
popup.update = function (request)
{
// 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 l'affichage des informations de chaque entreprise listée
this.companies.forEach( function (object, index) { popup.updateDisplay (index); } );
}
/* ==== Mises à jour des informations ==== /*/
// Si aucune entreprise n'est encore listée =====================
if (this.hasOwnProperty("companies") == 0)
{
// Créé la liste des entreprises à suivre
popup.companies = new Map();
// Créé l'élément HTML de plus haut niveau
this.div = document.createElement("div");
this.div.id = "gafam_detector";
document.body.appendChild(this.div);
}
popup.updateInfo = function (request)
{
// Si l'entreprise concernée par la requête n'est pas encore listée
// 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,
// Créé l'objet contenant les informations sur l'entreprise
var company =
{
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
});
title: this.titles[request.index], // Nom de l'entreprise
color: this.colors[request.index], // Couleur de l'entreprise
contents: new Map(), // Liste des ressources proposées
};
console.log(this.companies);
console.log("===");
// Ajoute l'objet au tableau des entreprises suivies
this.companies.set(request.index, company);
// Créé l'élément HTML qui contiendra toutes les informations sur l'entreprise
company.div = document.createElement("div");
company.div.className = "company";
company.div.style.backgroundColor = company.color;
company.div.style.top = 80 * (this.companies.size) + "px";
this.div.appendChild(company.div);
// Initialise l'affichage des informations
this.initDisplay(request.index);
}
// Créé l'élément HTML contenant le texte d'annonce
var title = document.createElement("p");
title.className = "company_title";
title.innerHTML = browser.i18n.getMessage("flag", company.title);
company.div.appendChild(title);
// Mise à jour des informations concernant les ressources proposées par les requêtes de l'entreprise
var contents = this.companies.get(request.index).contents;
// Si la ressource n'est pas encore listée
if (contents.has(request.content) == false)
{
// 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);
// Créer un sous-élément HTML qui affichera les détails
var info = document.createElement("div");
info.className = "info";
company.div.appendChild(info);
// Premier paragraphe des détails (nom du site + nom de l'entreprise)
var intro = document.createElement("p");
intro.className = "intro";
intro.innerHTML = browser.i18n.getMessage("intro", [window.location.href.replace(/.*?\:\/\/(?:www.)?(.*?)\/.*/, "$1"), company.title]);
// 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);
info.appendChild(intro);
// Ajoute les informations
contents.set(request.content, newContent);
}
// Liste des ressources offertes par l'entreprise
company.list = document.createElement("ul");
company.list.className = "type";
info.appendChild(company.list);
// Si la ressource est déjà listée
// Suite des détails
var outro = document.createElement("p");
outro.className = "outro";
outro.innerHTML = browser.i18n.getMessage("outro", company.title);
info.appendChild(outro);
// Si la page a le focus
if (!document.hidden)
{
// Lance l'affichage de l'élément HTML
this.startDisplay(company.div);
}
// Si la page n'a pas le focus
else
{
// Incrémente son compteur
contents.get(request.content).number ++;
// Ajoute une nouvelle ligne de texte
contents.get(request.content).text += this.printRequestURL(request.url);
// Appelle le lancement de drapeau dès qu'elle prend le focus
document.addEventListener('visibilitychange', function(e) {if (!document.hidden) popup.startDisplay(company.div );});
}
}
// 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
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 /
}
return "<li>" + url1 + url2 + ".<b><u>" + url3 + url4 + "</u></b>" + url5 + "</li>";
}
/* ==== Initialisation de l'affichage ==== /*/
// Si le type de ressource n'est pas encore listé ==================
if (this.companies.get(request.index).contents.has(request.content) == false)
{
// Créer l'objet contenant les informations sur le type de ressource
var content =
{
type : request.content, // Type de ressource
number : 0, // Nombre de fois où elle a été proposée
}
// Créé l'élément HTML qui affichera le nombre de fois où le type de ressource a été offert
content.div = document.createElement("li");
content.div.className = "type_count";
this.companies.get(request.index).list.appendChild(content.div);
// Créé l'élément HTML qui listera les requêtes concernant le type de ressource
var div = document.createElement("div");
div.className = "type_requests";
this.companies.get(request.index).list.appendChild(div);
// Créé l'élément HTML qui introduit la liste
var intro = document.createElement("p");
intro.className = "intro";
intro.innerHTML = browser.i18n.getMessage("request", [request.content, new Date(request.date).toLocaleString().slice(0, -3), window.location.href]);
div.appendChild(intro);
// Créé l'élément HTML qui listera les URL des requêtes
content.list = document.createElement("ol");
content.list.className = "type_url";
div.appendChild(content.list);
// Ajoute l'objet à la liste des types suivis
this.companies.get(request.index).contents.set(request.content, content);
}
popup.initDisplay = function(index)
{
// L'entreprise concernée
var company = this.companies.get(index);
// Créé un élément HTML (le drapeau)
var div = document.createElement("div");
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 * (this.companies.size -1) + "px";
// Met à jour les informations concernant le type de ressource offert ====
var content = this.companies.get(request.index).contents.get(request.content);
document.body.appendChild(div);
company.flag = div;
// Incrémente le compteur de la ressource
content.number ++;
// Créer un sous-élément HTML (qui affiche les info)
var info = document.createElement("div");
info.className = "bubble";
company.flag.appendChild(info);
company.flag.info = info;
// Si la page a le focus
if (!document.hidden)
{
// Lance l'affichage
this.startDisplay(index);
}
// Met à jour l'élément HTML affichant le nombre de requêtes concernant une ressource
content.div.innerHTML = "<b>" + content.number + "</b> <u>" + content.type + (content.number > 1 ? "s" : "") + "</u>"
// 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.startDisplay(index);});
}
// Ajoute l'URL de la requête à la liste de celles associées à un type de ressource
var limit = 100;
var url = request.url.length < limit ? request.url : request.url.substr(0, limit - 4) + " [&hellip;]";
url = url.replace(/\:\/\/(.*?\.)?([^\.]*?\.[^\.]*?)\//, "://$1<b><u>$2</u></b>/");
var newRequ = document.createElement("li");
newRequ.innerHTML = url;
content.list.appendChild(newRequ);
}
/* ==== Timing de l'affichage ==== /*/
popup.startDisplay = function(index)
// Affichage du drapeau ==================================
popup.startDisplay = function(div)
{
// Attend 10ms pour afficher le drapeau
setTimeout
(
function(div){div.className += " show";},
10,
this.companies.get(index).flag
div
);
// Attend la durée indiquée par popup.timer pour fermer le drapeau
if (this.timer)
if (timer)
{
setTimeout
(
function(div){div.className += " fold";},
1000 * this.timer,
this.companies.get(index).flag
1000 * timer,
div
);
}
}
/* ==== 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
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);
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 (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>";
});
// 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;
}
/* ==== */
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