README.md

Latest commit

History

History
230 lines (157 loc) · 5.97 KB

README.md

File metadata and controls

230 lines (157 loc) · 5.97 KB
Raw

CodeTranslateAI 🚀

CodeTranslateAI Logo

Seamless On-Page Code Translation, Powered by AI

CodeTranslateAI is a powerful browser extension that allows you to translate code snippets on any webpage in real-time. Simply select a block of code, choose your target language, and get an AI-powered translation instantly.

Download for ChromeDownload for Edge

Choose your browser and click the button above to download and install CodeTranslateAI instantly!

✨ Features in Action

See CodeTranslateAI work seamlessly on any webpage. Select code, and the translated version appears right beside it in a clean, tabbed interface with syntax highlighting.

CodeTranslateAI in action

CodeTranslateAI in action

CodeTranslateAI in action

🔧 Tech Stack

  • Frontend:
    • Modular JavaScript (ES6+)
    • esbuild & dotenv (for bundling and environment variables)
    • HTML5 & CSS3
    • Chrome Extension APIs (storage, activeTab)
    • Shadow DOM for style isolation.
  • Backend:
    • Cloudflare Workers
    • TypeScript
    • Wrangler CLI
    • Google Gemini API

📚 Getting Started & Installation Guide

To get a local copy up and running, follow these simple steps.

Prerequisites

You must have Node.js and npm installed on your machine.

⚙️ Part 1: Backend Setup (Cloudflare Worker)

  1. Clone the Repository

    git clone https://github.com/dineshsutihar/CodeTranslateAI.git
cd CodeTranslateAI/backend

  2. Install Dependencies

    npm install

  3. Login to Cloudflare

    npx wrangler login

  4. Get a Gemini API Key

  5. Set the Secret Key

    • Run the following command and paste your Gemini API key when prompted.
    npx wrangler secret put GEMINI_API_KEY

  6. Deploy the Worker

    • Deploy the backend to make it live.
    npx wrangler deploy
    • After deployment, copy the URL that Wrangler provides.

🖥️ Part 2: Frontend Setup (Chrome Extension)

  1. Navigate to the Frontend Directory

    cd ../frontend

  2. Install Dependencies

    npm install

  3. Configure the Backend URL

    • In the frontend folder, create a new file named .env.
    • Add the Cloudflare Worker URL you copied in the previous step to this file:
    # .env file
BACKEND_URL="https://your-worker-url.workers.dev"

  4. Create the Build Configuration

    • In the frontend folder, create a file named build.js and add the following content. This file tells our build script how to use the .env variable.
    // build.jsimportesbuildfrom"esbuild";import"dotenv/config";constdefine={};for(constkinprocess.env){define[`process.env.${k}`]=JSON.stringify(process.env[k]);}esbuild.build({entryPoints: ["scripts/content.js","background.js"],bundle: true,outdir: "dist",define: define,}).catch(()=>process.exit(1));

  5. Build the Extension

    • Run the build command to bundle your scripts and inject the environment variable.
    npm run build

    This will create a dist folder containing your final content.js and background.js files.

  6. Load the Extension in Chrome

    • Open Google Chrome and navigate to chrome://extensions.
    • Enable "Developer mode".
    • Click the "Load unpacked" button.
    • Select your Chrome extension folder (the frontend folder that contains manifest.json).

The CodeTranslateAI icon should now appear in your Chrome toolbar!

💻 Development Workflow

  1. Make any changes to your JavaScript files in the scripts/ folder or background.js.
  2. Run the build command in your terminal: 
    npm run build
  3. Go to chrome://extensions and click the reload button for the CodeTranslateAI extension.

📖 How to Use

  1. Click the extension icon in the Chrome toolbar.
  2. Select your desired target language from the dropdown menu.
  3. Click the "Enable Code Selector" button.
  4. Your cursor will change to a crosshair. Click on any code block on a webpage.
  5. A "Translating..." message will appear, followed by the translated code in a new UI.

🐛 Debugging the Backend

If you encounter errors, check the live logs from your Cloudflare Worker.

  1. Navigate to Backend Directory. 
    cd ./backend
  2. Run the Tail Command: 
    npx wrangler tail
  3. Trigger the Error by using the extension in your browser and check the terminal for error messages.

⚖️ License

