UI Translator
A Chrome extension providing on-demand, hover-based translation for websites without altering the site's original design, letting users learn new languages from exposure and context rather than breaking the page with a full translation.
Overview
GoalProvide on-demand translation for websites without altering the site's original design.
InspirationFrustration with full-page translations that break layout and context.
The process
This project (along with Tab tools) is one of a series of personal projects where I lean on AI-assisted IDEs like Cursor to accelerate development, while personally driving the project from problem definition through to release rather than just focusing on UX design:
Identify the problemStarted with a real-world issue: full-page translation tools breaking layout and stripping away useful context.
Draft requirementsDefined features and success criteria, using AI to generate early concepts and prototypes.
Design & prototypeHand-coded the CSS for a lightweight tooltip overlay so the extension never disturbs the host site's design.
Develop the MVPBuilt the extension from scratch, focusing on the hover-translate interaction before layering on caching and throttling.
Test & iterateTested with friends and family and refined the caching thresholds and tooltip behaviour based on their feedback.
Document & reflectKept a readme and roadmap so I could pick the project back up between AI sessions without losing context.
Development highlights
Hover-based translationHover over text to see its translated equivalent instantly.
Caching & throttlingPrevented runaway API costs by limiting requests and storing frequent translations.
Subtle UIA tooltip overlay preserves the native look and feel of the website.
Result & impact
Language learningRetains the page's native language while translating only words or phrases on demand, so users can learn new languages from exposure, context, and reinforcement via unintrusive translations.
Future roadmapRefine translation accuracy, usability, and performance. Add smarter language detection, expanded OCR functionality for images, a domain-specific caching system, and collaborative cloud integration for sharing translations so fewer AI requests are needed.
Conclusion
Building UI Translator gave me a 360-degree view of product creation, from defining the problem through to shipping and gathering real user feedback. It reinforced how much AI-assisted development rewards clear documentation and requirements, much like good teamwork, and it’s a workflow I’ve since carried back into professional projects.