time usage chrome extension

OTHER/chrome-add-ons/Timer/README.md

@@ -0,0 +1,2 @@
+# WhyBlocker
+Chrome add on that makes you type in message exspaining why you are on a certain website that is listed as blocked. Adds more friction to wasting time.

OTHER/chrome-add-ons/Timer/background.js

@@ -0,0 +1,4 @@
+"use strict";
+
+chrome.runtime.setUninstallURL(
+    "https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley", () => {})

OTHER/chrome-add-ons/Timer/contentScript.js

@@ -0,0 +1,164 @@
+// Helper function to format time
+function formatTime(seconds) {
+    const hours = String(Math.floor(seconds / 3600)).padStart(2, '0');
+    const minutes = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
+    const secs = String(seconds % 60).padStart(2, '0');
+    return `${hours}:${minutes}:${secs}`;
+}
+
+// Function to create the popup with a canvas clock
+function createPopup() {
+    const popup = document.createElement('div');
+    popup.id = 'time-tracker-popup';
+    popup.style.position = 'fixed';
+    popup.style.bottom = '20px';
+    popup.style.right = '20px';
+    popup.style.width = '250px';
+    popup.style.padding = '15px';
+    popup.style.backgroundColor = '#333';
+    popup.style.color = '#fff';
+    popup.style.borderRadius = '8px';
+    popup.style.fontFamily = 'Arial, sans-serif';
+    popup.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.5)';
+    popup.style.zIndex = '9999';
+    popup.style.fontSize = '16px';
+    popup.style.userSelect = 'none';
+
+    // Create content
+    popup.innerHTML = `
+        <h3 style="margin: 0 0 10px; font-size: 16px; text-align: center;">Time Tracker</h3>
+		<div style="display: flex; align-items: center;">
+		<div>
+        <p style="margin: 5px 0;">Session: <span id="session-time">00:00:00</span></p>
+        <p style="margin: 5px 0;">Today: <span id="daily-time">00:00:00</span></p>
+        <p style="margin: 5px 0;">This Week: <span id="weekly-time">00:00:00</span></p>
+		</div>
+        <canvas id="clock-canvas" width="60" height="60" style="display: block; margin: 10px auto;"></canvas>
+		</div>
+    `;
+
+    document.body.appendChild(popup);
+}
+
+// Function to update the popup
+function updatePopup(sessionTime, dailyTime, weeklyTime) {
+    document.getElementById('session-time').textContent = formatTime(sessionTime);
+    document.getElementById('daily-time').textContent = formatTime(dailyTime);
+    document.getElementById('weekly-time').textContent = formatTime(weeklyTime);
+}
+
+// Function to draw the clock based on the session time
+function drawClock(sessionTime) {
+
+    const canvas = document.getElementById('clock-canvas');
+    const ctx = canvas.getContext('2d');
+
+    // Clear the canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Draw the clock face
+    ctx.beginPath();
+    ctx.arc(30, 30, 28, 0, 2 * Math.PI);
+    ctx.fillStyle = '#222';
+    ctx.fill();
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = 2;
+    ctx.stroke();
+
+    // Get the current session hours and minutes
+    const hours = Math.floor(sessionTime / 3600) % 12;
+    const minutes = Math.floor((sessionTime % 3600) / 60);
+
+    // Calculate angles for the hands
+    const minuteAngle = (Math.PI / 30) * minutes - Math.PI / 2;
+    const hourAngle = (Math.PI / 6) * hours + (Math.PI / 360) * minutes - Math.PI / 2;
+
+    // Draw minute hand
+    ctx.beginPath();
+    ctx.moveTo(30, 30);
+    ctx.lineTo(30 + 20 * Math.cos(minuteAngle), 30 + 20 * Math.sin(minuteAngle));
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = 2;
+    ctx.stroke();
+
+    // Draw hour hand
+    ctx.beginPath();
+    ctx.moveTo(30, 30);
+    ctx.lineTo(30 + 15 * Math.cos(hourAngle), 30 + 15 * Math.sin(hourAngle));
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = 3;
+    ctx.stroke();
+}
+
+// Function to reset counters if a new day or week has started
+function resetTimeData(timeData, url) {
+    const now = new Date();
+    const today = now.toISOString().split('T')[0];
+    const currentWeek = `${now.getFullYear()}-W${Math.ceil(now.getDate() / 7)}`;
+
+    // Reset daily time if a new day has started
+    if (timeData[url].lastDay !== today) {
+        timeData[url].dailyTime = 0;
+        timeData[url].lastDay = today;
+    }
+
+    // Reset weekly time if a new week has started
+    if (timeData[url].lastWeek !== currentWeek) {
+        timeData[url].weeklyTime = 0;
+        timeData[url].lastWeek = currentWeek;
+    }
+}
+
+// Function to track time
+function trackTime() {
+    const url = window.location.hostname;
+
+    // Load data from storage
+    chrome.storage.local.get(['timeData'], (result) => {
+        let timeData = result.timeData || {};
+
+        // Initialize or reset the data for the current site
+        if (!timeData[url]) {
+            timeData[url] = {
+                sessionTime: 0,
+                dailyTime: 0,
+                weeklyTime: 0,
+                lastDay: new Date().toISOString().split('T')[0],
+                lastWeek: `${new Date().getFullYear()}-W${Math.ceil(new Date().getDate() / 7)}`
+            };
+        } else {
+            // Reset time data if a new day or week has started
+            resetTimeData(timeData, url);
+
+            // Reset session time if the page is reopened
+            timeData[url].sessionTime = 0;
+        }
+
+        // Display the popup
+        createPopup();
+
+        let intervalId = setInterval(() => {
+            // Increment time
+            timeData[url].sessionTime++;
+            timeData[url].dailyTime++;
+            timeData[url].weeklyTime++;
+
+            // Save updated data to storage
+            chrome.storage.local.set({ timeData });
+
+            // Update the popup with the new times
+            updatePopup(timeData[url].sessionTime, timeData[url].dailyTime, timeData[url].weeklyTime);
+
+            // Update the clock
+            drawClock(timeData[url].sessionTime);
+        }, 1000);
+
+        // Clear interval when the tab is not active
+        window.addEventListener('unload', () => {
+            clearInterval(intervalId);
+        });
+    });
+}
+
+// Run the tracking function when the content script is loaded
+trackTime();