Distributed under the MIT License.

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
README.md
Latest commit
History
History
230 lines (157 loc) · 5.97 KB
README.md
File metadata and controls
230 lines (157 loc) · 5.97 KB
Raw
CodeTranslateAI 🚀
CodeTranslateAI Logo
Seamless On-Page Code Translation, Powered by AI

CodeTranslateAI is a powerful browser extension that allows you to translate code snippets on any webpage in real-time. Simply select a block of code, choose your target language, and get an AI-powered translation instantly.

Download for ChromeDownload for Edge

Choose your browser and click the button above to download and install CodeTranslateAI instantly!

✨ Features in Action
See CodeTranslateAI work seamlessly on any webpage. Select code, and the translated version appears right beside it in a clean, tabbed interface with syntax highlighting.
CodeTranslateAI in action
CodeTranslateAI in action
CodeTranslateAI in action
🔧 Tech Stack
  • Frontend:
    • Modular JavaScript (ES6+)
    • esbuild & dotenv (for bundling and environment variables)
    • HTML5 & CSS3
    • Chrome Extension APIs (storage, activeTab)
    • Shadow DOM for style isolation.
  • Backend:
    • Cloudflare Workers
    • TypeScript
    • Wrangler CLI
    • Google Gemini API
📚 Getting Started & Installation Guide
To get a local copy up and running, follow these simple steps.
Prerequisites
You must have Node.js and npm installed on your machine.
⚙️ Part 1: Backend Setup (Cloudflare Worker)
  1. Clone the Repository
    git clone https://github.com/dineshsutihar/CodeTranslateAI.git
cd CodeTranslateAI/backend
  2. Install Dependencies
    npm install
  3. Login to Cloudflare
    npx wrangler login
  4. Get a Gemini API Key
  5. Set the Secret Key
    • Run the following command and paste your Gemini API key when prompted.
    npx wrangler secret put GEMINI_API_KEY
  6. Deploy the Worker
    • Deploy the backend to make it live.
    npx wrangler deploy
    • After deployment, copy the URL that Wrangler provides.
🖥️ Part 2: Frontend Setup (Chrome Extension)
  1. Navigate to the Frontend Directory
    cd ../frontend
  2. Install Dependencies
    npm install
  3. Configure the Backend URL
    • In the frontend folder, create a new file named .env.
    • Add the Cloudflare Worker URL you copied in the previous step to this file:
    # .env file
BACKEND_URL="https://your-worker-url.workers.dev"

  4. Create the Build Configuration
    • In the frontend folder, create a file named build.js and add the following content. This file tells our build script how to use the .env variable.
    // build.jsimportesbuildfrom"esbuild";import"dotenv/config";constdefine={};for(constkinprocess.env){define[`process.env.${k}`]=JSON.stringify(process.env[k]);}esbuild.build({entryPoints: ["scripts/content.js","background.js"],bundle: true,outdir: "dist",define: define,}).catch(()=>process.exit(1));
  5. Build the Extension
    • Run the build command to bundle your scripts and inject the environment variable.
    npm run build
    This will create a dist folder containing your final content.js and background.js files.
  6. Load the Extension in Chrome
    • Open Google Chrome and navigate to chrome://extensions.
    • Enable "Developer mode".
    • Click the "Load unpacked" button.
    • Select your Chrome extension folder (the frontend folder that contains manifest.json).
The CodeTranslateAI icon should now appear in your Chrome toolbar!
💻 Development Workflow
  1. Make any changes to your JavaScript files in the scripts/ folder or background.js.
  2. Run the build command in your terminal:

    npm run build
  3. Go to chrome://extensions and click the reload button for the CodeTranslateAI extension.
📖 How to Use
  1. Click the extension icon in the Chrome toolbar.
  2. Select your desired target language from the dropdown menu.
  3. Click the "Enable Code Selector" button.
  4. Your cursor will change to a crosshair. Click on any code block on a webpage.
  5. A "Translating..." message will appear, followed by the translated code in a new UI.
🐛 Debugging the Backend
If you encounter errors, check the live logs from your Cloudflare Worker.
  1. Navigate to Backend Directory.

    cd ./backend
  2. Run the Tail Command:

    npx wrangler tail
  3. Trigger the Error by using the extension in your browser and check the terminal for error messages.
