version 0.2

background.js

@@ -0,0 +1,55 @@
+let socialMediaSites = {
+  "facebook.com": "timeSpentFacebook",
+  "x.com": "timeSpentTwitter",
+  "instagram.com": "timeSpentInstagram"
+};
+let startTime = null;
+let currentSite = null;
+
+// Quand une page de réseau social est visitée
+chrome.webNavigation.onCompleted.addListener(function(details) {
+  let url = new URL(details.url);
+  if (Object.keys(socialMediaSites).some(site => url.hostname.includes(site))) {
+    startTime = new Date();
+    currentSite = url.hostname;
+  }
+});
+
+// Quand l'utilisateur change d'onglet ou ferme un onglet
+chrome.tabs.onActivated.addListener(saveTime);
+chrome.tabs.onRemoved.addListener(saveTime);
+
+function saveTime() {
+  if (startTime && currentSite) {
+    const endTime = new Date();
+    const timeSpent = (endTime - startTime) / 1000; // en secondes
+
+    let siteKey = Object.keys(socialMediaSites).find(site => currentSite.includes(site));
+    if (siteKey) {
+      let storageKey = socialMediaSites[siteKey];
+      chrome.storage.local.get([storageKey], function(data) {
+        let totalTimeSpent = data[storageKey] || 0;
+        totalTimeSpent += timeSpent;
+
+        chrome.storage.local.set({ [storageKey]: totalTimeSpent }, function() {
+          console.log(`Temps passé sur ${currentSite}: ${totalTimeSpent} secondes`);
+        });
+      });
+    }
+
+    startTime = null;
+    currentSite = null;
+  }
+}
+
+// Alarme pour garder le service worker actif
+chrome.runtime.onInstalled.addListener(() => {
+  // Créer une alarme pour maintenir le service worker actif
+  chrome.alarms.create("keepAlive", { periodInMinutes: 1 });
+});
+
+chrome.alarms.onAlarm.addListener((alarm) => {
+  if (alarm.name === "keepAlive") {
+    console.log("Service worker toujours actif.");
+  }
+});

content.js

@@ -0,0 +1,59 @@
+// 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();

manifest.json

@@ -0,0 +1,35 @@
+{
+  "manifest_version": 3,
+  "name": "Social Media Time Tracker",
+  "version": "1.0",
+  "description": "Suivre le temps passé sur les réseaux sociaux avec une barre de chargement permanente.",
+  "permissions": [
+    "activeTab",
+    "storage",
+    "webNavigation",
+    "scripting",
+    "alarms"  
+  ],
+  "icons": {
+    "16": "images/logo-16.png",
+    "48": "images/logo-48.png",
+    "128": "images/logo-128.png"
+  },
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "images/logo-16.png",
+      "48": "images/logo-48.png",
+      "128": "images/logo-128.png"
+    }
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"]
+    }
+  ]
+}

popup.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Paramètres d'utilisation</title>
+	<title>Graphique Chart.js</title>
+    <style>
+      canvas {
+        margin-top: 20px;
+      }
+    </style>
+    <!-- Inclure Chart.js via le CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+  
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f4f4f4;
+        color: #333;
+        padding: 20px;
+        margin: 0;
+        text-align: center;
+      }
+      h1 {
+        font-size: 18px;
+        margin-bottom: 20px;
+      }
+      label {
+        font-size: 14px;
+        display: block;
+        margin-bottom: 10px;
+      }
+      select {
+        padding: 5px;
+        margin-right: 10px;
+        font-size: 14px;
+      }
+      button {
+        padding: 10px 15px;
+        font-size: 14px;
+        background-color: #4CAF50;
+        color: white;
+        border: none;
+        cursor: pointer;
+      }
+      button:hover {
+        background-color: #45a049;
+      }
+      canvas {
+        margin-top: 20px;
+      }
+    </style>
+    
+  </head>
+  <body>
+    <h1>Temps limite d'utilisation</h1>
+    <label for="timeLimitHours">Heures :</label>
+    <select id="timeLimitHours">
+      <option value="0">0 h</option>
+      <option value="1">1 h</option>
+      <option value="2">2 h</option>
+      <option value="3">3 h</option>
+      <option value="4" selected>4 h</option>
+      <option value="5">5 h</option>
+      <option value="6">6 h</option>
+      <option value="7">7 h</option>
+      <option value="8">8 h</option>
+      <option value="9">9 h</option>
+      <option value="10">10 h</option>
+      <option value="11">11 h</option>
+      <option value="12">12 h</option>
+    </select>
+
+    <label for="timeLimitMinutes">Minutes :</label>
+    <select id="timeLimitMinutes">
+      <option value="0">0 min</option>
+      <option value="15">15 min</option>
+      <option value="30">30 min</option>
+      <option value="45">45 min</option>
+    </select>
+
+    <button id="saveSettings">Sauvegarder</button>
+
+    <!-- Canvas pour le diagramme en camembert -->
+    <canvas id="socialMediaChart" width="400" height="400"></canvas>
+
+    <script src="popup.js"></script>
+	<body>
+    <h1>Mon graphique en camembert</h1>
+
+    <!-- Canvas pour afficher le graphique -->
+    <canvas id="myPieChart" width="400" height="400"></canvas>
+
+    <script>
+      // Code JavaScript pour créer le graphique
+      const ctx = document.getElementById('myPieChart').getContext('2d');
+      const myPieChart = new Chart(ctx, {
+        type: 'pie',
+        data: {
+          labels: ['Facebook', 'Twitter', 'Instagram'], // Les étiquettes du camembert
+          datasets: [{
+            label: 'Temps passé (en secondes)',
+            data: [1200, 900, 500], // Les données pour chaque section
+            backgroundColor: ['#3b5998', '#1DA1F2', '#E1306C'], // Couleurs personnalisées
+            hoverOffset: 4
+          }]
+        }
+      });
+    </script>
+  </body>
+</html>

popup.js

@@ -0,0 +1,38 @@
+document.getElementById('saveSettings').addEventListener('click', function() {
+  const hours = document.getElementById('timeLimitHours').value;
+  const minutes = document.getElementById('timeLimitMinutes').value;
+
+  const timeLimitInSeconds = (parseInt(hours) * 60 * 60) + (parseInt(minutes) * 60);
+
+  chrome.storage.local.set({ timeLimit: timeLimitInSeconds }, function() {
+    alert('Temps limite mis à jour !');
+  });
+});
+
+// Fonction pour afficher le diagramme
+function displayPieChart(data) {
+  const ctx = document.getElementById('socialMediaChart').getContext('2d');
+  new Chart(ctx, {
+    type: 'pie',
+    data: {
+      labels: ['Facebook', 'Twitter', 'Instagram'], // Noms des réseaux sociaux
+      datasets: [{
+        label: 'Temps passé (en secondes)',
+        data: [data.facebook, data.twitter, data.instagram], // Temps passé sur chaque réseau
+        backgroundColor: ['#3b5998', '#1DA1F2', '#E1306C'], // Couleurs personnalisées
+        hoverOffset: 4
+      }]
+    }
+  });
+}
+
+// Simuler la récupération des données sur le temps passé (tu devrais les récupérer depuis chrome.storage.local)
+chrome.storage.local.get(['timeSpentFacebook', 'timeSpentTwitter', 'timeSpentInstagram'], function(data) {
+  const timeSpentData = {
+    facebook: data.timeSpentFacebook || 0,
+    twitter: data.timeSpentTwitter || 0,
+    instagram: data.timeSpentInstagram || 0
+  };
+
+  displayPieChart(timeSpentData);
+});