DEV Community

Vivek Vohra
Vivek Vohra

Posted on

iPlusCode - a small Chrome extension to make Codeforces a bit nicer

#javascript #webdev #programming #learning

iPlusCode - Bringing Peer Learning to Codeforces Practice

I spend a lot of time on Codeforces, and one thing I always wanted was:
“show me how my friends solved this exact problem, right here, without leaving the page.”

So I built iPlusCode — a Chrome extension that sits on Codeforces pages and adds some extra tools for practice.

In this post, I’ll share what the extension does, how it works (especially the “Friend's code” feature), and some lessons I learned building it.

What it does

  • Bookmark problems from Codeforces
  • Add notes to a problem (saved in Chrome sync)
  • Filter/sort problems by rating or tags
  • Sync solved problems using the Codeforces API
  • Hide tags if you don’t want spoilers
  • Main thing: view friends’ accepted codes in a modal on the same page.

👥 Friends Solutions – Learning from Peers

One unique aspect of competitive programming is learning from others.
I often found myself checking how a friend solved a problem after a contest.
iPlusCode makes this easier by integrating friend's solutions right into the problem page.

When you click “Show Codes” under Friends Accepted Codes, the extension fetches the latest accepted submission for that problem from each of your Codeforces friends (up to a limit).
It then opens a neat modal dialog on the page, showing each friend’s username and their code solution, with syntax highlighting and line numbers.
You can scroll through and see how different people approached the same task - without leaving the page or manually searching on Codeforces.

Modal showing friends’ code solutions for a problem

🔎 How does it know who my friends are?

If you’re logged into Codeforces, the extension can retrieve your friend list.
On setup, iPlusCode scrapes your /friends page (using your session cookies) to get all the handles in your “My Friends” list.
It stores this list (up to 20 friends) in Chrome Sync storage as cf_friends.

⚙️ How does it fetch the code?

iPlusCode uses a mix of the official API and careful HTML parsing:

  1. For each friend, it first calls: 
   https://codeforces.com/api/contest.status?contestId=...&handle=...
Enter fullscreen mode Exit fullscreen mode

This checks if the friend has an accepted submission (“OK”) for the current problem.

  1. If nothing found, it falls back to: 
   https://codeforces.com/api/user.status?handle=...&from=1&count=1000
Enter fullscreen mode Exit fullscreen mode

  1. Once it finds the submission ID, the extension fetches the submission page directly - the same one you’d see by clicking “View Submission” on Codeforces.

  2. It parses out the code text from the page’s DOM and displays it in a modal using Google Prettify for syntax highlighting.

Behind the scenes, iPlusCode fetches only when you click, not on every page load - and for good reason.

🧠 Lessons Learned

When I first implemented this feature, I thought:
“What if the extension automatically pre-fetches my friend's solutions in the background every time I open a problem page?”

Sounds nice, right? No waiting when you click “Show Codes.”
Well… it didn’t go as planned.

During early testing, Codeforces started showing unusual activity warnings.
Even with a 10-second retry delay, the auto-fetch system looked like a crawler.
Eventually, it triggered anti-bot protection, and I got a temporary suspension 😅.

That was the point I realized: don’t crawl Codeforces automatically.
Here’s what I changed and learned:

✅ Takeaway 1: Use on-demand fetching

Now, iPlusCode fetches data only when you click “Show Codes.”
No background scraping.
It respects Codeforces’ rate limits and makes fewer, intentional requests.

✅ Takeaway 2: Throttle and limit requests

Even on-demand, I limited it to about 20 friends and added a short delay (sleep(700)) between each fetch.
This keeps it human-like, avoids spamming, and still feels smooth for the user.

✅ Takeaway 3: Cache results

After fetching, iPlusCode caches the results for about 10 minutes in Chrome Sync:

friendCache[problemKey] = { timestamp, results }
Enter fullscreen mode Exit fullscreen mode

If you click again within that time, it just shows cached data instead of hitting the API again.

✅ Takeaway 4: Be careful with HTML parsing

Codeforces doesn’t have APIs for everything (like friends list or raw code),
so I had to rely on parsing the page.
I made sure to only read specific elements (like the “My Friends” table) and handle missing cases gracefully.
That way, even if Codeforces changes its layout slightly, the extension won’t break completely.

✅ Takeaway 5: Chrome Extension quirks

This was built using Manifest V3, so I used:

  • chrome.storage.sync for saving data
  • secure DOM creation (no direct HTML injection)
  • fetch(..., { credentials: 'include' }) to use the logged-in Codeforces session That last trick let the extension access private data (like submissions) without needing API keys.

🧩 Wrapping Up

Building iPlusCode was a rewarding project that enhanced my own practice on Codeforces.
Now I can:

  • Bookmark problems I want to revisit
  • Keep track of what I’ve solved
  • Take notes for future reference
  • Peek at how my friends solved the same problem

Now,I can see different coding styles and ideas instantly - it’s like learning from friends without leaving the page.

If you’d like to try it:

🔗 Chrome Web Store – iPlusCode
💻 GitHub Repository

I’m open to feedback and ideas for new features.
Hope this helps make your Codeforces journey more organized and fun.
Happy coding!

Top comments (0)