⚖️ License
Distributed under the MIT License.

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
README.md
Latest commit
History
History
230 lines (157 loc) · 5.97 KB
README.md
File metadata and controls
230 lines (157 loc) · 5.97 KB
Raw
CodeTranslateAI 🚀
CodeTranslateAI Logo
Seamless On-Page Code Translation, Powered by AI

CodeTranslateAI is a powerful browser extension that allows you to translate code snippets on any webpage in real-time. Simply select a block of code, choose your target language, and get an AI-powered translation instantly.

Download for ChromeDownload for Edge

Choose your browser and click the button above to download and install CodeTranslateAI instantly!

✨ Features in Action
See CodeTranslateAI work seamlessly on any webpage. Select code, and the translated version appears right beside it in a clean, tabbed interface with syntax highlighting.
CodeTranslateAI in action
CodeTranslateAI in action
CodeTranslateAI in action
🔧 Tech Stack
  • Frontend:
    • Modular JavaScript (ES6+)
    • esbuild & dotenv (for bundling and environment variables)
    • HTML5 & CSS3
    • Chrome Extension APIs (storage, activeTab)
    • Shadow DOM for style isolation.
  • Backend:
    • Cloudflare Workers
    • TypeScript
    • Wrangler CLI
    • Google Gemini API
📚 Getting Started & Installation Guide
To get a local copy up and running, follow these simple steps.
Prerequisites
You must have Node.js and npm installed on your machine.
⚙️ Part 1: Backend Setup (Cloudflare Worker)
  1. Clone the Repository
    git clone https://github.com/dineshsutihar/CodeTranslateAI.git
cd CodeTranslateAI/backend
  2. Install Dependencies
    npm install
  3. Login to Cloudflare
    npx wrangler login
  4. Get a Gemini API Key
  5. Set the Secret Key
    • Run the following command and paste your Gemini API key when prompted.
    npx wrangler secret put GEMINI_API_KEY
  6. Deploy the Worker
    • Deploy the backend to make it live.
    npx wrangler deploy
    • After deployment, copy the URL that Wrangler provides.
🖥️ Part 2: Frontend Setup (Chrome Extension)
  1. Navigate to the Frontend Directory
    cd ../frontend
  2. Install Dependencies
    npm install
  3. Configure the Backend URL
    • In the frontend folder, create a new file named .env.
    • Add the Cloudflare Worker URL you copied in the previous step to this file:
    # .env file
BACKEND_URL="https://your-worker-url.workers.dev"

  4. Create the Build Configuration
    • In the frontend folder, create a file named build.js and add the following content. This file tells our build script how to use the .env variable.
    // build.jsimportesbuildfrom"esbuild";import"dotenv/config";constdefine={};for(constkinprocess.env){define[`process.env.${k}`]=JSON.stringify(process.env[k]);}esbuild.build({entryPoints: ["scripts/content.js","background.js"],bundle: true,outdir: "dist",define: define,}).catch(()=>process.exit(1));
  5. Build the Extension
    • Run the build command to bundle your scripts and inject the environment variable.
    npm run build
    This will create a dist folder containing your final content.js and background.js files.
  6. Load the Extension in Chrome
    • Open Google Chrome and navigate to chrome://extensions.
    • Enable "Developer mode".
    • Click the "Load unpacked" button.
    • Select your Chrome extension folder (the frontend folder that contains manifest.json).
The CodeTranslateAI icon should now appear in your Chrome toolbar!
💻 Development Workflow
  1. Make any changes to your JavaScript files in the scripts/ folder or background.js.
  2. Run the build command in your terminal:

    npm run build
  3. Go to chrome://extensions and click the reload button for the CodeTranslateAI extension.
📖 How to Use
  1. Click the extension icon in the Chrome toolbar.
  2. Select your desired target language from the dropdown menu.
  3. Click the "Enable Code Selector" button.
  4. Your cursor will change to a crosshair. Click on any code block on a webpage.
  5. A "Translating..." message will appear, followed by the translated code in a new UI.
🐛 Debugging the Backend
If you encounter errors, check the live logs from your Cloudflare Worker.
  1. Navigate to Backend Directory.

    cd ./backend
  2. Run the Tail Command:

    npx wrangler tail
  3. Trigger the Error by using the extension in your browser and check the terminal for error messages.
