Update README.md
This commit is contained in:
parent
a76ce6aa20
commit
13781cd965
226
README.md
226
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
|
||||
- Screenshot capture with annotation tools
|
||||
- Screen recording with audio
|
||||
- Text-based feedback submission
|
||||
- Direct integration with Jira
|
||||
- Context information collection
|
||||
- Multiple feedback templates
|
||||
- Customizable settings
|
||||
- **Seamless Authentication**
|
||||
- Uses Jira API Key authentication
|
||||
- Secure credential management
|
||||
|
||||
- **Comprehensive Capture Options**
|
||||
- Full page screenshots
|
||||
- Visible area captures
|
||||
- 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
|
||||
npm install
|
||||
```
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. Create a Google OAuth 2.0 client ID:
|
||||
- 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
|
||||
### 2. Jira Configuration
|
||||
|
||||
4. Configure Jira OAuth 2.0:
|
||||
- Go to your Jira instance settings
|
||||
- Create a new OAuth 2.0 integration
|
||||
- Add the client ID and secret to the extension settings
|
||||
1. Access your Jira Cloud instance settings
|
||||
2. Generate an API key:
|
||||
- Go to **Atlassian Account 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:
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
### 3. Extension Setup
|
||||
|
||||
6. Load the extension in Chrome:
|
||||
- Open Chrome and go to `chrome://extensions`
|
||||
- Enable "Developer mode"
|
||||
1. Build the extension:
|
||||
```bash
|
||||
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)
|
||||
2. Login with your Google and Jira accounts
|
||||
3. Choose a feedback type:
|
||||
- Screenshot
|
||||
- Screen recording
|
||||
- Text-based feedback
|
||||
4. Add annotations or comments
|
||||
5. Fill in the feedback details
|
||||
6. Submit to Jira
|
||||
### Capturing Feedback
|
||||
|
||||
#### Screenshot Capture:
|
||||
1. Click extension icon or use shortcut (Ctrl+Shift+F / Cmd+Shift+F)
|
||||
2. Select capture type:
|
||||
- Full page
|
||||
- Visible area
|
||||
- Custom region
|
||||
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:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
### Available Scripts
|
||||
|
||||
- Development mode:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
- Run tests:
|
||||
```bash
|
||||
npm test
|
||||
```
|
||||
```bash
|
||||
npm test
|
||||
```
|
||||
|
||||
- Lint code:
|
||||
```bash
|
||||
npm run lint
|
||||
```bash
|
||||
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 of credentials using Chrome's storage API
|
||||
- Secure storage using Chrome's encrypted 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
|
||||
3. Commit your changes
|
||||
4. Push to the branch
|
||||
5. Create a Pull Request
|
||||
2. Create a 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
|
||||
|
||||
## 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
|
||||
Loading…
x
Reference in New Issue
Block a user