LeetCode → GitHub Sync Extension

A Chrome extension that allows you to sync your LeetCode solutions to a GitHub repository with one click. Features secure OAuth (PKCE) authentication and automatic folder organization.

🚀 Features

• One-Click Sync: Sync directly from the LeetCode problem page.
• Secure Auth: Uses GitHub OAuth App with PKCE for secure authorization.
• Auto-Organization: Automatically organizes solutions into folders based on problem topics.
• Custom Repository: Choose any of your GitHub repositories as the destination.
• Theme Switching: Auto-detect system theme with manual toggle between light, dark, and system modes.
• Public & Private Repos: Sync to either public or private repositories with visibility badges.

🛠️ Setup Instructions

1. Register GitHub OAuth App

1. Go to your GitHub Settings > Developer settings > OAuth Apps.
2. Click New OAuth App.
3. Application Name: LeetCode Sync (or your choice).
4. Homepage URL: https://github.com
5. Authorization callback URL: https://<YOUR_EXTENSION_ID>.chromiumapp.org/
   • To find your Extension ID, follow the "Load the Extension" steps below first.

2. Configure Environment Variables

1. Create a .env file in the root directory:

   cp .env.example .env

2. Open .env and paste your Client ID and Client Secret from the GitHub OAuth App page:

   VITE_GITHUB_CLIENT_ID=your_client_id_here
   VITE_GITHUB_CLIENT_SECRET=your_client_secret_here

3. Build and Load the Extension

1. Install dependencies:

   npm ci

2. Build the project:

   npm run build

3. Load into Chrome:
   • Open Chrome and go to chrome://extensions/.
   • Enable Developer mode (toggle in the top right).
   • Click Load unpacked.
   • Select the dist folder in this project's root.
4. Note your Extension ID: After loading, copy the ID from the extension card and update your Authorization callback URL in the GitHub Developer settings if you haven't already.

📖 How to Use

1. Click the extension icon in your browser toolbar.
2. (Optional) Change Theme: Click the theme button (🔄/☀️/🌙) in the top-right corner to toggle between system, light, and dark modes.
3. Click Login with GitHub and authorize the application.
4. Select the repository where you want to store your solutions:
   • 🌐 indicates a public repository
   • 🔒 indicates a private repository
5. Go to any problem on LeetCode.
6. You will see a green Sync to GitHub button in the language selection section near format code.
7. Solve the problem and click Sync to GitHub!

🔒 Security

• Token Storage: Your GitHub access token is stored locally using chrome.storage.local.
• Scoped Access: The extension requests the repo scope to manage both public and private repository files.
• Theme Preference: Theme selection is stored locally in browser storage (no tracking or analytics).

⚠️ Note on Client Secret

The VITE_GITHUB_CLIENT_SECRET is embedded in the extension bundle at build time. For personal/self-hosted use this is acceptable, but avoid publishing the built extension with your real secret. If distributing publicly, set up a backend proxy to handle the token exchange server-side.

---

Built with React + Vite + TypeScript.