-
-
my chrome extension snapshot
Inspiration
I'm passionate about stories, especially long-form fiction, but like many people, I struggle with time constraints and eyestrain from prolonged reading. I always dreamed of being able to "read" while doing mundane chores, resting my eyes, or even taking a quick nap. Similarly, I love staying updated with DEV.to articles to keep up with tech trends, but reading every article thoroughly is time-consuming.
This led me to envision FlowSpeak AI - an accessibility-first extension that transforms any web content into an intelligent audio experience. I wanted to create something that doesn't just read text aloud, but actually understands content structure, provides AI-powered insights, and offers personalized voice options to make the experience truly engaging and accessible.
What it does
FlowSpeak AI is an advanced accessibility extension that revolutionizes how people consume web content through:
🎧 Intelligent Text-to-Speech: Goes beyond basic reading with smart content parsing, chapter navigation for AO3 stories, and technical content optimization for DEV.to articles.
🤖 AI-Powered Content Analysis: • Explains complex text in simple terms • Summarizes selected content or entire pages • Automatically analyzes and explains code blocks • Provides comprehensive site overviews
🗣️ Personalized Voice Experience: • Male/Female voice options • Multiple English accents (American, British, French, Spanish) • Real-time voice status display • Customizable speed and volume controls
📚 Specialized Website Support: • AO3: Chapter-by-chapter navigation, story summaries, metadata reading • DEV.to: Technical article optimization, code explanation, structured navigation • Universal compatibility with all websites
How I built it
The AI-Powered Development Journey: This was my first-ever Chrome extension project, built entirely using Amazon Q Developer as my AI coding partner. Every line of code, feature, and solution came from collaborative AI-assisted development.
Frontend Architecture: Built as a Chrome extension using vanilla JavaScript for optimal performance, with a clean popup interface and comprehensive settings page.
AI Integration: Integrated Groq's llama-3.1-8b-instant model for fast, free AI processing with intelligent rate limiting and retry mechanisms to handle API constraints gracefully.
Voice Technology: Implemented sophisticated voice selection algorithms that intelligently match user preferences (gender/accent) with available system voices, with fallback mechanisms for maximum compatibility.
Content Analysis Engine: Developed specialized parsers for different website types: • AO3: Extracts story metadata, chapters, and narrative structure • DEV.to: Identifies code blocks, technical concepts, and article structure • Generic: Universal content extraction for any website
Accessibility-First Design: Every feature designed with screen reader users and accessibility needs in mind, including keyboard navigation, clear status indicators, and structured content presentation.
Challenges I ran into
Voice Consistency Across Systems: Different operating systems have varying voice availability. I solved this by creating intelligent voice mapping algorithms that find the best available voice match for user preferences, with graceful fallbacks.
API Rate Limiting: Groq's free tier has usage limits. I implemented smart retry logic, reduced token usage through optimized prompts, and added automatic rate limit handling to ensure consistent functionality.
Complex Content Parsing: Websites like AO3 and DEV.to have intricate structures. I built specialized parsers that understand story chapters, code blocks, and technical content to provide meaningful navigation and analysis.
Real-time Settings Sync: Ensuring voice preferences persist and sync across browser sessions required implementing robust storage mechanisms with automatic saving and loading.
First-Time Extension Development: As someone with no prior Chrome extension experience, I had to learn the entire architecture through AI collaboration, from manifest files to content scripts.
Accomplishments that I'm proud of
✨ True Accessibility Innovation: Created an extension that genuinely improves web accessibility, not just adds features. Real users can now consume long-form content while multitasking or resting their eyes.
🚀 AI-Powered Intelligence: Successfully integrated AI to provide contextual explanations and summaries, making complex content accessible to users with different comprehension needs.
🎯 Specialized Website Optimization: Built custom support for popular platforms (AO3, DEV.to) that understands their unique content structures, providing tailored experiences.
⚡ Performance & Reliability: Achieved smooth performance with intelligent caching, retry mechanisms, and optimized API usage that works reliably on the free tier.
🗣️ Voice Personalization: Implemented sophisticated voice selection that provides diverse, culturally-aware accent options while maintaining compatibility across different systems.
🤖 AI-First Development: Proved that with AI assistance, anyone can build sophisticated software - this entire extension was created through collaborative AI development as my first Chrome extension project.
What I learned
Accessibility is Complex: Building truly accessible software requires deep understanding of user needs, not just compliance with guidelines. Every design decision must consider diverse abilities and use cases.
AI Integration Challenges: Working with API rate limits taught me to optimize prompts, implement smart retry logic, and design for graceful degradation when services are unavailable.
Browser Extension Architecture: Learned the intricacies of Chrome extension development, including content scripts, background workers, storage APIs, and cross-origin communication - all through AI collaboration.
Voice Technology Limitations: Discovered the complexities of cross-platform voice synthesis and developed strategies for consistent user experiences across different systems and browsers.
AI as a Development Partner: Amazon Q didn't just provide code - it guided architectural decisions, explained concepts, and helped debug complex issues. This project showcases how AI can democratize software development for first-time builders.
Better Prompting Skills: Be concise, to-the-point, state all the features, deliverables, project context, tech stack, user flow, design, and ask it to clarify everything first before moving on to the execution.
What's next for FlowSpeak AI - An accessibility based AI powered Extension
🌍 Global Accessibility: • Multi-language support with translation capabilities • Additional accent options (Australian, Canadian, Indian English) • Support for non-English content with native voice options
🧠 Enhanced AI Features: • Content difficulty assessment and adaptation • Personalized reading recommendations • Interactive Q&A about content • Smart bookmarking with AI-generated tags
📱 Cross-Platform Expansion: • Firefox and Safari extension versions • Mobile browser support • Desktop application for offline reading
🎯 Advanced Specialization: • Academic paper support with citation reading • News article optimization with fact-checking integration • Social media content parsing (Twitter threads, Reddit posts) • E-book and PDF support
♿ Deeper Accessibility: • Integration with screen readers • Visual impairment-specific optimizations • Cognitive accessibility features (simplified language, concept explanations) • Customizable UI for different accessibility needs
🔧 Power User Features: • Custom voice training for personalized speech • Advanced content filtering and organization • Collaborative features for sharing summaries • Analytics dashboard for reading habits and comprehension
FlowSpeak AI represents the future of accessible web browsing - where AI doesn't just automate tasks, but genuinely empowers users to consume and understand content in ways that work best for their individual needs and circumstances.
Built With
- amazon-q-developer
- chrome-developer-tools
- chrome-extension-apis
- chrome-scripting-api
- chrome-storage-api
- chrome-tabs-api
- chrome-web-store
- content-script-injection
- cors
- css3
- fetch-api
- groq
- html5
- javascript
- local-storage-management
- manifest-v3
- natural-language-processing
- rate-limiting
- retry-logic
- speechsynthesis-api
- text-to-speech-synthesis
- web-speech-api
Log in or sign up for Devpost to join the conversation.