add: frontend extension work done

Author: dineshsutihar

frontend/background.js

@@ -0,0 +1,41 @@
+
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    if (request.type === "TRANSLATE_CODE") {
+        const BACKEND_URL = "https://backend.dineshsutihar123.workers.dev";
+
+        chrome.storage.sync.get(['targetLanguage'], (result) => {
+            const targetLanguage = result.targetLanguage || 'Java';
+            fetch(BACKEND_URL, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    code: request.code,
+                    targetLanguage: targetLanguage,
+                }),
+            })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`Network response was not ok: ${response.statusText}`);
+                    }
+                    return response.json();
+                })
+                .then(data => {
+
+                    if (data.error) {
+                        sendResponse({ error: data.error });
+                    } else {
+                        sendResponse({ translation: data.translation });
+                    }
+                })
+                .catch(error => {
+
+                    console.error("Error calling backend:", error);
+                    sendResponse({ error: `Failed to connect to the translation service: ${error.message}` });
+                });
+        });
+
+        return true;
+    }
+});

frontend/content.js

@@ -0,0 +1,79 @@
+let isPickerEnabled = false;
+let hoveredElement = null;
+
+// The main listener for messages from the popup
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    if (message.type === "ENABLE_PICKER") {
+        if (!isPickerEnabled) enablePicker();
+    }
+});
+
+function enablePicker() {
+    isPickerEnabled = true;
+    document.body.style.cursor = 'crosshair';
+    document.addEventListener('mouseover', onMouseOver);
+    document.addEventListener('mouseout', onMouseOut);
+    document.addEventListener('click', onClick, true);
+}
+
+function disablePicker() {
+    isPickerEnabled = false;
+    document.body.style.cursor = 'default';
+    if (hoveredElement) hoveredElement.classList.remove('translator-highlight');
+    document.removeEventListener('mouseover', onMouseOver);
+    document.removeEventListener('mouseout', onMouseOut);
+    document.removeEventListener('click', onClick, true);
+}
+
+function onMouseOver(e) {
+    hoveredElement = e.target;
+    hoveredElement.classList.add('translator-highlight');
+}
+
+function onMouseOut(e) {
+    e.target.classList.remove('translator-highlight');
+    hoveredElement = null;
+}
+
+function onClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const clickedElement = e.target;
+    const selectedCode = clickedElement.textContent;
+    disablePicker();
+
+    const loadingDiv = document.createElement('div');
+    loadingDiv.className = 'translator-loading';
+    loadingDiv.textContent = 'Translating...';
+    clickedElement.parentNode.insertBefore(loadingDiv, clickedElement.nextSibling);
+
+    chrome.runtime.sendMessage({ type: "TRANSLATE_CODE", code: selectedCode }, (response) => {
+        loadingDiv.remove();
+
+        if (response.error) {
+            alert(`Error: ${response.error}`);
+        } else if (response.translation) {
+            injectTranslatedCode(response.translation, clickedElement);
+        }
+    });
+}
+
+function injectTranslatedCode(translatedCode, originalElement) {
+    const container = document.createElement('div');
+    container.className = 'translation-container';
+
+    const header = document.createElement('h4');
+    header.textContent = 'AI-Generated Translation:';
+
+    const pre = document.createElement('pre');
+    const code = document.createElement('code');
+    code.textContent = translatedCode;
+    pre.appendChild(code);
+
+    container.appendChild(header);
+    container.appendChild(pre);
+
+    // Insert the container right after the original element
+    originalElement.parentNode.insertBefore(container, originalElement.nextSibling);
+}

frontend/images/.gitkeep

@@ -0,0 +1,20 @@
+{
+  "manifest_version": 3,
+  "name": "CodeTranslateAI",
+  "version": "0.1.0",
+  "description": "Select code on a page and translate it on the fly.",
+  "permissions": ["activeTab", "scripting", "storage"],
+  "action": {
+    "default_popup": "popup.html"
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"],
+      "css": ["styles.css"]
+    }
+  ],
+  "background": {
+    "service_worker": "background.js"
+  }
+}

frontend/manifest.json

@@ -0,0 +1,24 @@
+const enablePickerBtn = document.getElementById('enable-picker-btn');
+const languageSelect = document.getElementById('language-select');
+
+enablePickerBtn.addEventListener('click', () => {
+    const targetLanguage = languageSelect.value;
+
+    chrome.storage.sync.set({ targetLanguage: targetLanguage });
+
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+        const activeTab = tabs[0];
+        chrome.tabs.sendMessage(activeTab.id, {
+            type: "ENABLE_PICKER"
+        });
+        window.close();
+    });
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+    chrome.storage.sync.get(['targetLanguage'], (result) => {
+        if (result.targetLanguage) {
+            languageSelect.value = result.targetLanguage;
+        }
+    });
+});