Update README.md

README.md

@@ -1,93 +1,201 @@
 # Jira Feedback Chrome Extension
 
-A Chrome extension that allows users to capture and submit feedback directly to Jira with screenshots, screen recordings, and annotations.
+A powerful Chrome extension that streamlines the feedback process by allowing users to capture, annotate, and submit feedback directly to Jira. Perfect for QA teams, developers, and stakeholders who need to report issues or provide feedback efficiently.
 
 ## Features
 
-- Authentication with Google and Jira
+- **Seamless Authentication**
-- Screenshot capture with annotation tools
+  - Uses Jira API Key authentication
-- Screen recording with audio
+  - Secure credential management
-- Text-based feedback submission
+
-- Direct integration with Jira
+- **Comprehensive Capture Options**
-- Context information collection
+  - Full page screenshots
-- Multiple feedback templates
+  - Visible area captures
-- Customizable settings
+  - Screen recording with audio support
+  - Custom region selection
+
+- **Rich Annotation Tools**
+  - Drawing tools (arrows, rectangles, circles)
+  - Text annotations with customizable fonts
+  - Highlighter and blur tools
+  - Color picker for annotations
+
+- **Smart Integration**
+  - Direct Jira issue creation
+  - Automatic context information collection
+    - URL
+    - Browser details
+    - System information
+  - Multiple feedback templates
+  - Custom field mapping
+
+- **Customizable Settings**
+  - Default project selection
+  - Issue type preferences
+  - Template management
+  - Hotkey configuration
+
+## Technical Requirements
+
+- Node.js (v14.0.0 or higher)
+- npm (v6.0.0 or higher)
+- Chrome Browser (v88 or higher)
+- Jira Cloud instance with admin access for setup
 
 ## Setup
 
-1. Clone the repository
+### 1. Local Development Setup
+
+1. Clone the repository:
+   ```bash
+   git clone [repository-url]
+   cd jira-feedback-extension
+   ```
+
 2. Install dependencies:
-```bash
+   ```bash
-npm install
+   npm install
-```
+   ```
 
-3. Create a Google OAuth 2.0 client ID:
+### 2. Jira Configuration
-   - Go to the [Google Cloud Console](https://console.cloud.google.com)
-   - Create a new project or select an existing one
-   - Enable the Google OAuth2 API
-   - Create credentials (OAuth 2.0 Client ID)
-   - Add the client ID to manifest.json
 
-4. Configure Jira OAuth 2.0:
+1. Access your Jira Cloud instance settings
-   - Go to your Jira instance settings
+2. Generate an API key:
-   - Create a new OAuth 2.0 integration
+   - Go to **Atlassian Account Settings**
-   - Add the client ID and secret to the extension settings
+   - Navigate to **Security** > **API Tokens**
+   - Click **Create API Token** and copy it
+3. Store the API key securely in your environment variables
 
-5. Build the extension:
+### 3. Extension Setup
-```bash
-npm run build
-```
 
-6. Load the extension in Chrome:
+1. Build the extension:
-   - Open Chrome and go to `chrome://extensions`
+   ```bash
-   - Enable "Developer mode"
+   npm run build
+   ```
+
+2. Load in Chrome:
+   - Open Chrome and navigate to `chrome://extensions`
+   - Enable "Developer mode" in the top right
    - Click "Load unpacked"
-   - Select the `dist` directory
+   - Select the `dist` directory from your project
 
-## Usage
+## Detailed Usage Guide
 
-1. Click the extension icon in the toolbar or use the keyboard shortcut (Ctrl+Shift+F / Cmd+Shift+F)
+### Capturing Feedback
-2. Login with your Google and Jira accounts
+
-3. Choose a feedback type:
+#### Screenshot Capture:
-   - Screenshot
+1. Click extension icon or use shortcut (Ctrl+Shift+F / Cmd+Shift+F)
-   - Screen recording
+2. Select capture type:
-   - Text-based feedback
+   - Full page
-4. Add annotations or comments
+   - Visible area
-5. Fill in the feedback details
+   - Custom region
-6. Submit to Jira
+3. Use annotation tools:
+   - Click arrow tool for directional markers
+   - Use rectangle tool to highlight areas
+   - Add text annotations for clarity
+   - Blur sensitive information
+
+#### Screen Recording:
+1. Select "Record Screen" option
+2. Choose recording options:
+   - Full screen
+   - Application window
+   - Browser tab
+3. Toggle audio recording if needed
+4. Start/stop recording using controls
+
+### Submitting to Jira
+
+1. Fill in the feedback form:
+   - Select project
+   - Choose issue type
+   - Add title and description
+   - Set priority level
+2. Preview the submission
+3. Click "Submit to Jira"
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Authentication Failures**
+   - Verify Jira API Key
+   - Check Jira permissions
+   - Clear extension storage and retry
+
+2. **Capture Problems**
+   - Ensure required permissions are granted
+   - Refresh the page
+   - Check console for errors
+
+3. **Submission Errors**
+   - Validate Jira configuration
+   - Check required fields
+   - Verify network connection
+
+### Debug Mode
+
+Enable debug mode in extension settings to get detailed logs:
+1. Right-click extension icon
+2. Select "Options"
+3. Enable "Debug Mode"
+4. Check browser console for logs
 
 ## Development
 
-- Run in development mode:
+### Available Scripts
-```bash
+
-npm run dev
+- Development mode:
-```
+  ```bash
+  npm run dev
+  ```
 
 - Run tests:
-```bash
+  ```bash
-npm test
+  npm test
-```
+  ```
 
 - Lint code:
-```bash
+  ```bash
-npm run lint
+  npm run lint
+  ```
+
+- Generate icons:
+  ```bash
+  npm run icons
+  ```
+
+### Project Structure
+
+```
+jira-feedback-extension/
+├── assets/          # Static assets and icons
+├── dist/           # Built extension files
+├── js/             # JavaScript source files
+├── styles/         # CSS styles
+├── scripts/        # Build and utility scripts
+└── tests/          # Test files
 ```
 
-## Security
+## Security Considerations
 
-- OAuth 2.0 implementation for secure authentication
+- Secure storage using Chrome's encrypted storage API
-- Secure storage of credentials using Chrome's storage API
 - HTTPS-only API communication
+- Content Security Policy implementation
+- Regular security audits
 - Minimal permission requirements
 
 ## Contributing
 
 1. Fork the repository
-2. Create a feature branch
+2. Create a feature branch (`git checkout -b feature/AmazingFeature`)
-3. Commit your changes
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
-4. Push to the branch
+4. Push to the branch (`git push origin feature/AmazingFeature`)
-5. Create a Pull Request
+5. Open a Pull Request
 
-## License
+### Coding Standards
 
-MIT License - see LICENSE file for details
+- Follow ESLint configuration
+- Write unit tests for new features
+- Update documentation as needed
+- Follow semantic versioning