Skip to content

Commit 4ce3040

Browse files
dineshsutihardineshsutihar
committed
docs: update docs
1 parent e1786d3 commit 4ce3040

File tree

1 file changed

+65
-40
lines changed

1 file changed

+65
-40
lines changed

‎README.md‎

Lines changed: 65 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,21 @@ CodeTranslateAI is a powerful Chrome extension that allows you to translate code
55
## ✨ Key Features
66

77
- **On-the-Fly Translation:** Instantly translate code on platforms like Stack Overflow, Medium, and technical blogs.
8-
- **Secure Backend:** Uses a serverless Cloudflare Worker so your AI API key is never exposed on the frontend.
8+
- **Secure Serverless Backend:** Uses a Cloudflare Worker so your AI API key is never exposed on the frontend.
99
- **Multi-Language Tabs:** Translate the same code block into multiple languages and switch between them easily.
10-
- **Smart Caching:** Translations are cached in your browser for 10 days to reduce API calls and provide instant results for previously translated code.
11-
- **Elegant UI:** A clean, non-intrusive UI that matches the width of the original code block and uses a tabbed layout for multiple translations.
12-
- **Powered by Gemini:** Leverages the power of Google's Gemini AI for high-quality code translations.
10+
- **Smart Caching:** Translations are cached in your browser for 10 days to reduce API calls and provide instant results.
11+
- **Elegant & Isolated UI:** A clean UI that matches the width of the original code block and uses a Shadow DOM to prevent any style conflicts with the host page.
12+
- **Powered by Gemini:** Leverages Google's Gemini AI for high-quality code translations with syntax highlighting.
1313

1414
---
1515

1616
## 🔧 Tech Stack
1717

1818
- **Frontend:**
19-
- Plain JavaScript (ES6+)
19+
- Modular JavaScript (ES6+)
20+
- **esbuild** (for bundling)
2021
- HTML5 & CSS3
21-
- Chrome Extension APIs (`storage`, `runtime`, `scripting`)
22+
- Chrome Extension APIs (`storage`, `activeTab`)
2223
- Shadow DOM for style isolation.
2324
- **Backend:**
2425
- Cloudflare Workers
@@ -34,13 +35,13 @@ To get a local copy up and running, follow these simple steps.
3435

3536
### Prerequisites
3637

37-
You must have Node.js and npm installed on your machine.
38+
You must have **Node.js** and **npm** installed on your machine.
3839

