itenium-be / github-stars-links

Chrome UserScript that adds a stars badge to github project links

Github Stars

• Blog post
• Chrome extension

Add Github Stars badges to Github project links.
Activates directly on activateDirectlyOn array. For other websites, press Control + Alt + G

// Defaults +/- to
const activateDirectlyOn = ['stackoverflow.com', 'google.com', 'github.com'];

Example: Google search results

Turn google results for "react github" into:

Example: Github Awesome list

Turn sindresorhus awesome-awesome list into:

Testing

chrome://extensions/

• Turn on "Developer mode"
• Load unpacked
• Select this folder

Test Urls

• Google
• Github
  • Unexisting Repo: Would need to do a XMLHttpRequest so the returned content svg content can be examined for "Repo not found"
• StackOverflow
• Bing
• npmjs: Bug: when selecting another package, the shield.io does not refresh
• nuget

CSP Directives

Developer docs

// Suggestion from docs did not help for github.com
const xhr = new XMLHttpRequest();
xhr.open('GET', shieldUrl, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  const badge = document.createElement('img');
  badge.src = window.URL.createObjectURL(this.response);
  el.prepend(badge);
};
xhr.send();

Publish

Publishing to the Chrome Web Store

• Increase version in manifest.json
• gulp will create ./dist/github-stars.zip

Upload it to the store and pick 3 dots > "Developer Dashboard".

npm install
npm run build

# Or with global Gulp
gulp

# Rebuild on changes
npm run watch

Do need to click reload in chrome://extensions after each change to the code.

github-stars-links's Issues

Extra links badges should not be added

Do not add badge for:
https://github.com/notifications/beta

Example:
https://github.com/be-pongit/confac-front/pull/107/files/dab458c9c76eeb608046023c63e8e0cb385d68da..f7f44f0e8bc44cd0e813795cee75b6d1747b6863