🔐 Secure API Key Storage, Throttling, and API Usage Tracking

content.js

@@ -41,39 +41,111 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       setTimeout(() => loadingIndicator.remove(), 2000);
     }
   }
-
-  // Translate paragraph by paragraph
+    // Translate paragraph by paragraph with batch processing
   async function translateParagraphs() {
+    // Create progress indicator
+    const progressIndicator = document.createElement('div');
+    progressIndicator.id = 'translationProgressIndicator';
+    progressIndicator.style.position = 'fixed';
+    progressIndicator.style.bottom = '20px';
+    progressIndicator.style.right = '20px';
+    progressIndicator.style.padding = '10px 15px';
+    progressIndicator.style.backgroundColor = '#1a73e8';
+    progressIndicator.style.color = 'white';
+    progressIndicator.style.borderRadius = '20px';
+    progressIndicator.style.zIndex = '9999';
+    progressIndicator.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';
+    progressIndicator.style.display = 'flex';
+    progressIndicator.style.alignItems = 'center';
+    progressIndicator.style.justifyContent = 'center';
+    progressIndicator.style.fontFamily = 'Arial, sans-serif';
+    progressIndicator.style.transition = 'opacity 0.3s';
+
+    // Add progress bar
+    const progressText = document.createElement('div');
+    progressText.textContent = 'Processing: 0%';
+    progressIndicator.appendChild(progressText);
+
+    document.body.appendChild(progressIndicator);
+
+    // Collect paragraphs to translate
     const paragraphs = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, span, div');
-    let translatedCount = 0;
+    const elementsToTranslate = [];
 
     for (let i = 0; i < paragraphs.length; i++) {
       const element = paragraphs[i];
       if (element.textContent.trim() && 
           element.childNodes.length === 1 && 
           element.childNodes[0].nodeType === Node.TEXT_NODE &&
           !element.classList.contains('hinglish-translated')) {
+        elementsToTranslate.push(element);
+      }
+    }
+
+    // Listen for progress updates
+    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+      if (request.action === 'updateProgress' && request.progress >= 0) {
+        progressText.textContent = `Processing: ${request.progress}%`;
+      } else if (request.action === 'updateProgress' && request.progress === -1) {
+        // Hide progress indicator
+        progressIndicator.style.opacity = '0';
+        setTimeout(() => progressIndicator.remove(), 300);
+      }
+    });
+
+    try {
+      // Process in batches of 5
+      const batchSize = 5;
+      let translatedCount = 0;
+
+      for (let i = 0; i < elementsToTranslate.length; i += batchSize) {
+        const batch = elementsToTranslate.slice(i, i + batchSize);
+        const promises = batch.map(element => {
+          return new Promise(async (resolve) => {
+            try {
+              const response = await chrome.runtime.sendMessage({
+                action: "translateText",
+                text: element.textContent
+              });
+
+              if (response && !response.startsWith("Translation error:")) {
+                element.textContent = response;
+                element.classList.add('hinglish-translated');
+                translatedCount++;
+              }
+            } catch (error) {
+              console.error('Translation error:', error);
+            }
+            resolve();
+          });
+        });
 
-        const originalText = element.textContent;
+        await Promise.all(promises);
 
-        try {
-          const response = await chrome.runtime.sendMessage({
-            action: "translateText",
-            text: originalText
-          });
-
-          if (response && response !== "Please configure your API key first") {
-            element.textContent = response;
-            element.classList.add('hinglish-translated');
-            translatedCount++;
-          }
-        } catch (error) {
-          console.error('Translation error:', error);
-        }
+        // Update progress
+        const progress = Math.min(100, Math.round((i + batchSize) * 100 / elementsToTranslate.length));
+        progressText.textContent = `Processing: ${progress}%`;
       }
+
+      // Complete
+      progressText.textContent = 'Translation Complete!';
+      progressIndicator.style.backgroundColor = '#0b8043';
+      setTimeout(() => {
+        progressIndicator.style.opacity = '0';
+        setTimeout(() => progressIndicator.remove(), 300);
+      }, 2000);
+
+      return translatedCount;
+    } catch (error) {
+      console.error('Batch translation error:', error);
+      progressText.textContent = 'Translation Failed';
+      progressIndicator.style.backgroundColor = '#d93025';
+      setTimeout(() => {
+        progressIndicator.style.opacity = '0';
+        setTimeout(() => progressIndicator.remove(), 300);
+      }, 2000);
+      return 0;
     }
-
-    return translatedCount;
   }
 
   // Translate all text nodes (more aggressive approach)

manifest.json

@@ -19,10 +19,8 @@
     ],
     "host_permissions": [
       "https://api.groq.com/*"
-    ],
-    "background": {
-      "service_worker": "background.js",
-      "type": "module"
+    ],    "background": {
+      "service_worker": "background.js"
     },
     "action": {
         "default_popup": "popup/welcome.html",
@@ -31,13 +29,18 @@
         "32": "icons/icon32.png",
         "48": "icons/icon48.png"
       }
-    },
-    "content_scripts": [
+    },    "content_scripts": [
       {
         "matches": ["<all_urls>"],
         "js": ["content.js"],
         "css": ["styles/content.css"],
         "run_at": "document_idle"
       }
+    ],
+    "web_accessible_resources": [
+      {
+        "resources": ["utils/securityHelper.js", "utils/apiRequestManager.js"],
+        "matches": ["<all_urls>"]
+      }
     ]
   }