Browser extensions can completely customize the experience of using a browser. You can find extensions for every possible scenario you can think of.
In this section, we look at a few useful extensions that work with GitHub. Some of these extensions are available for multiple browsers, but we focus on Google Chrome extensions for brevity.
For a more comprehensive list of browser extensions that work with GitHub, check out my Awesome browser extensions for GitHub repository at https://github.com/stefanbuck/awesome-browser-extensions-for-github.
1. Refining GitHub
The Refined GitHub extension is an open source extension that simplifies the GitHub interface and adds some useful features to GitHub.com. The extension is available for the Chrome, Firefox, and Opera browsers.
You can find the source code at https://github.com/sindresorhus/refined- github. The README has a link to install the extension. Note that when you install the extension, you grant it the ability to read and change your data on api.github.com, gist.github .com, and github.com. It can also modify data you copy and paste.
After you install the extension, you should see an Octocat icon to the right of the address bar. This icon provides some light customization options. One option lets you define some custom CSS specific to GitHub.com. In Figure 14-1, you can see I added some custom CSS to make the repository name larger and dark red. Note that after you change the CSS, you have to refresh the page to see your changes in effect.
Changing the CSS is just a parlor trick compared to the many other enhancements Refined GitHub brings with it.
Browser extensions work by manipulating the generated HTML of a website. It often looks for known landmarks in the pages (such as an HTML element with a known ID) and then adds its own UI elements, removes elements, or changes elements. However, it does this all outside of the code running on the server that actually generates the HTML. What this means is that if a website such as GitHub. com changes their HTML mark-up, an extension feature could stop working temporarily until the authors update their extension to adapt to the new change. So if any of these features stop working, try again later after the extension is updated.
The following is a small sampling of enhancements that are on as a default when you have this extension installed:
» Mark issues and pull requests as unread. This enhancement adds a Mark as unread button to the Notifications section of an issue or pull request. Click it to mark the issue or pull request unread, which puts it back in your notifications list.
» Stop the page jumps from recently pushed branches. Normally, when you push a new branch, the home page of a repository displays a list of recently pushed branches in a yellow bar above the list of code files. The sudden appearance of this list can cause the rest of the page to jump down to make room for the bar. Refined GitHub displays the list of recently pushed branches in the top right overlaying the location where the Fork button may be. By displaying the branches in an overlay, Refined GitHub ensures that the page doesn’t jump down.
» Adds option to wait for successful checks. If you have continuous integration (CI) set up for a repository, it can take a while after someone pushes a pull request before all the checks are completed. The CI might be running static analysis or a linter, unit tests, integration tests, and so on. It can be annoying to wait for all of those processes to complete after you’ve reviewed some code and are ready to merge the pull request. Refined GitHub adds a check box that lets you indicate that it should go ahead and merge the pull request after the checks are complete and successful.
» Reaction avatars show who reacted to a comment. Typically a reaction comment shows only the reaction and the count for that reaction. With Refined GitHub, you can see who all gave a specific reaction.
Refined GitHub contains many more enhancements big and small. The list here is just the tip of the iceberg. In Figure 14-1, notice that there is also a place to disable features that are a part of the extension, as well as a place to put your GitHub personal access token so that the extension can work on private repos as well.
2. Taking a GitHub selfie
As an open source project maintainer, I am ecstatic when someone comes along and submits a pull request for a project. I’m happy when someone opens an issue that identifies a problem I didn’t know about. I feel gratitude for the folks that take time out of their day to help out my project.
And sure, I could use words to communicate my gratitude, but they always seem to fall short of my true feelings. If the old saying that a picture is worth a thousand words is true, how many words is an animated gif worth?
GitHub Selfie is an open source browser extension (https://github.com/thieman/github-selfies) that adds a Selfie button to the comment field that lets you take a selfie using your computer’s camera. You can choose to take a still picture, but where’s the fun in that? It also provides an option to take an animated gif.
Figure 14-2 shows one of the authors using the GitHub Selfie to take a ridiculous self-portrait.
Adding a selfie to express your gratitude is a small detail, but adds a nice warm personal touch to working together with people from all over the world.
Source: Guthals Sarah, Haack Phil (2019), GitHub for Dummies, Wiley.