Jira Feedback Chrome Extension

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

• 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. Local Development Setup

1. Clone the repository:

   git clone [repository-url]
   cd jira-feedback-extension
   

2. Install dependencies:

   npm install
   

2. Jira Configuration

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

3. Extension Setup

1. Build the extension:

   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 from your project

Detailed Usage Guide

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

Available Scripts

• Development mode:

  npm run dev
  

• Run tests:

  npm test
  

• Lint code:

  npm run lint
  

• Generate icons:

  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 Considerations

• 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 (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

Coding Standards

• Follow ESLint configuration
• Write unit tests for new features
• Update documentation as needed
• Follow semantic versioning