🔍 Building a LeetCode Rank Search Chrome Extension — Track Multiple Users in One Click!

🧠 Motivation

Have you ever participated in a LeetCode contest and then spent time manually flipping through rank pages just to find where you or your friends placed?

I did too. And it was painful.

So, I decided to solve it with code — by building a Chrome extension that automates this entire process!

In this post, I’ll walk you through:

• Challenge for data access on LeetCode 🚫

• The idea 💡

• The tech stack ⚙️

• How it works 🧩

• Chrome extension architecture 🧱

• Publishing & usage 🚀

---

Overcoming the Challenge of Data Access on LeetCode

🚫 API Blocking by LeetCode

LeetCode has strict anti-bot mechanisms in place that block automated API requests. This makes traditional API-based data retrieval methods unreliable for scraping or automation tasks.

🔄 Dynamic Frontend Architecture

LeetCode’s frontend is built on dynamic JavaScript frameworks. The platform frequently updates its internal routing, selectors, and page structures, often breaking static scraping solutions.

✅ Our Adaptive Solution: Real-Time Page Scraping

To overcome these challenges, we implemented real-time page scraping using browser automation. By simulating real user interactions, we dynamically search for usernames on the leaderboard and determine their corresponding pages.

🧠 Smart DOM Traversal for Robustness

Instead of relying on static links or outdated selectors, our method adapts to DOM changes by querying elements intelligently. This makes our solution more robust against frontend updates and layout shifts.

💡 Result: Resilient and Reliable Data Extraction

This adaptive approach ensures that we can consistently retrieve user data from LeetCode, even as the platform evolves. It strikes a balance between compliance and flexibility in a dynamically changing environment.

---

📌 What the Extension Does

LeetCode Rank Search is a Chrome extension that:

✅ Lets you enter multiple LeetCode usernames ✅ Automatically flips through contest ranking pages ✅ Finds the page number for each user ✅ Stops when all users are found ✅ Gives you a friendly floating UI to view results

---

⚙️ Tech Stack

• 🧭 JavaScript (Vanilla, for DOM manipulation & search logic)

---

🧰 Folder Structure

leetcode-rank-search-extension/
├── manifest.json
├── background.js
├── content.js
├── popup.html
├── popup.js
├── styles.css
├── icon16.png
├── icon48.png
├── icon128.png
├── screenshot.png
└── README.md

---

🧱 Key Components

1. manifest.json

The brain of the extension, defining permissions, content scripts, icons, and popup.

"content_scripts": [
  {
    "matches": ["https://leetcode.com/contest/*/ranking/*"],
    "js": ["content.js"]
  }
],
"action": {
  "default_popup": "popup.html"
},
"icons": {
  "16": "icon16.png",
  "48": "icon48.png",
  "128": "icon128.png"
}

2. popup.html + popup.js

Provides a simple UI button (Start Search) that sends a message to the active tab to trigger the rank search.

3. content.js

Handles:

• Prompting for user IDs

• Navigating back to the first page

• Looping through rank pages

• Detecting usernames

• Updating the floating dialog

• Handling STOP and Search Again

---

🔄 How the Flow Works

1. You open the LeetCode contest ranking page (e.g., weekly-contest-455/ranking)

2. Click the extension icon → hit “Start Search”

3. You enter usernames like: alice123, bob_dev, codewarrior

4. Extension:

   • Goes to the first page

   • Starts flipping pages

   • Checks for usernames on each page

   • Displays found page numbers in a nice floating box

   • Stops when done or on your command

---

💡 Special Features

• ✅ Multi-user support

• 🛑 Manual STOP at any time

• 🔄 Search Again without reloading

• ❌ Close button to dismiss the box

• 🧱 Handles dynamically loaded LeetCode pages

• 🧠 Special case handled: if rank table not found, instructs user to reload the page

---

📸 Preview

A floating UI helps you track user ranks in real-time while flipping pages automatically.

---

⚠️ Common Pitfall: Rank Page Not Found?

Sometimes LeetCode uses dynamic loading which makes the table undetectable initially.

🔧 Fix: Just reload the contest rank page and try again.

---

🚀 How to Install Locally

1. Clone the repo or download ZIP

2. Go to chrome://extensions

3. Enable Developer Mode

4. Click “Load unpacked” and select the folder

5. Visit any LeetCode contest rank page and start using it!

---

🔓 Open Source

Find the full source code on GitHub:

👉 GitHub Repo Link

Feel free to star, fork, or contribute!

---

🙌 Final Thoughts

This was a fun weekend project that solved a real annoyance and introduced me to the world of Chrome Extensions + browser scripting.

If you're into problem-solving, automating workflows, or just love clean tools — consider trying it out!

Thanks for reading! 💛

---

More about Author

👉 Asutoshk - Linktree