DEV Community

Richard Fu
Richard Fu

Posted on • Originally published at richardfu.net on

Building an Automated LeetCode Solution Post Sync Feature for LeetHub

#javascript #chromeextension #webdev #leetcode

As a passionate LeetCode enthusiast, I tackle the daily coding challenge religiously and share my solution insights with the community through detailed posts (often polished with AI assistance). My coding journey is powered by LeetHub, an incredible Chrome extension that automatically synchronizes my LeetCode solutions to my GitHub repository, helping me build a robust coding portfolio over time.

However, I noticed a gap in my workflow. While LeetHub excellently captures my code solutions as plain script files, my thoughtful solution explanations—complete with intuition, approach breakdowns, and complexity analysis—were stuck on LeetCode’s platform. I found myself manually copying these posts to create Solution.md files in my GitHub repo, which was both tedious and inconsistent.

That’s when it hit me: why couldn’t LeetHub handle this automatically? This realization sparked my journey to extend LeetHub’s capabilities, and today I’m excited to share the story of building an automated solution post sync feature that bridges this gap.

How the Feature Works

The new feature operates seamlessly in the background, requiring zero additional effort from users:

  1. Detection : When you publish a solution post on LeetCode, the extension automatically detects the action by intercepting the GraphQL request
  2. Content Extraction : It captures your solution title, content, and problem metadata from the request payload
  3. Smart Mapping : The extension maps the LeetCode problem slug to your existing GitHub repository folder structure
  4. Commit Message Consistency : It fetches your previous solution commit message from GitHub API (e.g., “Time: 44 ms (100%), Space: 73 MB (100%) – LeetHub”)
  5. Automatic Upload : Creates a Solution.md file in the same folder as your code solution with the identical commit message

The result? Your GitHub repository now contains both your code solutions AND your detailed explanations, creating a complete documentation of your problem-solving approach.

Technical Challenges and Solutions

Building this feature presented several fascinating technical challenges that pushed the boundaries of Chrome extension development:

Challenge 1: Request Interception in Modern Web Applications

The Problem : LeetCode uses GraphQL requests for solution posting, but traditional content script approaches couldn’t reliably intercept these requests due to Chrome’s security model and timing issues.

The Solution : We implemented a dual content script architecture using Chrome Extension Manifest V3’s world: "MAIN" feature:


// manifest.json
"content_scripts": [
  {
    "js": ["src/js/interceptor.js"],
    "run_at": "document_start",
    "world": "MAIN" // Runs in page's JavaScript context
  },
  {
    "js": ["src/js/leetcode.js"],
    "run_at": "document_idle" // Runs in isolated extension context
  }
]
Enter fullscreen mode Exit fullscreen mode

This approach allows the interceptor to catch network requests in the same execution context as LeetCode’s JavaScript while maintaining secure communication with the main extension logic.

Challenge 2: Content Security Policy Restrictions

The Problem : LeetCode’s strict Content Security Policy blocked our initial attempts to inject interceptor code directly into the page.

The Solution : Instead of inline script injection, we created a separate interceptor file that runs in the MAIN world context, bypassing CSP restrictions while maintaining functionality:


// Intercept both fetch and XMLHttpRequest methods
const originalFetch = window.fetch;
window.fetch = function(...args) {
  // Intercept and process GraphQL requests
  if (body.operationName === 'ugcArticlePublishSolution') {
    // Extract and forward solution data
  }
  return originalFetch.apply(this, args);
};
Enter fullscreen mode Exit fullscreen mode

Challenge 3: Problem Name Mapping and GitHub Integration

The Problem : LeetCode’s problem slugs (e.g., “maximum-matching-of-players-with-trainers”) needed to be mapped to GitHub folder names (e.g., “2410-maximum-matching-of-players-with-trainers”), and we needed to maintain commit message consistency.

The Solution : We implemented intelligent problem name matching and GitHub API integration:


async function getLastCommitMessage(problemName) {
  // Fetch commit history from GitHub API
  const commitsUrl = `https://api.github.com/repos/${hook}/commits?path=${folderPath}`;

  // Find the most recent solution commit (skip README/NOTES)
  for (const commit of commits) {
    if (commit.message.includes('Time:') && commit.message.includes('Space:')) {
      return commit.message; // Use the same format
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Challenge 4: User Experience and Settings Integration

The Problem : The feature needed to be discoverable and controllable without disrupting existing LeetHub workflows.

The Solution : We added a collapsible settings section in the extension popup with a toggle switch (enabled by default), maintaining consistency with LeetHub’s existing UI patterns.

The Result

The feature now works flawlessly, automatically creating comprehensive documentation in users’ GitHub repositories. Here’s what a typical problem folder looks like after the enhancement:


/2410-maximum-matching-of-players-with-trainers/
├── README.md # Problem description
├── 2410-maximum-matching-of-players-with-trainers.ts # Solution code  
└── Solution.md # Solution explanation ✨ NEW!
Enter fullscreen mode Exit fullscreen mode

Both the code and solution post files share the same commit message format, creating a cohesive development history.

Support This Feature

I’m thrilled to contribute this feature back to the LeetCode community! The implementation is now live as a pull request in the official LeetHub-3.0 repository.

👍 If you’d find this feature useful, please show your support by giving a thumbs up to the PR: https://github.com/raphaelheinz/LeetHub-3.0/pull/69

Your support helps demonstrate community interest and encourages the maintainers to merge this enhancement, making it available to thousands of LeetCode enthusiasts worldwide.

This feature transforms LeetHub from a simple code backup tool into a comprehensive documentation system that captures both your solutions and the thought processes behind them. It’s a small change that makes a big difference in how we showcase our problem-solving journey on GitHub.

Ready to supercharge your LeetCode documentation workflow? Check out the PR and let’s make this feature a reality for everyone! 🚀

The post Building an Automated LeetCode Solution Post Sync Feature for LeetHub appeared first on Richard Fu.

Top comments (0)