Codeforces Lite

A sidebar Chrome extension that enhances Codeforces, making it a more productive platform for competitive programmers.

Overview

Codeforces Lite brings a more refined experience for competitive programmers on Codeforces.

From enhanced UI elements and dark theme, to a fully functional code editor, this extension provides everything you need for a seamless coding experience on Codeforces.

Features

1. Advanced Code Editor with Execution & Storage Capabilities

Write, test, and submit code directly from the problem page with our feature-rich editor. No more switching tabs or manual file uploads.

Key features include:

• Default language selector supporting multiple languages (C++, Python, Java, JavaScript, Kotlin)
• Built-in code execution system with real-time results
  • Test against sample cases instantly
  • View execution time and memory usage
  • Custom test case input support
  • Detailed compilation and runtime error messages
• Adjustable font size and automatic tab indentation
• Built-in timer for practice sessions
• Smart code storage system
  • Local save of submitted codes
  • Automatic retrieval when revisiting problems
  • Efficient storage management handling 1000+ files (200+ lines each)
  • Automatic cleanup using HashMap and Queue for optimal performance

This comprehensive system combines coding, testing, and submission in one seamless interface, making your competitive programming workflow more efficient.

2. Code Execution

API CONFIGURATION

COMPILATION RESULTS HANDLING

LIMITATIONS AND FUTURE ENHANCEMENTS

3. Dark Theme

Codeforces Lite offers a highly optimized dark theme designed to provide a more visually comfortable experience, especially during extended coding sessions. The dark theme ensures a consistent look throughout the entire platform.

Key features of the dark theme include:

• Eye Comfort: The dark theme reduces eye strain by minimizing the contrast between the screen and the environment, particularly in low-light conditions.
• Battery Efficiency: On devices with OLED or AMOLED screens, the dark theme can help conserve battery life by reducing the energy used to display brighter pixels.
• Code Readability: Syntax highlighting is optimized for better readability in dark mode, ensuring that different elements in the code—such as keywords, variables, and comments—stand out clearly without causing visual fatigue.
• User Control: You can toggle the dark theme on or off based on your preferences, allowing you to switch between light and dark modes seamlessly.

4. Custom Templates and Default Cursor Placement

With Codeforces Lite, you can set up custom templates that automatically load whenever you start solving a new problem. This feature helps you avoid the repetitive task of setting up your environment or writing boilerplate code from scratch.

By predefining your commonly used template (such as input/output functions, imports, or debugging statements), you can focus directly on problem-solving, improving your speed and efficiency during contests or practice sessions.

Additionally, you can specify the exact position for your cursor using the $0 symbol in your template, allowing you to start typing right where you need. The extension also remembers the cursor’s position when switching tabs and revisiting problems, ensuring you pick up exactly where you left off—saving valuable time during contests.

5. UI Enhancements

Codeforces Lite enhances the overall UI of Codeforces by making it more accessible, visually appealing, and user-friendly.

Elements are optimized for better positioning, creating a clean and intuitive interface for seamless navigation.

• Improved alignment of the problemset page for a more structured look.
• Redesigned login and register pages for a smoother user experience.
• Customized dark theme for various extension components to ensure consistency with our dark theme design.
• User Control: You can easily toggle the Change UI option on or off according to your preferences, allowing you to switch seamlessly between the default user interface and the enhanced version.

How to Get API Key?

To use the run code feature, you'll need to set up an API key. Follow these steps:

NOTE: If you have already subscribed to Judge0 and want to access the API key, go to the link below and click on Get a Submission in the left-side panel. You will then be redirected to a page where you can access the API key, as shown in Point 5 below. Please note that both Judge0 and Judge0 CE are required.

1. Visit Judge0 on RapidAPI and Judge0 CE on RapidAPI

2. Sign up or log in to RapidAPI

3. Subscribe to both Judge0 and Judge0 CE (free tier available)

   

   Repeat the same steps for judge0-CE.

4. Once subscribed, you'll find your API key in the "Header Parameters" section

5. Copy the X-RapidAPI-Key value

   

6. Open Codeforces Lite extension and go to "API Settings" section

7. Click the "Edit" button and paste one of your API keys (because both APIs are same value, you can use any one of them)

   

8. Save the key to enable the run code feature

🚀 You're all set! The code execution feature is now ready to use.

Local Setup for Developers

To set up Codeforces Lite locally, follow these steps:

1. Fork the repository through github

   git clone <Your Forked Repo>

2. Install the dependencies:

   npm i

3. Build the project whenever you want to see the changes you made:

   npm run build

4. To add the extension to Chrome:

   • Open Chrome and navigate to chrome extensions or Manage extensions
   • Enable "Developer mode" in the top right corner.
   • Click "Load unpacked" and select the dist folder from the project.

How To Contribute?

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated. Follow the steps below to get involved:

1. Check for issues or features that need work here if you want to improve existing features. If you wish to implement a feature of your own, raise an issue and start working on it to keep track of your progress.

2. In your forked repo, create a branch for the feature or bug fix you're working on.

   git checkout -b bug/<bug-name>

   git checkout -b feature/<feature-name>

3. Make sure to properly handle any errors and ensure the feature is production-ready.

4. Write down proper commit messages which explain what you have fixed or what you have implemented.

   git commit -m "feat: Implemented real-time code submission status to display submission updates without page redirects, improving user experience"
   
   git push origin <your-branch-name>

5. Once you are ready, create a pull request (PR) for review:

   • Go to the repository on GitHub.
   • Click on "Pull requests" and create a new PR for your branch.
   • Properly list down the changes in your PR message.

6. Your PR will be reviewed and merged upon approval.

Core Developers

This extension was primarily developed by Maanas Sehgal and Devendra Suryavanshi.

Thanks for using our extension!