Track your solving time, take notes & sketches, and analyze your performance – all within Codeforces!
- ⏱️ Stopwatch – Track time directly from the problem page sidebar.
- 📝 Rich Notes & Sketches – Take notes and draw visual solutions per problem.
- 📊 Performance Stats – Analyze problem-wise time, tags, and accuracy.
- 🏷️ Tagging System – Tag problems to filter and reflect later for notes and quick revision.
- 💾 Offline Storage – Saves data locally via IndexedDB.
🏆 Problem Solving Interface
Displays stopwatch and problem-specific controls in the sidebar.
Interface when a new problem-solving session begins.
Timer runs while solving the problem.
Displays the recorded solving time post-completion.
✏️ Drawing & Note-Taking Tools
Floating action button for opening drawing or note-taking tools.
Sketching ideas or visualizing concepts during problem solving.
Documenting observations or strategies while solving.
📊 Performance Tracking
Overview of solved problems and associated metrics.
Detailed breakdown of performance trends.
Compact table summarizing problem history for review.
Filter problems by tags for focused revision.
View and edit personal notes per problem.
⚙️ Additional Features
Displays CodeClock summary in the user’s Codeforces profile.
Provides quick access to common extension features.
Since this extension is not yet published in the Chrome Web Store, follow these steps to install it manually:
Before running the extension, ensure you have the following installed:
- Node.js (>= 16) & npm (or pnpm/yarn)
- Vite (installed via package manager)
- Clone the Repository:
git clone https://github.com/Sowrav14/CodeClock.git cd CodeClock - Build the Extension:
npm install npm run build
- Load the Extension in Chrome:
- Open
chrome://extensions/in Chrome. - Enable Developer Mode (top-right corner).
- Click Load Unpacked and select the
distfolder inside the cloned repo.
- Open
Now, the extension is ready to use! 🎉
- Open a Codeforces Problem Page – The stopwatch will appear in the sidebar.
- Start the Timer – Click to begin tracking.
- Solve the Problem – Work on your solution while the timer runs.
- Draw & Note - Navigate the bottom right corner for Drawing and Note taking dialog, use it for sketching the problem and taking note for the problem. You can also tag the problem for your convenient of tracking it later.
- Stop & Save – The extension saves the time taken automatically.
- View Statistics – Check your performance in the Profile Section of Codeforces.
- Problems Tracking - In profile section you also find the table of problems solved using CodeClock. You can see your saved notes for quick revision by filtering by tags.
Want to contribute or understand the code? Here's what you need:
-
Tech Stack:
- Vite + React + Typescript
- IndexedDB for local storage
- Chrome Extension APIs
-
Project Structure:
/src ├── components # UI Components ├── popup # Popup menu script ├── background # Background scripts ├── content # Content scripts ├── utils # Utility functions ├── css # Styling -
Useful Resources:
🔹 Detailed Statistics – More insights like per-topic and per-rating performance and speed analysis.
🔹 Real-time Database – Compare your solving time with other users.
🔹 Problem-wise Standings – View rankings based on solving speed.
🔹 Contest tracking – Track of time in realtime and virtual contest and show detailed statistics.
Contributions are welcome!
- Fork the repository.
- Create a new branch:
git checkout -b feature-name. - Make your changes & commit:
git commit -m "Add new feature". - Push to your fork:
git push origin feature-name. - Create a Pull Request.
Found a bug? Have a suggestion? Open an issue or reach out!
📧 Email: sowravvnath@gmail.com
LinkedIn:
