Added All Files: LeetCode Learning Assistant Chrome extension

Author: saksham2882

background.js

@@ -0,0 +1,169 @@
+// Main Content Generation 
+
+// Listen messages from the content_script.js
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    if (request.type === 'getAnalysis') {
+        
+        chrome.storage.sync.get(['geminiApiKey'], function (result) {
+            if (!result.geminiApiKey) {
+                chrome.tabs.sendMessage(sender.tab.id, {
+                    type: 'analysisResult',
+                    stage: request.stage,
+                    content: 'ERROR: API Key not set. Please set it in the extension popup.'
+                });
+                return;
+            }
+            callGeminiAPI(request.problem, request.stage, result.geminiApiKey, sender.tab.id);
+        });
+        return true;
+    }
+});
+
+
+// delay for loading the content
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+// --- Gemini API Call ---
+async function callGeminiAPI(problem, stage, apiKey, tabId) {
+    const model = 'gemini-2.5-flash';
+    const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;
+    const prompt = generatePrompt(problem, stage);
+
+    const maxRetries = 3;
+    let lastError = null;
+
+    for (let attempt = 1; attempt <= maxRetries; attempt++) {
+        try {
+            const response = await fetch(apiUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    "contents": [{ "parts": [{ "text": prompt }] }],
+                    "safetySettings": [
+                        { "category": "HARM_CATEGORY_HARASSMENT", "threshold": "BLOCK_NONE" },
+                        { "category": "HARM_CATEGORY_HATE_SPEECH", "threshold": "BLOCK_NONE" },
+                        { "category": "HARM_CATEGORY_SEXUALLY_EXPLICIT", "threshold": "BLOCK_NONE" },
+                        { "category": "HARM_CATEGORY_DANGEROUS_CONTENT", "threshold": "BLOCK_NONE" }
+                    ]
+                })
+            });
+
+
+            // Errors:
+            if (response.status === 429) {
+                chrome.tabs.sendMessage(tabId, {
+                    type: 'analysisResult',
+                    stage: stage,
+                    content: 'You have exceeded the daily request limit for this model. Please try again tomorrow.'
+                });
+                return;
+            }
+            if (response.status === 503) {
+                lastError = new Error(`Service Unavailable (503). The server might be temporarily overloaded.`);
+                if (attempt < maxRetries) {
+                    console.warn(`Attempt ${attempt} failed. Retrying in 2 seconds...`);
+                    await sleep(2000);
+                    continue;
+                }
+            }
+            if (!response.ok) {
+                throw new Error(`API request failed with status ${response.status}`);
+            }
+
+
+            // response
+            const data = await response.json();
+            if (!data.candidates || !data.candidates[0] || !data.candidates[0].content || !data.candidates[0].content.parts || !data.candidates[0].content.parts[0].text) {
+                if (data.candidates && data.candidates[0].finishReason === 'SAFETY') {
+                    throw new Error('Response was blocked for safety reasons.');
+                }
+                throw new Error('Invalid response structure from Gemini API.');
+            }
+
+            // validContent response
+            const validContent = data.candidates[0].content.parts[0].text;
+            chrome.tabs.sendMessage(tabId, {
+                type: 'analysisResult',
+                stage: stage,
+                content: validContent
+            });
+            return;
+
+        } catch (error) {
+            lastError = error;
+            console.error(`Gemini API call attempt ${attempt} failed:`, error);
+        }
+    }
+
+    chrome.tabs.sendMessage(tabId, {
+        type: 'analysisResult',
+        stage: stage,
+        content: `Error: Failed to get analysis after ${maxRetries} attempts. ${lastError.message}`
+    });
+}
+
+
+// ----- Prompts ------
+function generatePrompt(problem, stage) {
+    const baseInstruction = `You are an expert DSA teacher helping a student understand a LeetCode problem.
+                                Always follow these rules:
+                                - Be beginner-friendly and short.
+                                - Do NOT over explain.
+                                - Use markdown format (### Headings, bullet points, numbered lists).
+                                - Focus only on the **Optimal Approach**.
+                                - Keep answers to-the-point and 4-6 lines max.
+                                - Avoid long paragraphs and stories.
+                            LeetCode Problem: ${problem}
+                            `;
+    switch (stage) {
+        case 'hints':
+            return baseInstruction + `  ### 💡 Quick Hints
+                                        Give only **2-3 hints**, each in **1 short sentence**:
+                                        - Hint should guide the user without revealing the solution.
+                                        - Avoid mentioning any algorithm or data structure directly.
+                                        - Just help the user "think in the right direction".
+                                    `;
+        case 'approach':
+            return baseInstruction + `  ### 🧠 Optimal Approach (Only)
+                                        Describe the **optimal algorithm in 4 points max**:
+                                        - What is the idea?
+                                        - Why is this the best approach?
+                                        - Which technique does it use (like two-pointer, hashmap etc)?
+                                        - Why is it efficient?
+                                        ✅ Keep it under 4-5 lines.
+                                        ❌ Don't write code.
+                                    `;
+        case 'pseudo':
+            return baseInstruction + `  ### 📋 Pseudo Code (Optimal Only)
+                                        Write **simple pseudo-code** using English + code-style keywords.
+                                        - Use plain steps like:
+                                            - \`function()\`
+                                            - \`if condition:\`
+                                            - \`for each element in array:\`
+                                        - Keep it **under 6 lines**, don't explain each line.
+                                        ✅ Format it using a markdown code block.
+                                    `;
+        case 'solution':
+            return baseInstruction + `  ### ✅ JavaScript Code (Optimal Only)
+                                        Give clean, **simple** JavaScript code in 10-15 lines max.
+                                        - Add only **1-2 important comments**, no over commenting.
+                                        - Use good variable names.
+                                        - After code, write **a short 3-step explanation**.
+                                        ✅ Format the code in a markdown block \`\`\`js
+                                    `;
+        case 'complexity':
+            return baseInstruction + `  ### ⏱ Complexity (Time & Space)
+                                        Tell just:
+                                        - **Time Complexity:** O(...)
+                                        - **Space Complexity:** O(...)
+                                        Then give a **2-3 line reason** for each. Don’t go into depth.
+                                        ✅ Keep it point wise, no paragraphs.
+                                    `;
+        default:
+            return baseInstruction + "Give a short, helpful, pointwise explanation to guide the user.";
+    }
+}

content_script.js

@@ -0,0 +1,208 @@
+// --------------- This script is injected into the LeetCode problem page. ------------------
+
+// isUIRunning helps to only inject UI once.
+let isUIRunning = false;
+let panel;
+
+function main() {
+    if (isUIRunning) return;
+
+    // find area to inject button
+    const targetArea = document.querySelector('div.flex.items-center.gap-4');
+    if (targetArea) {
+        const analyzeBtn = document.createElement('button');
+        analyzeBtn.textContent = 'Analyze Problem';
+        analyzeBtn.id = 'analyze-btn';
+        analyzeBtn.onclick = togglePanel;
+        targetArea.appendChild(analyzeBtn);
+
+        // inject panel
+        fetch(chrome.runtime.getURL('panel.html'))
+            .then(response => response.text())
+            .then(html => {
+                document.body.insertAdjacentHTML('beforeend', html);
+                panel = document.getElementById('panel');
+                setupPanelBtn();
+            }).catch(err => console.error('Failed to load panel HTML:', err));
+
+        isUIRunning = true;
+    }
+}
+
+// toggle panel
+function togglePanel() {
+    if (!panel) return;
+    panel.classList.toggle('visible');
+}
+
+// setup panel button
+function setupPanelBtn() {
+    const closeBtn = document.getElementById('close-btn');
+    closeBtn.addEventListener('click', togglePanel);
+
+    const revealBtn = document.querySelectorAll('.btn');
+    revealBtn.forEach(button => {
+        button.addEventListener('click', handleRevealBtn);
+    });
+
+    const retryBtns = document.querySelectorAll('.btn-retry');
+    retryBtns.forEach(button => {
+        button.addEventListener('click', handleRevealBtn);
+    });
+}
+
+
+// handle reveal button click
+function handleRevealBtn(event) {
+    const button = event.target;
+    const stage = button.dataset.stage;
+
+    let problemTitle = '';
+    let problemDescription = '';
+
+    // find title using different methods
+    const titleSelectors = [
+        '.text-title-large a', 'div[data-cy="question-title"]', '.mr-2.text-label-1'
+    ];
+    let title = null;
+    for (const selector of titleSelectors) {
+        title = document.querySelector(selector);
+        if (title) {
+            problemTitle = title.innerText;
+            break;
+        }
+    }
+
+    // find description element
+    const descSelectors = [
+        'div[data-track-load="description_content"]',
+        'div[class*="elfjS"]',
+        'div.prose',
+        'div[class^="description__"]',
+        'div[class*="question-content"]'
+    ];
+    let description = null;
+    for (const selector of descSelectors) {
+        description = document.querySelector(selector);
+        if (description) {
+            problemDescription = description.innerText;
+            break;
+        }
+    }
+
+    if (!problemTitle || !problemDescription) {
+        console.error("Error Info:", {
+            titleFound: !!problemTitle,
+            descriptionFound: !!problemDescription,
+            url: window.location.href
+        });
+        alert("LeetCode Assistant Error: Could not find the problem title or description on the page. LeetCode may have updated its layout. Please check the browser console for more details.");
+
+        // try again
+        const revealBtn = document.querySelector(`.btn[data-stage="${stage}"]`);
+        if(revealBtn) {
+            revealBtn.textContent = `Reveal ${stage.charAt(0).toUpperCase() + stage.slice(1)}`;
+            revealBtn.disabled = false;
+        }
+        return;
+    }
+
+
+    const problemText = `Title: ${problemTitle}\n\nDescription:\n${problemDescription}`;
+
+    // --- hide retry and show loading ---
+    const retryBtn = document.querySelector(`.btn-retry[data-stage="${stage}"]`);
+    if (retryBtn) {
+        retryBtn.style.display = 'none';
+    }
+    const revealBtn = document.querySelector(`.btn[data-stage="${stage}"]`);
+    if (revealBtn) {
+        revealBtn.textContent = 'Loading...';
+        revealBtn.disabled = true;
+        revealBtn.style.display = 'inline-block';
+    }
+
+    // send request to background.js
+    chrome.runtime.sendMessage({
+        type: 'getAnalysis',
+        stage: stage,
+        problem: problemText
+    });
+}
+
+
+// receive response from background.js script
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    if (message.type === 'analysisResult') {
+        const { stage, content } = message;
+
+        const contentDiv = document.getElementById(`${stage}-content`);
+        const button = document.querySelector(`.btn[data-stage="${stage}"]`);
+        const retryBtn = document.querySelector(`.btn-retry[data-stage="${stage}"]`);
+
+        if (contentDiv && button && retryBtn) {
+            if (content.startsWith('Error:')) {
+                contentDiv.innerHTML = `<p class="error-message">${content}</p>`;
+                contentDiv.style.display = 'block';
+                button.style.display = 'none';
+                retryBtn.style.display = 'inline-block';
+            } else {
+                contentDiv.innerHTML = formatMarkdown(content);
+                contentDiv.style.display = 'block';
+                button.style.display = 'none';
+                retryBtn.style.display = 'none';
+            }
+        }
+    }
+});
+
+
+// ---  markdown formatting  ---
+function formatMarkdown(text) {
+    let Text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (match, lang, code) => {
+        const language = lang || 'plaintext';
+        return `<pre><code class="language-${language}">${code.trim()}</code></pre>`;
+    });
+
+    // Headings
+    Text = Text.replace(/^### (.*$)/gim, '<h3>$1</h3>');
+    Text = Text.replace(/^## (.*$)/gim, '<h2>$1</h2>');
+    Text = Text.replace(/^# (.*$)/gim, '<h1>$1</h1>');
+
+    // Bold text
+    Text = Text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+
+    // Unordered list (grouped)
+    Text = Text.replace(/(?:^|\n)[*-] (.*?)(?=\n|$)/g, (_, item) => `<li>${item}</li>`);
+    Text = Text.replace(/(<li>[\s\S]*?<\/li>)/g, '<ul>$1</ul>');
+    Text = Text.replace(/<\/ul>\s*<ul>/g, '');
+
+    // Ordered list (grouped)
+    Text = Text.replace(/(?:^|\n)\d+\. (.*?)(?=\n|$)/g, (_, item) => `<li>${item}</li>`);
+    Text = Text.replace(/(<li>[\s\S]*?<\/li>)/g, '<ol>$1</ol>');
+    Text = Text.replace(/<\/ol>\s*<ol>/g, '');
+
+    // Paragraphs
+    Text = Text.split('\n').map(p => {
+        if (p.trim() === '' || p.startsWith('<h') || p.startsWith('<ul') || p.startsWith('<ol') || p.startsWith('<pre')) {
+            return p;
+        }
+        return `<p>${p}</p>`;
+    }).join('');
+
+    return Text;
+}
+
+
+// detect changes in the page
+const detect = new MutationObserver((mutations) => {
+    if (window.location.href.includes('/problems/') && !document.getElementById('analyze-btn')) {
+        // delay for load completely
+        setTimeout(main, 1000);
+    }
+});
+detect.observe(document.body, { childList: true, subtree: true });
+
+
+// run Extension
+setTimeout(main, 1500);