Overview

GitSnap is a Chrome extension designed to enhance your GitHub experience by transforming repository data into visually engaging charts. This is a fun project inspired by the CSS viewer extension that uses the Echarts library to generates a variety of chart types such as line, pie, and bar charts.

The extension enables users to simply hover over repository links on GitHub, which triggers the display of dynamic charts showcasing contributor activity, branch statistics, pull requests, and issue tracking in a user-friendly format. This tool is particularly beneficial for developers and project managers who aim to assess repository performance and make informed decisions based on up-to-date metrics.

Technologies

• Languages: HTML, CSS, JavaScript
• Frameworks/Libraries: Echarts
• APIs: Web Extension API (specifically "tabs", “storage”, and "action")

Features

• Custom Toggle Switches: Allows users to custom select the chart to visualize either Contributors, Pull Requests, Issues or Branches, or a combination of any.
• Contributor Insights: View key contributors of a project and with detailed metrics on distribution.
• Pull Request Monitoring: Track the status/trend of open and merged pull requests over time.
• Issue Tracking Visualization: Monitor open and closed issues over time.
• Branch Structure Visualization: Explore branches to understand their relationships and hierarchy within a repository.

Development Process

This browser extension was developed using core web technologies: HTML, CSS, and JavaScript. The Web Extension API facilitated communication between the background scripts and content scripts of the extension.

Challenges

During the development of GitSnap, I encountered several challenges that enhanced my learning experience:

• Script Integration Issues: Initially, I struggled to differentiate between background scripts and content scripts, often using them interchangeably. This confusion led to unexpected results until I clarified their distinct roles.
• Library Integration: I faced difficulties integrating the D3.js library for visualizations. Eventually, I transitioned to Echarts due to its superior documentation and user-friendly interface.

Key Takeaways

Building GitSnap provided invaluable insights into browser extension development and data visualization techniques. Key takeaways include:

• The importance of understanding the architecture of web extensions for effective script management.
• The benefits of selecting libraries with robust documentation to streamline development.
• The value of visualizing data to enhance user engagement and comprehension.

Achievements

The GitSnap extension features a straightforward landing page that educates users on its benefits and addresses frequently asked questions. Currently, it boasts approximately 9 active weekly users and improved page impressions. Building GitSnap has also provided invaluable insights into browser extension development and data visualization techniques.