OTHER/chrome-add-ons/Timer/manifest.json

@@ -0,0 +1,30 @@
+{
+	"name": "Timer",
+	"version": "0.1.0",
+	"description": "Why are you on this website",
+	"permissions": [
+		"storage",
+    	"activeTab"
+	],
+	"host_permissions": ["*://*.youtube.com/*"],
+	"background": {
+		"service_worker": "background.js"
+	},
+	"content_scripts": [
+		{
+		  "matches": ["*://*.youtube.com/*", "*://*.youtube.com/watch*"],
+		  "js": ["contentScript.js"],
+		  "runAt": "document_end"
+		}
+	  ],
+	"web_accessible_resources": [{ 
+		"resources": [],
+		"matches": [],
+		"use_dynamic_url": true
+	}],
+	"action": {
+		"default_title": "Why are you doing this",
+		"default_popup": "popup/popup.html"
+	},
+	"manifest_version": 3
+}

OTHER/chrome-add-ons/Timer/popup/popup.css

@@ -0,0 +1,37 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	min-width: 280px;
+	min-height: 280px;
+
+	padding: 0;
+	margin: 0;
+
+	background: #f1f1f1;
+}
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	padding: 4px;
+
+	background-color: rgb(171, 171, 171);
+}
+
+.header .logo {
+	width: 40px;
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	width: 100%;
+	height: 13rem;
+}