⚖️ License
Distributed under the MIT License.

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
README.md
Latest commit
History
History
230 lines (157 loc) · 5.97 KB
README.md
File metadata and controls
230 lines (157 loc) · 5.97 KB
Raw
CodeTranslateAI 🚀
CodeTranslateAI Logo
Seamless On-Page Code Translation, Powered by AI

CodeTranslateAI is a powerful browser extension that allows you to translate code snippets on any webpage in real-time. Simply select a block of code, choose your target language, and get an AI-powered translation instantly.

Download for ChromeDownload for Edge

Choose your browser and click the button above to download and install CodeTranslateAI instantly!

✨ Features in Action
See CodeTranslateAI work seamlessly on any webpage. Select code, and the translated version appears right beside it in a clean, tabbed interface with syntax highlighting.
CodeTranslateAI in action
CodeTranslateAI in action
CodeTranslateAI in action
🔧 Tech Stack
  • Frontend:
    • Modular JavaScript (ES6+)
    • esbuild & dotenv (for bundling and environment variables)
    • HTML5 & CSS3
    • Chrome Extension APIs (storage, activeTab)
    • Shadow DOM for style isolation.
  • Backend:
    • Cloudflare Workers
    • TypeScript
    • Wrangler CLI
    • Google Gemini API
📚 Getting Started & Installation Guide
To get a local copy up and running, follow these simple steps.
Prerequisites
You must have Node.js and npm installed on your machine.
⚙️ Part 1: Backend Setup (Cloudflare Worker)
  1. Clone the Repository
    git clone https://github.com/dineshsutihar/CodeTranslateAI.git
cd CodeTranslateAI/backend
  2. Install Dependencies
    npm install
  3. Login to Cloudflare
    npx wrangler login
  4. Get a Gemini API Key
  5. Set the Secret Key
    • Run the following command and paste your Gemini API key when prompted.
    npx wrangler secret put GEMINI_API_KEY
  6. Deploy the Worker
    • Deploy the backend to make it live.
    npx wrangler deploy
    • After deployment, copy the URL that Wrangler provides.
🖥️ Part 2: Frontend Setup (Chrome Extension)
  1. Navigate to the Frontend Directory
    cd ../frontend
  2. Install Dependencies
    npm install
  3. Configure the Backend URL
    • In the frontend folder, create a new file named .env.
    • Add the Cloudflare Worker URL you copied in the previous step to this file:
    # .env file
BACKEND_URL="https://your-worker-url.workers.dev"

  4. Create the Build Configuration
    • In the frontend folder, create a file named build.js and add the following content. This file tells our build script how to use the .env variable.
    // build.jsimportesbuildfrom"esbuild";import"dotenv/config";constdefine={};for(constkinprocess.env){define[`process.env.${k}`]=JSON.stringify(process.env[k]);}esbuild.build({entryPoints: ["scripts/content.js","background.js"],bundle: true,outdir: "dist",define: define,}).catch(()=>process.exit(1));
  5. Build the Extension
    • Run the build command to bundle your scripts and inject the environment variable.
    npm run build
    This will create a dist folder containing your final content.js and background.js files.
  6. Load the Extension in Chrome
    • Open Google Chrome and navigate to chrome://extensions.
    • Enable "Developer mode".
    • Click the "Load unpacked" button.
    • Select your Chrome extension folder (the frontend folder that contains manifest.json).
The CodeTranslateAI icon should now appear in your Chrome toolbar!
💻 Development Workflow
  1. Make any changes to your JavaScript files in the scripts/ folder or background.js.
  2. Run the build command in your terminal:

    npm run build
  3. Go to chrome://extensions and click the reload button for the CodeTranslateAI extension.
📖 How to Use
  1. Click the extension icon in the Chrome toolbar.
  2. Select your desired target language from the dropdown menu.
  3. Click the "Enable Code Selector" button.
  4. Your cursor will change to a crosshair. Click on any code block on a webpage.
  5. A "Translating..." message will appear, followed by the translated code in a new UI.
🐛 Debugging the Backend
If you encounter errors, check the live logs from your Cloudflare Worker.
  1. Navigate to Backend Directory.

    cd ./backend
  2. Run the Tail Command:

    npx wrangler tail
  3. Trigger the Error by using the extension in your browser and check the terminal for error messages.