3940
- [Download Node.js](https://nodejs.org/)
4041

4142
### ⚙️ Part 1: Backend Setup (Cloudflare Worker)
4243

43-
1. **Clone the Repository** (or set up your backend folder).
44+
1. **Clone the Repository**
4445

4546
```sh
4647
git clone https://github.com/dineshsutihar/CodeTranslateAI.git
@@ -65,7 +66,9 @@ You must have Node.js and npm installed on your machine.
6566

6667
5. **Set the Secret Key**
6768

68-
- Run the following command and paste your Gemini API key when prompted. This stores it securely on Cloudflare.
69+
- Run the following command and paste your Gemini API key when prompted.
70+
71+
<!-- end list -->
6972

7073
```sh
7174
npx wrangler secret put GEMINI_API_KEY
@@ -75,33 +78,71 @@ You must have Node.js and npm installed on your machine.
7578

7679
- Deploy the backend to make it live.
7780

81+
<!-- end list -->
82+
7883
```sh
7984
npx wrangler deploy
8085
```
8186

82-
- After deployment, **copy the URL** that Wrangler provides. It will look like `https://backend.<your-worker-name>.dev`.
87+
- After deployment, **copy the URL** that Wrangler provides.
8388

8489
### 🖥️ Part 2: Frontend Setup (Chrome Extension)
8590

86-
1. **Configure the Backend URL**
91+
1. **Navigate to the Frontend Directory**
92+
93+
```sh
94+
cd ../frontend
95+
```
96+
97+
2. **Install Dependencies**
98+
99+
```sh
100+
npm install
101+
```
102+
103+
3. **Configure the Backend URL**
87104

88-
- Navigate to your Chrome extension folder (e.g., `my-code-translator`).
89105
- Open the `background.js` file.
90106
- Find the `BACKEND_URL` constant and **paste the Cloudflare Worker URL** you copied in the previous step.
91107

92108
```javascript
93109
// background.js
94-
const BACKEND_URL = "https://backend.<your-worker-name>.dev"; // PASTE YOUR URL HERE
110+
const BACKEND_URL = "https://backend.exampledinesh.workers.dev"; // PASTE YOUR URL HERE
111+
```
112+
113+
4. **Build the Extension**
114+
115+
- You must run the build command to bundle the modular JavaScript files.
116+
117+
<!-- end list -->
118+
119+
```sh
120+
npm run build
95121
```
96122

97-
2. **Load the Extension in Chrome**
123+
This will create a `dist` folder containing the `content.bundle.js` file.
124+
125+
5. **Load the Extension in Chrome**
98126

99127
- Open Google Chrome and navigate to `chrome://extensions`.
100-
- Enable **"Developer mode"** using the toggle in the top-right corner.
128+
- Enable **"Developer mode"**.
101129
- Click the **"Load unpacked"** button.
102-
- Select your Chrome extension folder (the one containing `manifest.json`).
130+
- Select your Chrome extension folder (the `frontend` folder that contains `manifest.json`).
103131

104-
The **CodeTranslateAI** icon should now appear in your Chrome toolbar, and the extension is ready to use\!
132+
The **CodeTranslateAI** icon should now appear in your Chrome toolbar\!
133+
134+
---
135+
136+
## 💻 Development Workflow
137+
138+
When you make changes to the frontend JavaScript files in the `scripts/` folder, you must re-bundle them before you can see the changes.
139+
140+
1. Save your changes in any `.js` file inside the `scripts/` folder.
141+
2. Run the build command in your terminal:
142+
```sh
143+
npm run build
144+
```
145+
3. Go to `chrome://extensions` and click the **reload** button for the CodeTranslateAI extension.
105146

106147
---
107148

@@ -110,40 +151,24 @@ The **CodeTranslateAI** icon should now appear in your Chrome toolbar, and the e
110151
1. Click the extension icon in the Chrome toolbar.
111152
2. Select your desired target language from the dropdown menu.
112153
3. Click the **"Enable Code Selector"** button.
113-
4. Your cursor will change to a crosshair. Hover over any code block on a webpage and click on it.
114-
5. A "Translating..." message will appear, followed by a new UI element containing the translated code.
115-
6. If you translate the same block into another language, a new tab will be added to the UI.
154+
4. Your cursor will change to a crosshair. Click on any code block on a webpage.
155+
5. A "Translating..." message will appear, followed by the translated code in a new UI.
116156

117157
---
118158

119159
## 🐛 Debugging the Backend
120160

121-
If you encounter errors or the translation isn't working, the first step is to check the live logs from your Cloudflare Worker. This allows you to see what's happening on the server in real-time.
122-
123-
1. **Navigate to your Backend Directory**
124-
125-
- Open your terminal and change into the directory where your Cloudflare Worker code is located (e.g., `CodeTranslateAI/backend`).
126-
127-
2. **Run the Tail Command**
128-
129-
- Execute the following command to start streaming the logs:
161+
If you encounter errors, check the live logs from your Cloudflare Worker.
130162

163+
1. **Navigate to your Backend Directory**.
164+
2. **Run the Tail Command**:
131165
```sh
132166
npx wrangler tail
133167
```
134-
135-
- The terminal will connect and say `Connected to [worker-name], waiting for logs...`.
136-
137-
3. **Trigger the Error**
138-
139-
- With the log stream running, go to your browser and use the extension to perform an action that causes an error.
140-
141-
4. **Check the Terminal**
142-
143-
- Look back at your terminal. Any errors or log messages from your worker will appear instantly. Look for lines that start with `(error)`. This will give you the exact reason for the failure, such as an invalid API key or a quota issue.
168+
3. **Trigger the Error** by using the extension in your browser and check the terminal for error messages.
144169

145170
---
146171

147172
## ⚖️ License
148173

149-
Distributed under the MIT License. See `LICENSE.txt` for more information.
174+
Distributed under the MIT License.

0 commit comments

Comments
 (0)