GitHub Issues Enhancements - A Chrome Extension that captures Estimated Time and % done of Github issues
Tags: github, chrome, extension, issues
Published: 2020-06-30 21:54:06

In our company, we use GitHub Issues to track bugs/features in our daily development. Although GitHub Issues has some strong points (notifications, @mentions, integration with pull requests) it is missing some important features very useful when you want to plan your workload or track your progress. 

:one: Estimation time to complete an issue
:two: The '% Done' progress of an issue
:three: Overall summary of estimation times + % done on issues

These features come in very handy for managers and team leaders, especially during agile sprints. It was always a headache for the team leaders trying to figure out  if they can squeeze issues to a two weeks sprint :pray:  

For this purpose, I decided to write an Open Source Chrome Extension [GitHub Issues Enhancements](https://chrome.google.com/webstore/detail/github-issues-enhancement/edbnbdnankneabigcimhnnclaonogcep)  capturing this metadata per issue.

![Browsing GitHub Issues](https://dev-to-uploads.s3.amazonaws.com/i/6klx2cqb5aul1y9xmxv4.png)
<figcaption>Browsing GitHub Issues</figcaption>

###Extending GitHub Issues pages
The extension use [content scripts](https://developer.chrome.com/extensions/content_scripts) that run in the context of GitHub pages that display list of issues. It is activated ONLY in specific GitHub pages through [Url pattern matching](https://developer.chrome.com/extensions/match_patterns). By using the standard Document Object Model (DOM) and jQuery, it is able to read details of the pages and inject custom DOM elements to them (summary card + two select boxes per issue) and pass information to their parent extension.

###Persisting Issue Time Metadata

The main challenge of creating such an extension was to find a way to persist the issue's time metadata. GitHub does not permit saving extra metadata to an issue beyond the body in markdown format. 

Searching the internet :cold_sweat:, the only vital solution I could found was to save time metadata inside the issue's body as an HTML comment with JSON content. GitHub permits saving HTML comments inside the issue's body but they remain invisible while previewing the issue. The extension does not change in any way the original markdown of the issue but just appends the HTML comment

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2q8b5qrh8hi14lb2k5li.png)
<figcaption>HTML comment with JSON content</figcaption>

###Prerequisites

The only way the extension can save time metadata inside the issue's body is to have read/write/update rights to the issue. For this to happen, the extension requires a [**GitHub Personal Access Token**](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token)  of the user prior to calling GitHub's REST API. The token is saved in the local storage of the browser never transmitting it in any way over the internet :exclamation:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/33hnmb9sqab113v48ozw.png)
<figcaption>Options page</figcaption>

###Links - See it in action on Github Repo

[Google Chrome Extension] (https://chrome.google.com/webstore/detail/github-issues-enhancement/edbnbdnankneabigcimhnnclaonogcep)
[GitHub Repository] 
(https://github.com/pda-code/GitHub-Issues-Enhancements)
[Submit an issue] 
(https://github.com/pda-code/GitHub-Issues-Enhancements/issues)

Fill free to use it.
Hit CTRL+F5 to the browser and enjoy :smile: