replace gpt with openrouter, add api key in settings

zubyj · zubyj · commit fff1a6b483be · 2025-03-05T21:33:38.000-08:00
diff --git a/manifest.json b/manifest.json
@@ -18,7 +18,8 @@
     ],
     "host_permissions": [
         "https://chat.openai.com/api/auth/session",
-        "https://chatgpt.com/api/auth/session"
+        "https://chatgpt.com/api/auth/session",
+        "https://openrouter.ai/*"
     ],
     "background": {
         "service_worker": "dist/background/background.js",
@@ -27,7 +28,6 @@
     "content_scripts": [
         {
             "js": [
-                "dist/content-script/get-gpt-access-token.js",
                 "dist/content-script/get-user-code.js",
                 "dist/content-script/update-solutions-tab.js",
                 "dist/content-script/update-description-tab.js",
diff --git a/src/background/background.ts b/src/background/background.ts
@@ -24,6 +24,13 @@ chrome.runtime.onInstalled.addListener(() => {
             console.error(error);
         });
 
+    // Initialize OpenRouter API key as empty if not set
+    chrome.storage.local.get(['openRouterApiKey'], (result) => {
+        if (!result.openRouterApiKey) {
+            chrome.storage.local.set({ openRouterApiKey: '' });
+        }
+    });
+
     // Load default settings
     chrome.storage.local.set({ fontSize: 14 });
     chrome.storage.local.set({ showExamples: true });
diff --git a/src/background/chatgpt/fetch-sse.ts b/src/background/chatgpt/fetch-sse.ts
@@ -8,20 +8,44 @@ import { streamAsyncIterable } from './stream-async-iterable.js';
 
 export async function fetchSSE(
     resource: string,
-    options: RequestInit & { onMessage: (message: string) => void }) {
+    options: {
+        onMessage: (message: string) => void;
+        method?: string;
+        headers?: Record<string, string>;
+        body?: string;
+    }
+): Promise<void> {
     const { onMessage, ...fetchOptions } = options;
     const resp = await fetch(resource, fetchOptions);
     if (!resp.ok) {
-        const error = await resp.json().catch(() => ({}));
-        throw new Error(!isEmpty(error) ? JSON.stringify(error) : `${resp.status} ${resp.statusText}`);
+        throw new Error(`HTTP error! status: ${resp.status}`);
+    }
+    const reader = resp.body?.getReader();
+    if (!reader) {
+        throw new Error('Response body is not readable');
     }
-    const parser = createParser((event) => {
-        if (event.type === 'event') {
-            onMessage(event.data);
+
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() || '';
+
+        for (const line of lines) {
+            const trimmedLine = line.trim();
+            if (trimmedLine === '') continue;
+            if (trimmedLine === 'data: [DONE]') {
+                onMessage('[DONE]');
+                return;
+            }
+            if (trimmedLine.startsWith('data: ')) {
+                onMessage(trimmedLine.slice(6));
+            }
         }
-    });
-    for await (const chunk of streamAsyncIterable(resp.body || new ReadableStream())) {
-        const str = new TextDecoder().decode(chunk);
-        parser.feed(str);
     }
 }
diff --git a/src/background/openrouter/openrouter.ts b/src/background/openrouter/openrouter.ts
@@ -0,0 +1,54 @@
+export interface AIProvider {
+    generateAnswer(params: {
+        prompt: string,
+        onEvent: (arg: { type: string, data?: { text: string } }) => void
+    }): Promise<void>;
+}
+
+export class OpenRouterProvider implements AIProvider {
+    private readonly apiKey: string;
+    private readonly model: string;
+
+    constructor(apiKey: string, model: string = 'openai/gpt-3.5-turbo') {
+        this.apiKey = apiKey;
+        this.model = model;
+    }
+
+    async generateAnswer(params: { prompt: string, onEvent: (arg: { type: string, data?: { text: string } }) => void }) {
+        try {
+            const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${this.apiKey}`,
+                    'HTTP-Referer': 'https://github.com/zubyj/leetcode-explained',
+                    'X-Title': 'Leetcode Explained'
+                },
+                body: JSON.stringify({
+                    model: this.model,
+                    messages: [{
+                        role: 'user',
+                        content: params.prompt
+                    }],
+                    stream: false
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error(`OpenRouter API error: ${response.status}`);
+            }
+
+            const data = await response.json();
+            if (data.choices && data.choices[0]) {
+                params.onEvent({
+                    type: 'answer',
+                    data: { text: data.choices[0].message.content }
+                });
+                params.onEvent({ type: 'done' });
+            }
+        } catch (error) {
+            console.error('OpenRouter API error:', error);
+            throw error;
+        }
+    }
+}
diff --git a/src/popup/popup.css b/src/popup/popup.css
@@ -203,4 +203,39 @@ a:hover {
 
 #review {
     padding-top: 10px;
+}
+
+/* Add styles for the API key section */
+.api-key-container {
+    display: flex;
+    gap: 10px;
+    margin: 10px 0;
+}
+
+#api-key-input {
+    flex: 1;
+    padding: 8px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background-color: var(--primary-bg-color);
+    color: var(--primary-text-color);
+}
+
+#api-key-message {
+    margin: 5px 0;
+    font-size: 14px;
+}
+
+.help-text {
+    font-size: 12px;
+    color: var(--secondary-text-color);
+}
+
+.help-text a {
+    color: var(--link-color);
+    text-decoration: none;
+}
+
+.help-text a:hover {
+    text-decoration: underline;
 }
diff --git a/src/popup/popup.ts b/src/popup/popup.ts
@@ -4,12 +4,17 @@ Creates the GPT buttons, sets the prompts, and displays the responses.
 The user can also copy the code to their clipboard, clear the code, and open the settings page.
 */
 
-import {
-    getChatGPTAccessToken,
-    ChatGPTProvider,
-} from '../background/chatgpt/chatgpt.js';
-
-import { initializeTheme, toggleTheme } from '../utils/theme.js';
+import { initializeTheme } from '../utils/theme.js';
+import { OpenRouterProvider } from '../background/openrouter/openrouter.js';
+import { ChatGPTProvider } from '../background/chatgpt/chatgpt.js';
+
+// Add interface for ChatGPTProvider at the top level
+interface AIProvider {
+    generateAnswer(params: {
+        prompt: string,
+        onEvent: (arg: { type: string, data?: { text: string } }) => void
+    }): Promise<void>;
+}
 
 /* Element selectors */
 const selectors: { [key: string]: string } = {
@@ -75,7 +80,7 @@ function setInfoMessage(message: string, duration: number) {
     }, duration);
 }
 
-function initActionButton(buttonId: string, action: string, chatGPTProvider: ChatGPTProvider): void {
+function initActionButton(buttonId: string, action: string, chatGPTProvider: AIProvider): void {
     const actionButton = document.getElementById(buttonId);
     if (!actionButton) return;
     actionButton.onclick = async () => {
@@ -120,7 +125,7 @@ function formatResponseText(text: string): string {
 }
 
 function processCode(
-    chatGPTProvider: ChatGPTProvider,
+    chatGPTProvider: AIProvider,
     codeText: string,
     action: string,
 ): void {
@@ -200,64 +205,30 @@ function processCode(
     });
 }
 
-async function main(): Promise<void> {
-
-    initializeTheme();
-
-    await Promise.all([
+async function loadStoredData(): Promise<void> {
+    const [analyzeCodeResponseStored, fixCodeResponseStored, lastAction] = await Promise.all([
         getFromStorage(storageKeys.analyzeCodeResponse),
         getFromStorage(storageKeys.fixCodeResponse),
         getFromStorage(storageKeys.lastAction),
-        getFromStorage(storageKeys.language),
-    ]);
-
-    // Load font size from storage
-    let fontSizeElement = document.documentElement; // Or any specific element you want to change the font size of
-    chrome.storage.local.get('fontSize', function (data) {
-        if (data.fontSize) {
-            fontSizeElement.style.setProperty('--dynamic-font-size', `${data.fontSize}px`);
-            if (parseInt(data.fontSize) >= 18) {
-                const width = (parseInt(data.fontSize) * 24 + 200);
-                document.body.style.width = `${width + 20} px`;
-                fixCodeContainer && (fixCodeContainer.style.maxWidth = `${width} px`);
-                analyzeCodeResponse && (analyzeCodeResponse.style.maxWidth = `${width}px`);
-            }
-
-            const sizes = document.getElementsByClassName('material-button');
-            for (let i = 0; i < sizes.length; i++) {
-                (sizes[i] as HTMLElement).style.width = `${data.fontSize * 13} px`;
-            }
-        }
-    });
+    ]) as [string, string, string];
 
-    chrome.storage.local.get('analyzeCodeResponse', function (data) {
-        if (data.analyzeCodeResponse) {
-            analyzeCodeResponse && (analyzeCodeResponse.innerHTML = data.analyzeCodeResponse);
-            (window as any).Prism.highlightAll();
-        }
-    });
+    if (analyzeCodeResponseStored && lastAction === 'analyze') {
+        analyzeCodeResponse && (analyzeCodeResponse.innerHTML = analyzeCodeResponseStored);
+        analyzeCodeResponse?.classList.remove('hidden');
+    }
 
-    chrome.storage.local.get('fixCodeResponse', function (data) {
-        if (data.fixCodeResponse) {
-            fixCodeResponse && (fixCodeResponse.textContent = data.fixCodeResponse);
-            (window as any).Prism.highlightAll();
-        }
-    });
+    if (fixCodeResponseStored && lastAction === 'fix') {
+        fixCodeResponse && (fixCodeResponse.textContent = fixCodeResponseStored);
+        fixCodeContainer?.classList.remove('hidden');
+        (window as any).Prism.highlightAll();
+    }
+}
 
-    chrome.storage.local.get('lastAction', function (data) {
-        if (data.lastAction) {
-            if (data.lastAction === 'analyze') {
-                analyzeCodeResponse && analyzeCodeResponse.classList.remove('hidden');
-                fixCodeContainer && fixCodeContainer.classList.add('hidden');
-            }
-            else if (data.lastAction === 'fix') {
-                analyzeCodeResponse && analyzeCodeResponse.classList.add('hidden');
-                fixCodeContainer && fixCodeContainer.classList.remove('hidden');
-            }
-        }
-    });
+async function main(): Promise<void> {
+    initializeTheme();
+    await loadStoredData();
 
-    // get name of current tab and set info message to it if its a leetcode problem
+    // get name of current tab and set info message
     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
         const tab = tabs[0];
         if (tab.url && tab.url.includes('leetcode.com/problems')) {
@@ -273,25 +244,39 @@ async function main(): Promise<void> {
     });
 
     try {
-        const accessToken = await getChatGPTAccessToken();
-        if (accessToken) {
-            const chatGPTProvider = new ChatGPTProvider(accessToken);
-            initActionButton('get-complexity-btn', 'analyze', chatGPTProvider);
-            initActionButton('fix-code-btn', 'fix', chatGPTProvider);
-            initCopyButton();
-            initClearButton();
-            elements['getComplexityBtn'] && elements['getComplexityBtn'].classList.remove('hidden');
-            elements['fixCodeBtn'] && elements['fixCodeBtn'].classList.remove('hidden');
+        // Get OpenRouter API key from storage
+        const data = await chrome.storage.local.get('openRouterApiKey');
+        if (!data.openRouterApiKey) {
+            displayApiKeyMessage();
+            return;
         }
-        else {
-            displayLoginMessage();
+
+        // Verify API key is not empty string
+        if (data.openRouterApiKey.trim() === '') {
+            displayApiKeyMessage();
+            return;
         }
-    }
-    catch (error) {
+
+        const openRouterProvider = new OpenRouterProvider(data.openRouterApiKey);
+        initActionButton('get-complexity-btn', 'analyze', openRouterProvider);
+        initActionButton('fix-code-btn', 'fix', openRouterProvider);
+        initCopyButton();
+        initClearButton();
+        elements['getComplexityBtn']?.classList.remove('hidden');
+        elements['fixCodeBtn']?.classList.remove('hidden');
+    } catch (error) {
         handleError(error as Error);
     }
 }
 
+function displayApiKeyMessage(): void {
+    elements['loginBtn']?.classList.remove('hidden');
+    if (infoMessage) {
+        infoMessage.textContent = 'Please add your OpenRouter API key in settings';
+    }
+    disableAllButtons(true);
+}
+
 function initCopyButton(): void {
     const copyButton = elements['copyCodeBtn'];
     if (!copyButton) return;
@@ -348,9 +333,9 @@ chrome.runtime.onMessage.addListener((message) => {
 });
 
 /* Utility functions */
-function getFromStorage(key: string) {
+function getFromStorage(key: string): Promise<string> {
     return new Promise((resolve) => {
-        chrome.storage.local.get(key, (data) => resolve(data[key]));
+        chrome.storage.local.get(key, (data) => resolve(data[key] || ''));
     });
 }
 
diff --git a/src/popup/settings.html b/src/popup/settings.html
@@ -34,6 +34,16 @@
     <button id="show-rating-btn" class="material-button settings-btn">
         <span id="show-rating-icon"> </span> Show Rating
     </button>
+    <div class="settings-section">
+        <h3>OpenRouter API Key</h3>
+        <div class="api-key-container">
+            <input type="password" id="api-key-input" placeholder="Enter your OpenRouter API key">
+            <button id="save-api-key-btn" class="material-button">Save</button>
+        </div>
+        <p id="api-key-message"></p>
+        <p class="help-text">Get your API key from <a href="https://openrouter.ai/keys"
+                target="_blank">openrouter.ai/keys</a></p>
+    </div>
     <div id="review">
         Leave us a
         <a target="_blank"
diff --git a/src/popup/settings.ts b/src/popup/settings.ts
