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

In this post, I'll walk you through how this app works, its core functionalities, and the step-by-step workflow that empowers you to create compelling outreach messages in minutes.

The Problem: Tedious & Time-Consuming Outreach

We've all been there: staring at a blank screen, trying to figure out how to introduce ourselves or pitch an idea to someone we don't know. Manually extracting relevant details from a resume, summarizing key achievements, and then weaving it all into a compelling message is a multi-step process that demands attention to detail and significant time.

My goal was to create a tool that could significantly reduce this effort, allowing users to focus on the relationship rather than the drafting.

The Solution: A Seamless AI-Powered Workflow

The Cold Message Generator automates much of this process using the power of Large Language Models (LLMs) and a friendly Streamlit interface. Here’s a detailed look at the user experience and the underlying processes:

Step 1: Secure Setup & Resume Upload 🚀

The journey begins when you launch the application.

• API Key Input: First, you'll provide your Groq API key in the dedicated sidebar section. This ensures the app has the necessary credentials to communicate with the powerful AI models.

• Resume Upload: The primary input is your resume. You simply upload your resume in PDF format using the designated file uploader.

Once your resume is uploaded, the application immediately gets to work behind the scenes:

• Text Extraction: The system rapidly extracts all textual content from your PDF resume.

• Initial Link Discovery: Simultaneously, it scans the extracted text for any visible URLs.

Step 2: Intelligent Link Classification & Summarization 🧠

This is where the AI and smart processing truly shine, transforming raw data into actionable insights.

• Hidden Link Classification: Beyond simple extraction, the app employs a specialized utility that goes through the discovered links. It intelligently classifies ambiguous or "hidden" links, ensuring that your LinkedIn, GitHub, and personal portfolio URLs are correctly identified and categorized, ready for easy inclusion in your message.

• AI-Powered Resume Summarization: The full text of your resume is then sent to an advanced LLM. This AI model doesn't just condense text; it analyzes your experience and skills to generate a concise, professional, and impactful summary. This summary is automatically populated into a dedicated text area on the screen, ready for your review. This feature saves you the significant effort of crafting a summary from scratch.

At this point, you'll see the AI-generated summary and any automatically detected and classified links pre-filled into input fields, allowing you to easily review and make any minor adjustments or add links if they weren't detected.

Step 3: Message Tailoring & Template Generation ✍️

With your profile data processed, you guide the AI in crafting the perfect message.

• Define Message Type: You select the desired message type from a dropdown, such as "Cold Email," "LinkedIn Message," or "Other," indicating the communication channel.

• Specify Target Role: You input the specific job title or role you're targeting (e.g., "Software Engineer," "Data Scientist"). This critical piece of information allows the AI to tailor the message's content directly to the context of that role.

• Trigger Generation: With a simple click of the "Generate Template" button, the application sends all your prepared inputs – the refined resume summary, your social links, the chosen message type, and the target job type – back to the LLM.

The AI then processes this comprehensive input to produce a customized message template. This template is designed for immediate use and includes dynamic placeholders, specifically {{recipient_name}} and {{company_name}}.

Step 4: Final Personalization & Send-Ready Message ✨

The last mile of customization is in your hands, leading to a complete, ready-to-send message.

• Recipient Details Input: You'll see dedicated input fields where you simply type in the specific recipient's name and the company's name for your current outreach.

• Final Message Creation: Upon clicking "Generate Message," the application seamlessly substitutes your entered recipient and company names into the template's placeholders.

The result is a fully formatted, personalized message displayed in a large text area, ready for you to copy and paste directly into your email client or LinkedIn message window. This entire process significantly reduces manual effort, allowing you to scale your outreach while maintaining a personalized touch.

Why Groq & Streamlit? (Under the Hood Efficiency)

• Groq's Blazing Speed: The choice of Groq's API for the LLM inference is crucial. Its Language Processing Units (LPUs) provide incredible speed, making the AI summarization and message generation almost instantaneous. This eliminates frustrating wait times, providing a snappy user experience that truly saves time.

• Streamlit's User-Friendliness: For building interactive Python web applications, Streamlit is a fantastic choice. Its simplicity allowed me to focus primarily on the core AI logic and user workflow, rather than getting bogged down in complex web development frameworks.

• Robust Backend Logic: Leveraging libraries like LangChain helps orchestrate the LLM calls and ensures structured outputs. Pydantic schemas enforce data consistency, guaranteeing that the AI's responses are always in the expected format, leading to reliable processing at every step.

Future Enhancements

I'm always thinking about how to make this tool even better:

• Expanded Message Types: Introducing options for networking events, informational interview requests, and more diverse outreach scenarios.

• Tone Customization: Allowing users to specify the desired tone (e.g., formal, friendly, direct, assertive) for their messages.

• ATS Keyword Optimization: Integrating functionality to analyze job descriptions and suggest relevant keywords to include in the message for Applicant Tracking System (ATS) compatibility.

• Basic CRM Integration: Exploring options for simple export functionality to popular Customer Relationship Management (CRM) tools.

Try it Yourself!

Ready to automate your outreach and make impactful first impressions?

• Experience the Web App: Cold Message Generator

• Dive into the Codebase: Find the full project on GitHub

• See More of My Work: Check out my portfolio at asutosh-kataruka.vercel.app

I'm keen to hear your feedback, suggestions, or ideas for future improvements! Drop a comment below or reach out on GitHub.