TaskPet- Chrome Extension

Your to-do list, but make it personal by taking care of pets.

---

Problem Statement

Most to-do list apps are forgettable — they're buried in another browser tab or a separate app you never open. The real problem isn't that people don't know what they need to do; it's that task management tools don't live where the work happens: the browser.

Students and knowledge workers spend hours every day in Chrome. A task manager that lives in the browser, always one click away in the toolbar, removes the friction that causes tasks to be forgotten or ignored. TaskPet puts your deadlines right where you are.

---

Our Solution

TaskPet is a Chrome browser extension (Manifest V3) that functions as a persistent, deadline-aware to-do list. The key design decisions:

• Chrome Storage Sync: Tasks are saved using chrome.storage.sync, meaning they persist across browser sessions and sync across devices signed into the same Google account — no backend, no server, no account setup required.
• Due date enforcement: The UI validates that due dates are always in the future, preventing accidentally setting past deadlines.
• Overdue visual feedback: Tasks past their deadline are styled distinctly in red, giving immediate visual priority cues.
• Popup architecture: The extension uses Chrome's action.default_popup so the full UI is available from the toolbar icon on any page, instantly.

The "Pet" framing is the hook — the idea that your task list is something you care for, not just a checklist.

Technologies Used

Technology	Why
HTML/CSS/JavaScript	Native browser extension stack — no build tools, no dependencies, runs anywhere Chrome does
Chrome Extensions API (Manifest V3)	The standard for modern Chrome extensions; MV3 is the required format for new Chrome Web Store submissions
chrome.storage.sync	Provides free, automatic cross-device persistence without any backend infrastructure

---

My Specific Contribution

GUI Integration

Built the entire popup interface (Chrom.html + styles.css), including:

• A task entry form with a text input and a datetime-local due date picker
• A dynamically rendered task list (<ul>) where each item is created via JavaScript DOM manipulation
• Delete buttons scoped per task, wired to both the DOM and Chrome Storage in sync
• CSS rules for alternating row backgrounds and a dedicated .overdue class that highlights past-due items in red

Feature Engineering

• Future-date validation: Designed the client-side check (dueDateObject < new Date()) that blocks submission of past due dates, preventing garbage data from entering storage
• Formatted date display: Transformed raw datetime-local values into human-readable locale strings (toLocaleDateString + toLocaleTimeString) for legibility in the task list
• Storage-backed CRUD: Designed the full create/read/delete cycle using chrome.storage.sync — tasks are loaded on DOMContentLoaded, saved on submit, and filtered out of storage on delete, keeping the in-memory and persisted state in sync

---

Installation Instructions

These steps assume a fresh machine with Google Chrome installed.

1. Download the project

   git clone https://github.com/your-username/TaskPet-main.git
   

   Or download and unzip the repository.

2. Open Chrome Extensions settings

   • Navigate to chrome://extensions in your browser

3. Enable Developer Mode

   • Toggle the "Developer mode" switch in the top-right corner of the Extensions page

4. Load the extension

   • Click "Load unpacked"
   • Select the TaskPet/ folder inside the project (the folder containing manifest.json)

5. Pin the extension (optional)

   • Click the puzzle piece icon in the Chrome toolbar
   • Find "TaskPet" and click the pin icon to keep it visible

The extension is now installed. No npm install, no build step.

---

Usage

1. Click the TaskPet icon in the Chrome toolbar to open the popup
2. Type a task name in the text field
3. Select a due date and time (must be in the future)
4. Click Add Task — the task appears in the list below
5. Click Delete on any task to remove it
6. Tasks persist automatically across browser sessions

Expected behavior:

• Submitting a past due date shows an alert and blocks the task from being added
• Tasks are still present after closing and reopening the browser
• Tasks sync across Chrome profiles on different machines (if signed into Chrome)

---

Project Structure

TaskPet-main/
├── TaskPet/                        # The Chrome extension package (load this folder)
│   ├── manifest.json               # Extension metadata and permissions (Manifest V3)
│   ├── Chrom.html                  # Popup UI — the main interface of the extension
│   ├── script.js                   # Core logic: task CRUD, Chrome Storage, DOM updates
│   ├── popup.js                    # Extension popup entry point
│   └── styles.css                  # UI styling including overdue task highlight
├── hello_extensions.png            # Extension toolbar icon (pixel art)
├── istockphoto-1339851357-612x612.jpg  # TaskPet dog mascot image
└── README.md                       # This file

Note: Files at the root level (manifest.json, script.js, etc.) are duplicates of the TaskPet/ folder contents. The canonical extension files are inside TaskPet/.

---

Future Work / Limitations

• No notifications: The extension does not alert the user when a deadline arrives. Chrome's alarms API could be used to trigger desktop notifications at due time.
• No completion state: Tasks can only be deleted, not marked complete. A checkbox state with visual strikethrough would make the flow more natural.
• No pet mechanics: The "pet" concept is currently branding only. A future iteration could tie task completion to a visual pet state (happy/sad/hungry) to create a gamified feedback loop.
• Storage limits: chrome.storage.sync has a 100KB quota. For heavy users, migrating to chrome.storage.local (5MB+) would be more robust.
• Overdue detection is static: Overdue styling is only applied at load time. A polling interval or chrome.alarms integration would update task state in real time.