A little Chrome Extension that draws a pie chart on GitHub User / Org profiles detailing their language breakdown. Built with TypeScript, Chart.js and
Recently, I have wanted a little graph that shows the language breakdown of a user or organisation right on their profile.
So I decided to make just that!
Install
Chrome
Click the badge to be taken to the web store page for this plugin!
Firefox
Click the badge to be taken to the web store page for this plugin!
Usage
Just by having the extension installed, it's already working!
Simply visit a any profile page (both User and Org pages are supported) and you'll see something to similar to the following image on the left sidebar: 
All the colours are pulled from GitHub's official language colours, and hovering over any section will tell you the language and how many repos the user has made in that language. Simple!
By clicking on one of the segments, you can be redirected to a list of repos by that user in that language!
Settings
By clicking on the icon in the browser bar, you'll be given a popup with two things;
- A checkbox to control whether or not the chart displays a legend
- A text input to add a personal access token to the GitHub API
The checkbox will toggle whether or not there is a legend displayed alongside the pie chart, which allows you to see what all colours represent without having to hover over them.
The text input allows you to add a GitHub API personal token, which allows for an increase to your rate limit (meaning you can get more information from the API), as well as being able to include your private repos in the chart on your own page.
Want to Contribute?
Contributing doesn't just mean writing code!
If you think of anything that could benefit the project, open up an issue.
I'm also not that great at writing READMEs so help with this one would be very welcome!
Development Process
- Fork the repo, download your fork and install the dependencies with
npm install - Run
npm run watchto start the watch and build process- This will build the TypeScript into
dist/js
- This will build the TypeScript into
- Visit
chrome://extensionsin your browser - Turn on Developer Mode
- Click
Load Unpacked - Open the
distfolder in the prompt that is displayed - The extension should now be loaded from the local directory
Notes
- Whenever you make changes to the extension, the JS will compile automatically but you'll need to click the little circle arrow on
chrome://extensionsto reload the extension - It's probably a good idea to turn off the release version while you're doing development so they don't mess with eachother
- If you want to turn off caching while in development, simply uncomment the
return reject();at line 55 ofdata.ts
Boilerplate
Boilerplate used to set up this project can be found at https://github.com/chibat/chrome-extension-typescript-starter
Contributors
- freyamade: Creator, maintainer
- Strum355: Cleaned up promises with async + await, all round TypeScript mentor
- ihtiht: Designer of the amazing logo
❤️
License
MIT