OTHER/chrome-add-ons/Timer/popup/popup.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+	<link rel="stylesheet" href="popup.css" />
+	<script src="popup.js" defer></script>
+</head>
+
+<body>
+	<!DOCTYPE html>
+	<html lang="en">
+
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>Time Tracker</title>
+		<style>
+			body {
+				font-family: Arial, sans-serif;
+				background-color: #333;
+				color: #fff;
+				margin: 0;
+				padding: 20px;
+			}
+
+			h1,
+			h2 {
+				text-align: center;
+				margin: 0;
+			}
+
+			.session-time {
+				font-size: 36px;
+				text-align: center;
+				margin: 20px 0;
+			}
+
+			.website-time {
+				margin-top: 20px;
+				padding: 10px;
+				border-top: 1px solid #444;
+			}
+
+			.website-title {
+				font-size: 18px;
+				margin: 5px 0;
+			}
+
+			.time-details {
+				margin-left: 10px;
+			}
+		</style>
+	</head>
+
+	<body>
+		<h1>Time Tracker</h1>
+		<div id="time-list"></div>
+		<script src="popup.js"></script>
+	</body>
+
+	</html>
+
+	<hr />
+</body>
+
+</html>

OTHER/chrome-add-ons/Timer/popup/popup.js

@@ -0,0 +1,58 @@
+"use strict";
+
+// Helper function to format time
+function formatTime(seconds) {
+    const hours = String(Math.floor(seconds / 3600)).padStart(2, '0');
+    const minutes = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
+    const secs = String(seconds % 60).padStart(2, '0');
+    return `${hours}:${minutes}:${secs}`;
+}
+
+// Function to display the session time for the current page
+function displaySessionTime(currentUrl, timeData) {
+    const sessionTimeElement = document.getElementById('session-time');
+    if (timeData[currentUrl]) {
+        sessionTimeElement.textContent = formatTime(timeData[currentUrl].sessionTime);
+    } else {
+        sessionTimeElement.textContent = 'Not Tracked';
+    }
+}
+
+// Function to display daily and weekly times for all websites
+function displayWebsiteTimes(timeData) {
+    const timeListElement = document.getElementById('time-list');
+    for (const [url, data] of Object.entries(timeData)) {
+        const websiteTimeDiv = document.createElement('div');
+        websiteTimeDiv.className = 'website-time';
+
+        const websiteTitle = document.createElement('div');
+        websiteTitle.className = 'website-title';
+        websiteTitle.textContent = url;
+
+        const timeDetails = document.createElement('div');
+        timeDetails.className = 'time-details';
+        timeDetails.innerHTML = `
+            <p>Daily Time: ${formatTime(data.dailyTime)}</p>
+            <p>Weekly Time: ${formatTime(data.weeklyTime)}</p>
+        `;
+
+        websiteTimeDiv.appendChild(websiteTitle);
+        websiteTimeDiv.appendChild(timeDetails);
+        timeListElement.appendChild(websiteTimeDiv);
+    }
+}
+
+// Fetch and display data when the popup is opened
+const seen = new Set()
+document.addEventListener('DOMContentLoaded', () => {
+    chrome.storage.local.get(['timeData'], (result) => {
+
+        if (seen.has(result)) {
+            return;
+        }
+        seen.add(result)
+
+        const timeData = result.timeData || {};
+        displayWebsiteTimes(timeData);
+    });
+});

OTHER/chrome-add-ons/Timer/todo

@@ -0,0 +1,10 @@
+# Distraction blocker
+
+- Make popup be the place where you add things to be blocked (don't allow removels)
+- Show time spent on blocked websites total, last week, and last day and show times you have bypassed block
+- Add moveable timer popup when on blocked pages that shows current time and time spent on session
+- Add toggleable spoken reminders using speechSynthesis web API
+- Show times gone to page data in popup
+
+Important:
+- Make sure you cant just use inspect to delete