⚖️ License
Distributed under the MIT License.

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
README.md
Latest commit
History
History
230 lines (157 loc) · 5.97 KB
README.md
File metadata and controls
230 lines (157 loc) · 5.97 KB
Raw
CodeTranslateAI 🚀
CodeTranslateAI Logo
Seamless On-Page Code Translation, Powered by AI

CodeTranslateAI is a powerful browser extension that allows you to translate code snippets on any webpage in real-time. Simply select a block of code, choose your target language, and get an AI-powered translation instantly.

Download for ChromeDownload for Edge

Choose your browser and click the button above to download and install CodeTranslateAI instantly!

✨ Features in Action
See CodeTranslateAI work seamlessly on any webpage. Select code, and the translated version appears right beside it in a clean, tabbed interface with syntax highlighting.
CodeTranslateAI in action
CodeTranslateAI in action
CodeTranslateAI in action
🔧 Tech Stack
  • Frontend:
    • Modular JavaScript (ES6+)
    • esbuild & dotenv (for bundling and environment variables)
    • HTML5 & CSS3
    • Chrome Extension APIs (storage, activeTab)
    • Shadow DOM for style isolation.
  • Backend:
    • Cloudflare Workers
    • TypeScript
    • Wrangler CLI
    • Google Gemini API
📚 Getting Started & Installation Guide
To get a local copy up and running, follow these simple steps.
Prerequisites
You must have Node.js and npm installed on your machine.
⚙️ Part 1: Backend Setup (Cloudflare Worker)
  1. Clone the Repository
    git clone https://github.com/dineshsutihar/CodeTranslateAI.git
cd CodeTranslateAI/backend
  2. Install Dependencies
    npm install
  3. Login to Cloudflare
    npx wrangler login
  4. Get a Gemini API Key
  5. Set the Secret Key
    • Run the following command and paste your Gemini API key when prompted.
    npx wrangler secret put GEMINI_API_KEY
  6. Deploy the Worker
    • Deploy the backend to make it live.
    npx wrangler deploy
    • After deployment, copy the URL that Wrangler provides.
🖥️ Part 2: Frontend Setup (Chrome Extension)
  1. Navigate to the Frontend Directory
    cd ../frontend
  2. Install Dependencies
    npm install
  3. Configure the Backend URL
    • In the frontend folder, create a new file named .env.
    • Add the Cloudflare Worker URL you copied in the previous step to this file:
    # .env file
BACKEND_URL="https://your-worker-url.workers.dev"

  4. Create the Build Configuration
    • In the frontend folder, create a file named build.js and add the following content. This file tells our build script how to use the .env variable.
    // build.jsimportesbuildfrom"esbuild";import"dotenv/config";constdefine={};for(constkinprocess.env){define[`process.env.${k}`]=JSON.stringify(process.env[k]);}esbuild.build({entryPoints: ["scripts/content.js","background.js"],bundle: true,outdir: "dist",define: define,}).catch(()=>process.exit(1));
  5. Build the Extension
    • Run the build command to bundle your scripts and inject the environment variable.
    npm run build
    This will create a dist folder containing your final content.js and background.js files.
  6. Load the Extension in Chrome
    • Open Google Chrome and navigate to chrome://extensions.
    • Enable "Developer mode".
    • Click the "Load unpacked" button.
    • Select your Chrome extension folder (the frontend folder that contains manifest.json).
The CodeTranslateAI icon should now appear in your Chrome toolbar!
💻 Development Workflow
  1. Make any changes to your JavaScript files in the scripts/ folder or background.js.
  2. Run the build command in your terminal:

    npm run build
  3. Go to chrome://extensions and click the reload button for the CodeTranslateAI extension.
📖 How to Use
  1. Click the extension icon in the Chrome toolbar.
  2. Select your desired target language from the dropdown menu.
  3. Click the "Enable Code Selector" button.
  4. Your cursor will change to a crosshair. Click on any code block on a webpage.
  5. A "Translating..." message will appear, followed by the translated code in a new UI.
🐛 Debugging the Backend
If you encounter errors, check the live logs from your Cloudflare Worker.
  1. Navigate to Backend Directory.

    cd ./backend
  2. Run the Tail Command:

    npx wrangler tail
  3. Trigger the Error by using the extension in your browser and check the terminal for error messages.
