Home

Awesome

GitHub User Languages Logo

Travis branch

A little Chrome Extension that draws a pie chart on GitHub User / Org profiles detailing their language breakdown. Built with TypeScript, Chart.js and :heart:.

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

Chrome Web Store

Click the badge to be taken to the web store page for this plugin!

Firefox

Firefox Add-ons

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: github-user-languages demo

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! :smile:

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;

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

  1. Fork the repo, download your fork and install the dependencies with npm install
  2. Run npm run watch to start the watch and build process
    • This will build the TypeScript into dist/js
  3. Visit chrome://extensions in your browser
  4. Turn on Developer Mode
  5. Click Load Unpacked
  6. Open the dist folder in the prompt that is displayed
  7. The extension should now be loaded from the local directory

Notes

Boilerplate

Boilerplate used to set up this project can be found at https://github.com/chibat/chrome-extension-typescript-starter

Contributors

License

MIT