No description
  • JavaScript 80.1%
  • CSS 13.4%
  • HTML 6.5%
Find a file
ducvuongpham 0f4ec03fc8
fix: ui
2026-05-22 00:24:21 +09:00
.claude fix: ui 2026-05-22 00:24:21 +09:00
icons feat: update name and icon 2025-12-29 17:06:19 +09:00
src fix: ui 2026-05-22 00:24:21 +09:00
styles fix: ui 2026-05-22 00:24:21 +09:00
CLAUDE.md chore: change translating text 2025-12-31 11:34:10 +09:00
generate-icons.js init 2025-12-29 11:16:28 +09:00
manifest.json feat: gboard input feature 2025-12-31 00:16:27 +09:00
options.html fix: ui 2026-05-22 00:24:21 +09:00
popup.html fix: match the placeholder 2025-12-31 01:13:51 +09:00
README.md init 2025-12-29 11:16:28 +09:00

Translate with Phonetics

A Chrome extension that provides Google Translate functionality with phonetic transcription (romanization/IPA) support - a feature missing from the official Google Translate extension.

Features

  • Phonetic Transcription: Shows romanization/phonetic reading for both source and translated text
  • Popup Translation: Click the extension icon to translate text
  • Text Selection: Select text on any webpage to get instant translation
  • Keyboard Shortcut: Use Ctrl+Shift+T (or Cmd+Shift+T on Mac) to translate selected text
  • Context Menu: Right-click selected text and choose "Translate"
  • Translation History: Access your recent translations
  • Text-to-Speech: Listen to pronunciation of source and translated text
  • Language Auto-Detection: Automatically detects the source language

Supported Languages

  • English, Japanese, Vietnamese, Chinese (Simplified/Traditional), Korean
  • Spanish, French, German, Russian, Portuguese, Italian
  • Arabic, Hindi, Thai
  • And more...

Installation

From Source (Developer Mode)

  1. Clone or download this repository
  2. Open Chrome and navigate to chrome://extensions/
  3. Enable "Developer mode" (toggle in the top right)
  4. Click "Load unpacked"
  5. Select the google_translate folder
  6. The extension icon will appear in your toolbar

Building Icons (Optional)

The extension works without custom icons, but to add them:

  1. Open icons/icon.svg in a design tool or browser
  2. Export as PNG at sizes: 16x16, 32x32, 48x48, 128x128
  3. Save as icon16.png, icon32.png, icon48.png, icon128.png in the icons/ folder
  4. Update manifest.json to include the icon references

Usage

Popup Translation

  1. Click the extension icon in your toolbar
  2. Type or paste text in the input area
  3. Translation with phonetics appears automatically

Text Selection Translation

  1. Select any text on a webpage
  2. A translation popup appears below the selection
  3. View translation and phonetic transcription

Keyboard Shortcut

  1. Select text on any webpage
  2. Press Ctrl+Shift+T (Windows/Linux) or Cmd+Shift+T (Mac)
  3. Translation popup appears

Context Menu

  1. Select text on any webpage
  2. Right-click and choose "Translate [selected text]"

Project Structure

google_translate/
├── manifest.json          # Extension manifest (Manifest V3)
├── popup.html             # Popup UI
├── src/
│   ├── popup.js           # Popup logic
│   ├── background.js      # Service worker
│   ├── content.js         # Content script for page integration
│   └── translate.js       # Translation API wrapper
├── styles/
│   ├── popup.css          # Popup styles
│   └── content.css        # Inline popup styles
├── icons/
│   └── icon.svg           # Base icon (convert to PNG)
└── README.md

API

This extension uses the unofficial Google Translate API endpoint (translate.googleapis.com) which:

  • Provides phonetic transcription (romanization)
  • Supports auto-detection
  • Is free to use but may have rate limits

Permissions

  • activeTab: Access current tab for text selection
  • storage: Save preferences and translation history
  • contextMenus: Add right-click translate option
  • host_permissions: Access Google Translate API

License

MIT License