⚖️ License
Distributed under the MIT License.

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
README.md
Latest commit
History
History
230 lines (157 loc) · 5.97 KB
README.md
File metadata and controls
230 lines (157 loc) · 5.97 KB
Raw
CodeTranslateAI 🚀
CodeTranslateAI Logo
Seamless On-Page Code Translation, Powered by AI

CodeTranslateAI is a powerful browser extension that allows you to translate code snippets on any webpage in real-time. Simply select a block of code, choose your target language, and get an AI-powered translation instantly.

Download for ChromeDownload for Edge

Choose your browser and click the button above to download and install CodeTranslateAI instantly!

✨ Features in Action
See CodeTranslateAI work seamlessly on any webpage. Select code, and the translated version appears right beside it in a clean, tabbed interface with syntax highlighting.
CodeTranslateAI in action
CodeTranslateAI in action
CodeTranslateAI in action
🔧 Tech Stack
  • Frontend:
    • Modular JavaScript (ES6+)
    • esbuild & dotenv (for bundling and environment variables)
    • HTML5 & CSS3
    • Chrome Extension APIs (storage, activeTab)
    • Shadow DOM for style isolation.
  • Backend:
    • Cloudflare Workers
    • TypeScript
    • Wrangler CLI
    • Google Gemini API
📚 Getting Started & Installation Guide
To get a local copy up and running, follow these simple steps.
Prerequisites
You must have Node.js and npm installed on your machine.
⚙️ Part 1: Backend Setup (Cloudflare Worker)
  1. Clone the Repository
    git clone https://github.com/dineshsutihar/CodeTranslateAI.git
cd CodeTranslateAI/backend
  2. Install Dependencies
    npm install
  3. Login to Cloudflare
    npx wrangler login
  4. Get a Gemini API Key
  5. Set the Secret Key
    • Run the following command and paste your Gemini API key when prompted.
    npx wrangler secret put GEMINI_API_KEY
  6. Deploy the Worker
    • Deploy the backend to make it live.
    npx wrangler deploy
    • After deployment, copy the URL that Wrangler provides.
🖥️ Part 2: Frontend Setup (Chrome Extension)
  1. Navigate to the Frontend Directory
    cd ../frontend
  2. Install Dependencies
    npm install
  3. Configure the Backend URL
    • In the frontend folder, create a new file named .env.
    • Add the Cloudflare Worker URL you copied in the previous step to this file:
    # .env file
BACKEND_URL="https://your-worker-url.workers.dev"

  4. Create the Build Configuration
    • In the frontend folder, create a file named build.js and add the following content. This file tells our build script how to use the .env variable.
    // build.jsimportesbuildfrom"esbuild";import"dotenv/config";constdefine={};for(constkinprocess.env){define[`process.env.${k}`]=JSON.stringify(process.env[k]);}esbuild.build({entryPoints: ["scripts/content.js","background.js"],bundle: true,outdir: "dist",define: define,}).catch(()=>process.exit(1));
  5. Build the Extension
    • Run the build command to bundle your scripts and inject the environment variable.
    npm run build
    This will create a dist folder containing your final content.js and background.js files.
  6. Load the Extension in Chrome
    • Open Google Chrome and navigate to chrome://extensions.
    • Enable "Developer mode".
    • Click the "Load unpacked" button.
    • Select your Chrome extension folder (the frontend folder that contains manifest.json).
The CodeTranslateAI icon should now appear in your Chrome toolbar!
💻 Development Workflow
  1. Make any changes to your JavaScript files in the scripts/ folder or background.js.
  2. Run the build command in your terminal:

    npm run build
  3. Go to chrome://extensions and click the reload button for the CodeTranslateAI extension.
📖 How to Use
  1. Click the extension icon in the Chrome toolbar.
  2. Select your desired target language from the dropdown menu.
  3. Click the "Enable Code Selector" button.
  4. Your cursor will change to a crosshair. Click on any code block on a webpage.
  5. A "Translating..." message will appear, followed by the translated code in a new UI.
🐛 Debugging the Backend
If you encounter errors, check the live logs from your Cloudflare Worker.
  1. Navigate to Backend Directory.

    cd ./backend
  2. Run the Tail Command:

    npx wrangler tail
  3. Trigger the Error by using the extension in your browser and check the terminal for error messages.
