Intro

When browsing GitHub repositories, one key piece of information I often seek is the date of the last commit. This detail helps me gauge how active and well-maintained a repository is. Recently, I decided to address this need by creating my first Chrome extension.

Solution

To achieve this, I utilized Shields.io, which offers a variety of badges for different purposes. In particular, I used their badge that displays the date of the last commit, which you can find here: Shields.io Last Commit Badge. This badge provides a quick and easy way to see the last commit date directly within the GitHub repository page.

The process of adding the badge is straightforward. We parse the repository owner and name, create the badge URL, and inject an element with our badge into the GitHub page. However, there were some challenges I had to address along the way.

Firstly, directly adding the badge URL resulted in the following error:

"Refused to load the image ‘https://img.shields.io/github/last-commit/PoShLog/PoShLog‘ because it violates the following Content Security Policy directive: ‘img-src ‘self’ data: blob: github.githubassets.com…’".

To work around this issue, I used a background script to fetch the image and then create a data URL to embed it directly into the page.

Another issue was that when a user clicked on different tabs, such as Issues, and then returned to the Code tab, the badge would not be injected again. To address this, I added a MutationObserver to watch for page changes and re-add the badge whenever the page changes back to the Code tab.

After paying the $5 fee for the Chrome Web Store, I submitted my first extension for review. Initially, it was rejected because I had included unnecessary permissions in the manifest.json file. After addressing this issue, the extension was finally approved and published to the Chrome Web Store. You can check it out here: GitHub Last Commit Badge.

Feel free to install it, test it, and send me your feedback. Until next time, happy coding!