🛡️ Code Coverage Viewer

A powerful Chrome extension that seamlessly integrates code coverage information directly into your GitHub workflow. Transform your code review process by instantly visualizing test coverage on Pull Requests and individual files, helping teams make informed decisions about code quality and testing gaps.

✨ Features

• 📊 PR Coverage Display: Get instant coverage insights on GitHub Pull Request pages with comprehensive statistics and visual indicators
• 🎯 File Coverage Highlighting: See exactly which lines are covered with intuitive color-coded highlighting in GitHub file views
• ⚙️ Fully Configurable: Works with any organization's repositories and coverage report formats
• 🔄 Real-time Updates: Automatically refreshes coverage data when navigating between PR files
• 📈 Coverage Diff: Compare coverage changes between base and head branches to track testing improvements
• 🚀 Zero Setup Friction: Easy configuration through a user-friendly options panel

📸 Screenshots

Pull Request Coverage Overview

See comprehensive coverage statistics and file-by-file breakdown directly on your PR pages:

File-Level Coverage Visualization

Instantly identify covered and uncovered lines with clear visual indicators:

Installation

For Users

1. Download or clone this repository
2. Open Chrome and navigate to chrome://extensions
3. Enable "Developer mode" in the top right corner
4. Click "Load unpacked" and select the extension directory
5. Configure the extension for your organization (see Configuration section)

For Developers

1. Clone this repository:

   git clone https://github.com/your-username/code-coverage-viewer.git
   cd code-coverage-viewer

2. Load the extension in Chrome:

   • Open chrome://extensions
   • Enable "Developer mode"
   • Click "Load unpacked" and select the project directory

3. Make changes and reload the extension from chrome://extensions

Configuration

After installation, you need to configure the extension for your organization:

1. Right-click the extension icon and select "Options"
2. Fill in your organization's details:
   • Organization Name: Your GitHub organization or username
   • Allowed Repositories: List of repository owners where the extension should work
   • Coverage Reports Repository: Where your coverage reports are stored
   • Extension Display Name: Customize the extension name
   • GitHub Origin URL: Your GitHub instance URL

Example Configuration

Organization Name: my-company
Allowed Repositories: 
my-company
my-company-ops
Coverage Reports Repository: my-company/coverage_reports
Extension Display Name: Code Coverage Viewer
GitHub Origin URL: https://github.com

Coverage Reports Setup

Your coverage reports should be stored in a GitHub repository with this structure:

coverage_reports/
├── repo-name/
│   └── branch-name/
│       ├── artifact-coverage-results.json
│       └── files.txt (optional, for multiple test types)
└── another-repo/
    └── main/
        └── artifact-coverage-results.json

Coverage Report Format

The artifact-coverage-results.json file should contain:

{
  "source_files": [
    {
      "name": "path/to/file.js",
      "coverage": "[null, 1, 0, 2, null, ...]"
    }
  ]
}

Where:

• null: Non-executable line
• 0: Uncovered executable line
• >0: Covered executable line (number indicates hit count)

Development

Project Structure

├── manifest.json          # Extension manifest
├── options.html           # Configuration page
├── js/
│   ├── config.js          # Configuration management
│   ├── contentController.js # Main orchestrator
│   ├── githubData.js      # Data fetching logic
│   ├── githubPRSummaryUI.js # PR summary UI
│   ├── githubPRFilesUI.js # PR files UI
│   ├── githubBlobUI.js    # File view UI
│   ├── options.js         # Options page logic
│   └── background.js      # Background script
├── css/
│   ├── style.css          # Main styles
│   └── options.css        # Options page styles
└── assets/                # Icons and images

Key Components

• Configuration System: Manages organization-specific settings
• Data Layer: Fetches and processes coverage reports
• UI Layer: Displays coverage information on GitHub pages
• Background Script: Handles extension lifecycle events

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Make your changes and test them
4. Commit your changes: git commit -am 'Add feature'
5. Push to the branch: git push origin feature-name
6. Submit a pull request

License

This project is open source and available under the MIT License.

Troubleshooting

Extension not working?

1. Check that your organization is listed in "Allowed Repositories"
2. Verify your coverage reports repository is accessible
3. Ensure coverage reports follow the expected format
4. Check the browser console for error messages

Coverage not showing?

1. Verify the coverage reports exist for the specific branch
2. Check that the file paths in coverage reports match GitHub file paths
3. Ensure the coverage reports repository is public or accessible

Need help?

Open an issue on GitHub with:

• Your configuration (without sensitive information)
• Browser console errors
• Steps to reproduce the problem

---

🌟 Why Use Code Coverage Viewer?

• 🔍 Instant Visibility: No more switching between tools - see coverage directly where you review code
• 👥 Team Collaboration: Help your team identify testing gaps during code reviews
• 📊 Data-Driven Decisions: Make informed choices about which code needs more testing
• ⚡ Seamless Integration: Works with your existing GitHub workflow without disruption

🤝 Contributing

We welcome contributions! Whether it's bug fixes, new features, or documentation improvements, your help makes this tool better for everyone. Check out our Contributing Guide to get started.

⭐ Show Your Support

If this extension helps improve your development workflow, please consider:

• ⭐ Starring this repository
• 🐛 Reporting bugs or suggesting features
• 📢 Sharing it with your team
• 🤝 Contributing to the codebase

Happy coding with better coverage visibility! 🚀