https://github.com/hddevteam/smart-form-filler
AI-powered form filling and data extraction browser extension
https://github.com/hddevteam/smart-form-filler
ai-powered browser-extension chrome-extension data-extraction demo-site developer-tools form-automation form-filling github-pages gpt-integration javascript local-ai machine-learning nodejs ollama privacy-focused productivity-tools web-automation
Last synced: 24 days ago
JSON representation
AI-powered form filling and data extraction browser extension
- Host: GitHub
- URL: https://github.com/hddevteam/smart-form-filler
- Owner: hddevteam
- License: isc
- Created: 2025-06-19T08:54:03.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-12-28T02:59:27.000Z (2 months ago)
- Last Synced: 2025-12-30T08:54:31.389Z (2 months ago)
- Topics: ai-powered, browser-extension, chrome-extension, data-extraction, demo-site, developer-tools, form-automation, form-filling, github-pages, gpt-integration, javascript, local-ai, machine-learning, nodejs, ollama, privacy-focused, productivity-tools, web-automation
- Language: JavaScript
- Homepage: https://hddevteam.github.io/smart-form-filler/
- Size: 2.63 MB
- Stars: 36
- Watchers: 0
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
- Roadmap: .github/ROADMAP/milestone-1-cloud-first.md
Awesome Lists containing this project
README
# Smart Form Filler - AI-Powered Browser Extension
A standalone browser extension for intelligent data extraction and form filling using AI technology. Now with **Ollama local model support**!
[](https://github.com/hddevteam/smart-form-filler/releases)
[](LICENSE)
[](https://github.com/hddevteam/smart-form-filler)
[](https://github.com/hddevteam/smart-form-filler)
π **[Live Demo & Documentation](https://hddevteam.github.io/smart-form-filler/)** | π¦ **[Download Latest Release](https://github.com/hddevteam/smart-form-filler/releases/latest)** | π **[View Documentation](https://github.com/hddevteam/smart-form-filler/wiki)** | π₯ **[Watch Demo Video](https://demoforgithub.blob.core.windows.net/videos/smart-form-filler-demo.mp4)**
## π Language Versions
- [πΊπΈ English](README.md) | [π¨π³ δΈζ](README_zh.md)
## πΈ Screenshots
*Smart Form Filler analyzing and auto-filling a complex web form*
> **π‘ Tip**: The demo showcases all major features including AI-powered form filling, data extraction
## π Features
- **Data Extraction**: Extract structured data from web pages
- **Smart Form Filling**: AI-powered automatic form completion with intelligent field mapping
- **Multi-format Output**: Raw HTML, cleaned HTML, and Markdown formats
- **Chat with Data**: Interactive Q&A with extracted content
- **Local AI Models**: Full Ollama integration for privacy-focused AI
- **Cloud AI Models**: Support for GPT-4o, o series, DeepSeek, and other cloud providers
- **Backend Configuration**: Built-in settings interface for configuring backend connections
- **Service Status Monitoring**: Real-time backend connection status and error handling
- **Intelligent Field Analysis**: Enhanced field descriptions including available options for dropdowns, radio buttons, and checkboxes
- **Browser Integration**: Works seamlessly with Chrome and other Chromium-based browsers
## π Project Structure
```
smart-form-filler/
βββ backend/ # Backend API server
β βββ controllers/ # API controllers
β βββ services/ # Business logic services
β βββ routes/ # API routes
β βββ config/ # Configuration files
β βββ server.js # Main server file
βββ extension/ # Browser extension
β βββ src/ # Extension source code
β βββ manifest.json # Extension manifest
β βββ popup.html # Extension popup UI
βββ package.json # Root package configuration
```
## π Architecture & Code Organization
### Modular Structure
The Smart Form Filler extension has been refactored into a clean, modular architecture to improve maintainability and code organization. **All files are properly sized** for optimal maintainability.
#### Core Modules
**π― Main Entry Point:**
- `popup-main.js` - Lightweight entry point that initializes the modular system
**π¦ Core Manager Modules:**
- `popupManager.js` - Main coordinator orchestrating all popup functionality
- `popupInitializer.js` - Handles DOM element initialization and validation
- `popupEventHandlers.js` - Manages all user interactions and UI events
- `popupModelManager.js` - AI model loading, selection, and management
- `popupSettingsManager.js` - Backend configuration and settings persistence
**π§ Feature Modules:**
- `formFillerHandler.js` - Form detection and filling functionality
- `formAnalysisService.js` - Form content analysis and mapping
- `uiController.js` - UI state management and visual feedback
- `resultsHandler.js` - Results display and data management
- `chatHandler.js` - Chat interface and AI interactions
- `dataExtractor.js` - Page content extraction from web pages
- `apiClient.js` - Backend API communication
- `authManager.js` - User authentication handling
#### Key Benefits of Modular Structure
β
**Maintainability**: Each module has a single responsibility
β
**Modular Design**: Proper file sizes for easy navigation and maintenance
β
**Testability**: Modules can be tested independently
β
**Extensibility**: New features can be added as separate modules
β
**Debugging**: Clear separation of concerns makes troubleshooting easier
#### Module Dependencies
```
popup-main.js
βββ PopupManager
βββ PopupInitializer (DOM setup)
βββ PopupSettingsManager (backend config)
βββ PopupModelManager (AI models)
βββ PopupEventHandlers (user interactions)
βββ Feature Modules
βββ FormFillerHandler
βββ UIController
βββ ResultsHandler
βββ ChatHandler
βββ DataExtractor
```
## π οΈ Installation & Setup
### Prerequisites
- Node.js (v14 or higher)
- npm or yarn
### Backend Setup
```bash
# Install dependencies
npm run install:all
# Start development server
npm run dev
```
### Extension Setup
1. Open Chrome and navigate to `chrome://extensions/` (`edge://extensions/` for Edge browsers)
2. Enable "Developer mode"
3. Click "Load unpacked" and select the `extension` folder
4. The extension should now appear in your browser toolbar
### π― Interactive Demo
Experience all extension features with our **live interactive demo** at:
**π [https://hddevteam.github.io/smart-form-filler/](https://hddevteam.github.io/smart-form-filler/)**
The demo includes:
- **π½οΈ Restaurant Feedback Form**: Complete with realistic scenarios
- **π Data Extraction**: Interactive profile extraction demo
- **π¬ AI Chat**: Chat with extracted data functionality
- **π― Prompt Examples**: Specific scenarios like birthday celebrations, business dinners, family meals
#### Demo Features & Prompt Examples
```
π½οΈ Satisfied Customer:
"Fill this restaurant feedback form as John Smith (john.smith@techcorp.com) who just had dinner at Mario's Italian Restaurant. Give a 5-star rating and positive detailed comments about the seafood pasta and excellent service."
π Birthday Celebration:
"Fill this feedback as someone who celebrated their birthday here. Mention the surprise dessert, decorations, and how the staff made the evening special."
πΌ Business Lunch:
"Complete this form as a business professional who brought clients here. Focus on the quiet atmosphere, prompt service, and quality food that impressed the clients."
```
## π§ Development
### Backend Development
```bash
cd backend
npm run dev
```
The backend server will start on `http://localhost:3001`
### API Endpoints
- `GET /api/extension/health` - Health check
- `GET /api/extension/models` - Available AI models
- `POST /api/extension/extract-data-sources` - Extract page data
- `POST /api/extension/chat-with-data` - Chat with extracted data
- `POST /api/form-filler/analyze-form-relevance` - Analyze form relevance
- `POST /api/form-filler/analyze-field-mapping` - Generate field mappings
## βοΈ Configuration
### Backend Configuration
The extension includes a built-in settings interface for configuring the backend connection:
#### Using the Settings Interface
1. **Open Settings**: Click the βοΈ settings button in the extension header
2. **Configure Backend URL**: Enter your backend server URL (default: `http://localhost:3001`)
3. **Test Connection**: Click "Test" to verify the connection
4. **Save Settings**: Click "Save" to apply the new configuration
#### Features
- **Persistent Storage**: Settings are saved across browser sessions
- **Connection Testing**: Real-time validation of backend connectivity
- **Error Handling**: Clear feedback for connection issues
- **Auto-reload**: Models automatically refresh when backend changes
#### Default Configuration
```
Backend URL: http://localhost:3001
```
### Environment Variables
Copy `.env.example` to `.env` and configure your environment variables:
```bash
cd backend
cp .env.example .env
```
### Ollama Configuration (Optional)
For local AI model support, add to your `.env` file:
```env
OLLAMA_URL=http://localhost:11434
```
## π€ Ollama Integration
This extension supports **Ollama local models** for privacy-focused AI! Use your own locally-hosted models alongside cloud providers.
### π Quick Setup
#### 1. Install Ollama
Visit [https://ollama.ai/](https://ollama.ai/) and install Ollama for your platform.
#### 2. Start Ollama Service
```bash
ollama serve
```
#### 3. Download Models
```bash
# Recommended models for form filling and data extraction
ollama pull llama2
ollama pull mistral
ollama pull codellama
ollama pull qwen2.5:7b
ollama pull deepseek-r1
```
#### 4. Use in Extension
1. Open the extension popup
2. Click the π refresh button next to "AI Model"
3. Select from **Local Models (Ollama)** or **Cloud Models**
4. Enjoy private, local AI processing!
### π§ Features
- **Auto-Discovery**: Automatically detects running Ollama servers
- **Model Hot-Loading**: Refresh model list without restarting
- **Unified Interface**: Seamless switching between local and cloud models
- **Privacy-First**: Data never leaves your machine with local models
### π Recommended Models
| Model | Use Case | Command |
|-------|----------|---------|
| `llama2` | General tasks | `ollama pull llama2` |
| `mistral` | High performance | `ollama pull mistral` |
| `codellama` | Code understanding | `ollama pull codellama` |
| `qwen2.5:7b` | Multilingual | `ollama pull qwen2.5:7b` |
| `deepseek-r1` | Reasoning tasks | `ollama pull deepseek-r1` |
### π οΈ Troubleshooting
#### Backend Connection Issues
**Service Unavailable Message**
If you see "β οΈ Service unavailable - Check backend connection":
1. **Check Backend Server**: Ensure the backend is running on the configured URL
2. **Verify URL**: Click βοΈ settings and verify the backend URL is correct
3. **Test Connection**: Use the "Test" button in settings to verify connectivity
4. **Check Network**: Ensure no firewall or network issues blocking the connection
**Models Not Loading**
1. **Backend Status**: Verify backend server is running (`npm run dev`)
2. **URL Configuration**: Check settings for correct backend URL
3. **Refresh Models**: Click the π refresh button
4. **Check Logs**: Look at browser console for specific error messages
#### Ollama Integration Issues
**Models Not Showing?**
1. **Check Ollama Status**: `curl http://localhost:11434/api/tags`
2. **List Models**: `ollama list`
3. **Restart Ollama**: `ollama serve`
4. **Refresh Extension**: Click π button
**Connection Issues?**
- Ensure Ollama runs on `http://localhost:11434`
- Check firewall settings
- Update `OLLAMA_URL` if using custom port
## π§ͺ Testing
```bash
# Run tests
npm test
```
## π¦ Building for Production
```bash
# Build extension for production
npm run build:extension
```
## π€ Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## π License
This project is licensed under the ISC License.
## π Related Links
- [Chrome Extension Developer Guide](https://developer.chrome.com/docs/extensions/)
- [Node.js Documentation](https://nodejs.org/docs/)
- [Express.js Documentation](https://expressjs.com/)