⚖️ License
Distributed under the MIT License.

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
README.md
Latest commit
History
History
230 lines (157 loc) · 5.97 KB
README.md
File metadata and controls
230 lines (157 loc) · 5.97 KB
Raw
CodeTranslateAI 🚀
CodeTranslateAI Logo
Seamless On-Page Code Translation, Powered by AI

CodeTranslateAI is a powerful browser extension that allows you to translate code snippets on any webpage in real-time. Simply select a block of code, choose your target language, and get an AI-powered translation instantly.

Download for ChromeDownload for Edge

Choose your browser and click the button above to download and install CodeTranslateAI instantly!

✨ Features in Action
See CodeTranslateAI work seamlessly on any webpage. Select code, and the translated version appears right beside it in a clean, tabbed interface with syntax highlighting.
CodeTranslateAI in action
CodeTranslateAI in action
CodeTranslateAI in action
🔧 Tech Stack
  • Frontend:
    • Modular JavaScript (ES6+)
    • esbuild & dotenv (for bundling and environment variables)
    • HTML5 & CSS3
    • Chrome Extension APIs (storage, activeTab)
    • Shadow DOM for style isolation.
  • Backend:
    • Cloudflare Workers
    • TypeScript
    • Wrangler CLI
    • Google Gemini API
📚 Getting Started & Installation Guide
To get a local copy up and running, follow these simple steps.
Prerequisites
You must have Node.js and npm installed on your machine.
⚙️ Part 1: Backend Setup (Cloudflare Worker)
  1. Clone the Repository
    git clone https://github.com/dineshsutihar/CodeTranslateAI.git
cd CodeTranslateAI/backend
  2. Install Dependencies
    npm install
  3. Login to Cloudflare
    npx wrangler login
  4. Get a Gemini API Key
  5. Set the Secret Key
    • Run the following command and paste your Gemini API key when prompted.
    npx wrangler secret put GEMINI_API_KEY
  6. Deploy the Worker
    • Deploy the backend to make it live.
    npx wrangler deploy
    • After deployment, copy the URL that Wrangler provides.
🖥️ Part 2: Frontend Setup (Chrome Extension)
  1. Navigate to the Frontend Directory
    cd ../frontend
  2. Install Dependencies
    npm install
  3. Configure the Backend URL
    • In the frontend folder, create a new file named .env.
    • Add the Cloudflare Worker URL you copied in the previous step to this file:
    # .env file
BACKEND_URL="https://your-worker-url.workers.dev"

  4. Create the Build Configuration
    • In the frontend folder, create a file named build.js and add the following content. This file tells our build script how to use the .env variable.
    // build.jsimportesbuildfrom"esbuild";import"dotenv/config";constdefine={};for(constkinprocess.env){define[`process.env.${k}`]=JSON.stringify(process.env[k]);}esbuild.build({entryPoints: ["scripts/content.js","background.js"],bundle: true,outdir: "dist",define: define,}).catch(()=>process.exit(1));
  5. Build the Extension
    • Run the build command to bundle your scripts and inject the environment variable.
    npm run build
    This will create a dist folder containing your final content.js and background.js files.
  6. Load the Extension in Chrome
    • Open Google Chrome and navigate to chrome://extensions.
    • Enable "Developer mode".
    • Click the "Load unpacked" button.
    • Select your Chrome extension folder (the frontend folder that contains manifest.json).
The CodeTranslateAI icon should now appear in your Chrome toolbar!
💻 Development Workflow
  1. Make any changes to your JavaScript files in the scripts/ folder or background.js.
  2. Run the build command in your terminal:

    npm run build
  3. Go to chrome://extensions and click the reload button for the CodeTranslateAI extension.
📖 How to Use
  1. Click the extension icon in the Chrome toolbar.
  2. Select your desired target language from the dropdown menu.
  3. Click the "Enable Code Selector" button.
  4. Your cursor will change to a crosshair. Click on any code block on a webpage.
  5. A "Translating..." message will appear, followed by the translated code in a new UI.
🐛 Debugging the Backend
If you encounter errors, check the live logs from your Cloudflare Worker.
  1. Navigate to Backend Directory.

    cd ./backend
  2. Run the Tail Command:

    npx wrangler tail
  3. Trigger the Error by using the extension in your browser and check the terminal for error messages.
