Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Oncela
Gafam Detector
Commits
01403422
Commit
01403422
authored
Feb 24, 2018
by
Oncela
Browse files
localisation ajoutée et simplifications
parent
dc57c536
Changes
1
Hide whitespace changes
Inline
Side-by-side
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> :
"
;
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
)
+
"
[…]
"
;
// 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
);
co
mpany
.
flag
=
div
;
// Incrémente le compteur de la ressource
co
ntent
.
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
)
+
"
[…]
"
;
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 :<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
;
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment