Saar Byrne

slug translate

Slug Translate: My Weekend Hack from Pain Point to Chrome Extension

—

by

Saar
in

GitHub: https://github.com/saarbyrne/slugtranslate
AI Co‑pilot: Guided by ChatGPT

Why I Built It

Late one Friday I was hopping between English and Spanish tabs—copy‑pasting to Google Translate felt tedious. I sketched a quick idea: highlight text, click a “T,” see a translation right there. With almost zero prior extension experience, I teamed up with ChatGPT to fill in the gaps, and by Sunday evening Slug Translate was up and running.

How It Works

  1. Highlight text on any page.
  2. A little “T” button pops up at the end of your selection.
  3. Click it or press Option +A—the overlay appears and auto‑translates your text.
  4. Toggle EN→ES or ES→EN, press Option +D to re‑translate, or Escape to close.
  5. Insert the translated text back, inline, with one more click.

Building It

  • Tooling: Vite + TypeScript for quick builds, Preact for a minimal overlay UI, Manifest V3 for Chrome.
  • AI assistance: I leaned on ChatGPT prompts to craft the content script logic, CSS isolation techniques, and even permission scoping for the Chrome Web Store.
  • Content script:
    • Listens for selectionchange, injects the “T” button.
    • Uses mousedown to capture the highlight before it collapses.
    • Registers Option +A in capture phase to handle keyboard shortcuts reliably.
  • Overlay component:
    • Manages original vs. translated text, language toggle, and auto‑translate on mount.
    • Supports Option +D to re‑trigger translation, Escape to close.

API Choices

  • DeepL prototype: hit free‑tier limits and odd emoji errors.
  • LibreTranslate public: occasional downtime and emoji placeholders.
  • MyMemory API: switched to this free, no‑key endpoint for stable text‑only translations.

Challenges & Lessons

  1. Selection loss: clicking collapsed the highlight. Fix: switch from click to mousedown and store the original Selection.
  2. Dark‑mode collisions: some sites’ CSS made my UI invisible. Fix: scoped all styles under #translate-overlay with !important to enforce white backgrounds and black text.
  3. Broad permissions: Web Store flags <all_urls>. Fix: dropped unnecessary host_permissions, kept only https://api.mymemory.translated.net/*, and let content scripts inject via content_scripts.matches.
  4. AI as teammate: ChatGPT helped me iterate through code snippets, debug edge cases, and even structure the manifest for faster review.

Publishing & Beyond

  • Packaging: npm run build → zip dist/ (no extra folders) → upload to Chrome Web Store.
  • Listing: added icons, screenshots, banner, concise description, privacy policy link.
  • Review: passed Chrome’s least‑privilege checks in under an hour.

Next Steps

  • Let users self‑host LibreTranslate via custom endpoint.
  • Add more languages.
  • Explore on‑device ML with TensorFlow.js for offline translation.

Slug Translate now lives in my Chrome toolbar, powered by AI and built by a designer who isn’t afraid to code. Check out the repo and let me know what you think!