⚖️ License
Distributed under the MIT License.

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
README.md
Latest commit
History
History
230 lines (157 loc) · 5.97 KB
README.md
File metadata and controls
230 lines (157 loc) · 5.97 KB
Raw
CodeTranslateAI 🚀
CodeTranslateAI Logo
Seamless On-Page Code Translation, Powered by AI

CodeTranslateAI is a powerful browser extension that allows you to translate code snippets on any webpage in real-time. Simply select a block of code, choose your target language, and get an AI-powered translation instantly.

Download for ChromeDownload for Edge

Choose your browser and click the button above to download and install CodeTranslateAI instantly!

✨ Features in Action
See CodeTranslateAI work seamlessly on any webpage. Select code, and the translated version appears right beside it in a clean, tabbed interface with syntax highlighting.
CodeTranslateAI in action
CodeTranslateAI in action
CodeTranslateAI in action
🔧 Tech Stack
  • Frontend:
    • Modular JavaScript (ES6+)
    • esbuild & dotenv (for bundling and environment variables)
    • HTML5 & CSS3
    • Chrome Extension APIs (storage, activeTab)
    • Shadow DOM for style isolation.
  • Backend:
    • Cloudflare Workers
    • TypeScript
    • Wrangler CLI
    • Google Gemini API
📚 Getting Started & Installation Guide
To get a local copy up and running, follow these simple steps.
Prerequisites
You must have Node.js and npm installed on your machine.
⚙️ Part 1: Backend Setup (Cloudflare Worker)
  1. Clone the Repository
    git clone https://github.com/dineshsutihar/CodeTranslateAI.git
cd CodeTranslateAI/backend
  2. Install Dependencies
    npm install
  3. Login to Cloudflare
    npx wrangler login
  4. Get a Gemini API Key
  5. Set the Secret Key
    • Run the following command and paste your Gemini API key when prompted.
    npx wrangler secret put GEMINI_API_KEY
  6. Deploy the Worker
    • Deploy the backend to make it live.
    npx wrangler deploy
    • After deployment, copy the URL that Wrangler provides.
🖥️ Part 2: Frontend Setup (Chrome Extension)
  1. Navigate to the Frontend Directory
    cd ../frontend
  2. Install Dependencies
    npm install
  3. Configure the Backend URL
    • In the frontend folder, create a new file named .env.
    • Add the Cloudflare Worker URL you copied in the previous step to this file:
    # .env file
BACKEND_URL="https://your-worker-url.workers.dev"

  4. Create the Build Configuration
    • In the frontend folder, create a file named build.js and add the following content. This file tells our build script how to use the .env variable.
    // build.jsimportesbuildfrom"esbuild";import"dotenv/config";constdefine={};for(constkinprocess.env){define[`process.env.${k}`]=JSON.stringify(process.env[k]);}esbuild.build({entryPoints: ["scripts/content.js","background.js"],bundle: true,outdir: "dist",define: define,}).catch(()=>process.exit(1));
  5. Build the Extension
    • Run the build command to bundle your scripts and inject the environment variable.
    npm run build
    This will create a dist folder containing your final content.js and background.js files.
  6. Load the Extension in Chrome
    • Open Google Chrome and navigate to chrome://extensions.
    • Enable "Developer mode".
    • Click the "Load unpacked" button.
    • Select your Chrome extension folder (the frontend folder that contains manifest.json).
The CodeTranslateAI icon should now appear in your Chrome toolbar!
💻 Development Workflow
  1. Make any changes to your JavaScript files in the scripts/ folder or background.js.
  2. Run the build command in your terminal:

    npm run build
  3. Go to chrome://extensions and click the reload button for the CodeTranslateAI extension.
📖 How to Use
  1. Click the extension icon in the Chrome toolbar.
  2. Select your desired target language from the dropdown menu.
  3. Click the "Enable Code Selector" button.
  4. Your cursor will change to a crosshair. Click on any code block on a webpage.
  5. A "Translating..." message will appear, followed by the translated code in a new UI.
🐛 Debugging the Backend
If you encounter errors, check the live logs from your Cloudflare Worker.
  1. Navigate to Backend Directory.

    cd ./backend
  2. Run the Tail Command:

    npx wrangler tail
  3. Trigger the Error by using the extension in your browser and check the terminal for error messages.
⚖️ License
Distributed under the MIT License.