Select2AI: GitHub Models

A powerful browser extension that lets you select text on any webpage and interact with GitHub Models AI directly from your browser. Get instant summaries, explanations, answers, or ask custom questions - all displayed in a beautiful floating window with light/dark theme support and smooth animations.

Features

• Text Selection AI: Select any text on a webpage and ask AI questions about it
• Multiple Query Types:
• Summarize selected text
• Explain concepts
• Answer questions
• Custom queries
• Theme Support: Automatic light/dark mode that follows your system preferences
• Smooth Animations: Beautiful UI animations powered by GSAP
• Math Rendering: LaTeX/KaTeX support for mathematical equations
• Customizable: Configure your GitHub token, model selection, and endpoint
• Privacy-Focused: Your API token is stored locally in the browser

Installation

From Source

1. Clone this repository:

   git clone https://github.com/NK2552003/browser-extension-ai.git
   cd browser-extension-ai

2. Load the extension in your browser:

   Chrome/Edge:

   • Open chrome://extensions/
   • Enable "Developer mode"
   • Click "Load unpacked"
   • Select the extension directory

   Firefox:

   • Open about:debugging#/runtime/this-firefox
   • Click "Load Temporary Add-on"
   • Select any file in the extension directory

Chrome Web Store / Firefox Add-ons

Coming soon!

⚙️ Configuration

1. After installation, the extension will automatically open the options page
2. Enter your GitHub Models API Token
3. (Optional) Select your preferred AI model
4. (Optional) Configure a custom endpoint if needed

Getting a GitHub Models API Token

1. Visit GitHub Models
2. Sign in with your GitHub account
3. Follow the instructions to get your API token
4. Copy the token and paste it into the extension's options page

📖 Usage

1. Select Text: Highlight any text on a webpage
2. Choose Action: A floating menu will appear with options:
   • Summarize
   • Explain
   • Answer
   • Custom Question
3. View Response: The AI response appears in a beautiful floating window
4. Interact: Copy responses, close the window, or ask follow-up questions

Keyboard Shortcuts

• Esc - Close the floating window
• Text selection automatically triggers the action menu

🛠️ Development

Project Structure

browser-extension-ai/
├── manifest.json          # Extension manifest (Manifest V3)
├── background.js          # Service worker for API calls
├── contentScript.js       # Content script for text selection
├── popup.html             # Extension popup UI
├── popup.js               # Popup functionality
├── options/               # Options page
│   ├── options.html
│   ├── options.js
│   └── options.css
├── styles/                # CSS files
│   ├── floating.css       # Floating window styles
│   └── globals.css
├── vendor/                # Third-party libraries
│   ├── gsap.min.js        # Animation library
│   ├── katex.min.js       # Math rendering
│   └── katex.min.css
└── icons/                 # Extension icons

Building

The extension is built using vanilla JavaScript and requires no build step. Simply load the directory as an unpacked extension in your browser.

Testing

1. Load the extension in developer mode
2. Navigate to any webpage
3. Select text and test the AI features
4. Check the browser console for any errors

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Please make sure to:

• Follow the existing code style
• Update documentation as needed
• Add tests if applicable
• Follow our Code of Conduct

Requirements

• Chrome 88+ / Edge 88+ / Firefox 89+ (Manifest V3 support)
• GitHub Models API token
• Active internet connection

Privacy & Security

• Your GitHub API token is stored locally using Chrome's secure storage API
• No data is sent to third-party servers except GitHub Models API
• Text selections are only processed when you explicitly trigger an action
• The extension only has access to the active tab when you use it

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• GSAP - Animation library
• KaTeX - Math rendering
• GitHub Models - AI models API
• Icons and design inspiration from various open-source projects

Support

• Report bugs: GitHub Issues
• Discussions: GitHub Discussions
• Contact: Create an issue

Roadmap

• Support for more AI models
• Context persistence across sessions
• Export conversations
• Custom prompt templates
• Keyboard shortcuts customization
• Multi-language support
• Browser extension store publication

Changelog

Version 1.0.0 (Current)

• Initial release
• Text selection AI queries
• Light/dark theme support
• GSAP animations
• KaTeX math rendering
• Configurable GitHub Models integration

---

Made with ❤️ by NK2552003

Star ⭐ this repository if you find it helpful!