VoiceFill

Dictate into any text field — offline, private, and instant. Powered by on-device Whisper + Chrome AI.

VoiceFill is a Chrome extension that leverages on-device machine learning to provide fast, private speech-to-text transcription directly in your browser. It integrates smoothly into any webpage using injected content scripts and an easy-to-use side panel.

Features

• On-Device ML: Uses Hugging Face Transformers for local, privacy-first transcription.
• Offline Capable: Works without an internet connection after the initial model download.
• Instant Integration: Dictate directly into any active text field on web pages.
• Modern UI/UX: Built with React, Tailwind CSS, and Zustand.

Tech Stack

• Framework: React 19 + TypeScript
• Build Tool: Vite + CRXJS (for manifest V3 generation)
• Machine Learning: @huggingface/transformers (running in an Offscreen Document)
• Styling: Tailwind CSS
• State Management: Zustand
• Messaging: webext-bridge for seamless communication between Extension contexts.

Project Architecture

• src/background/: Background service worker managing sessions and the offscreen document.
• src/content/: Content scripts injected into web pages to handle UI interactions and input manipulation.
• src/offscreen/: Offscreen document housing the heavy Whisper model Web Worker for audio processing.
• src/sidepanel/: Side panel UI providing control over the transcription process and settings.
• manifest.config.ts: Chrome Extension Manifest configuration powered by CRXJS.

Quick Start

1. Install dependencies

npm install

2. Start development server

npm run dev

3. Load Extension

Open Chrome and navigate to chrome://extensions/. Enable "Developer mode" and click "Load unpacked", then select the generated dist folder.

4. Build for production

npm run build