60 lines
2.0 KiB
JavaScript
60 lines
2.0 KiB
JavaScript
|
// Barre de chargement à injecter
|
||
|
function createLoadingBar(percentage) {
|
||
|
const existingBar = document.getElementById('socialTimeBar');
|
||
|
if (existingBar) {
|
||
|
existingBar.style.width = `${percentage}%`;
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
const barContainer = document.createElement('div');
|
||
|
barContainer.style.position = 'fixed';
|
||
|
barContainer.style.top = '0'; // Barre en haut de la page
|
||
|
barContainer.style.left = '0';
|
||
|
barContainer.style.width = '100%';
|
||
|
barContainer.style.height = '6px'; // Barre 3 fois moins épaisse
|
||
|
barContainer.style.backgroundColor = 'lightgray';
|
||
|
barContainer.style.zIndex = '9999';
|
||
|
|
||
|
const bar = document.createElement('div');
|
||
|
bar.id = 'socialTimeBar';
|
||
|
bar.style.height = '100%';
|
||
|
bar.style.width = `${percentage}%`;
|
||
|
bar.style.backgroundColor = 'green'; // Couleur verte
|
||
|
|
||
|
// Ajout de graduations à 25%, 50%, 75%
|
||
|
for (let i = 25; i <= 75; i += 25) {
|
||
|
const marker = document.createElement('div');
|
||
|
marker.style.position = 'absolute';
|
||
|
marker.style.height = '100%';
|
||
|
marker.style.width = '1px'; // Largeur des marques ajustée
|
||
|
marker.style.backgroundColor = 'black'; // Couleur des marques
|
||
|
marker.style.left = `${i}%`; // Position à chaque 25%
|
||
|
barContainer.appendChild(marker);
|
||
|
}
|
||
|
|
||
|
barContainer.appendChild(bar);
|
||
|
document.body.appendChild(barContainer);
|
||
|
}
|
||
|
|
||
|
// Fonction pour récupérer le temps passé et mettre à jour la barre
|
||
|
function updateLoadingBar() {
|
||
|
chrome.storage.local.get(['timeSpent', 'timeLimit'], function(data) {
|
||
|
if (chrome.runtime.lastError) {
|
||
|
console.error("Erreur de récupération chrome.storage:", chrome.runtime.lastError);
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
const totalTimeSpent = data.timeSpent || 0;
|
||
|
const timeLimit = data.timeLimit || 4 * 60 * 60; // 4 heures en secondes par défaut
|
||
|
const percentage = Math.min((totalTimeSpent / timeLimit) * 100, 100);
|
||
|
|
||
|
createLoadingBar(percentage);
|
||
|
});
|
||
|
}
|
||
|
|
||
|
// Mettre à jour la barre toutes les 30 secondes
|
||
|
setInterval(updateLoadingBar, 30000);
|
||
|
|
||
|
// Mettre à jour la barre au chargement initial
|
||
|
updateLoadingBar();
|