Initial commit

Author: faizancodes

.gitignore

@@ -0,0 +1,33 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "arrowParens": "avoid"
+} 

README.md

@@ -0,0 +1,44 @@
+# AutoTab: Chrome Extension for Text Completions
+
+A Chrome extension that provides AI-powered text completion for any text field on the web. As you type in any input field, text area, or contenteditable element, AutoTab will suggest completions that you can accept by simply pressing the Tab key.
+
+## Features
+
+- Works on any website and in any text input field
+- Provides real-time AI-powered text suggestions as you type
+- Accept suggestions with a simple Tab key press
+- Seamlessly integrates with existing text inputs without disrupting your workflow
+- Supports both standard text inputs and contenteditable elements
+- Intelligent debouncing to minimize API calls and improve performance
+
+## Installation
+
+1. Clone this repository or download the source code
+2. Run `npm install` to install all dependencies
+3. Run `npm run build` to create the distribution files (creates a new "dist" folder)
+4. Open Chrome and navigate to `chrome://extensions/`
+5. Enable "Developer mode" using the toggle in the top right corner
+6. Click "Load unpacked" and select the "dist" folder from this project
+7. The extension icon should appear in your browser toolbar - click and pin it for easy access
+
+## Usage
+
+1. Navigate to any website with text input fields
+2. Start typing in any text field
+3. As you type, AI suggestions will appear in light gray
+4. Press the Tab key to accept a suggestion
+5. Continue typing and accepting suggestions as needed
+
+## How It Works
+
+The extension uses a content script that injects into web pages and attaches event listeners to track user input. When you type, the extension sends your text to a local API server that returns AI-generated completions. These completions are displayed as an overlay that perfectly matches the styling of the input field you're typing in.
+
+## Development
+
+- `npm install` - Install dependencies
+- `npm run build` - Build the extension for production
+- `npm run format` - Format code using Prettier
+
+## Customization
+
+The extension's appearance and behavior can be customized by modifying the appropriate CSS and JavaScript files.

manifest.json

@@ -0,0 +1,20 @@
+{
+  "version": "1.0.0",
+  "manifest_version": 3,
+  "name": "AI Text Completion Tutorial",
+  "description": "AI text completion for any text field",
+  "permissions": ["storage", "activeTab"],
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"],
+      "css": ["content.css"]
+    }
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_title": "AI Text Completion"
+  }
+}