Tuesday, 26 March, 2019 UTC
Summary
Last week Christian Heilmann (codepo8) released a handy bookmarklet that lets on switch between the GitHub Pages URL of a repo hosted on GitHub and the repo contents itself. This afternoon I took the liberty of transforming it into a Chrome Extension, mainly as an exercise to myself.
The extension adds a small button which becomes active whenever you are visiting a
*.github.com or *.github.io domain. Upon clicking the button you toggle between the two URLs.To create this plugin I started out with the core of Christian’s script and decorated the required Chrome Extension stuff around it. A few notes on the latter though:
- How to Make a Chrome Extension is a good starting point, but you’ll quickly want to check out the official documentation too.
- Chrome provides a nice API which you can find at its Developer Guide. But before checking those, it might be worth to take a peek at some of the examples. I especially found the cld, pageaction_by_url, and merge_windows examples interesting.
- With Developer Mode enabled, you can not only load your local in-development extension but also inspect it with the DevTools (and thus use
console.log(), breakpoints, etc) - To publish your extension head over to the (new) Chrome Web Store Developer Dashboard. No need to pack it locally into a
.crxfile: you only have to create a.zipfile and upload that zip.
GitHub Toggle Chrome Extension on the Chrome Web Store →
GitHub Toggle Chrome Extension Source (GitHub) →
GitHub Toggle Chrome Extension Source (GitHub) →
Manipulating Chrome through a JavaScript API reminds me of controlling Photoshop using JavaScript which has excellent scripting capabilities … using its Scripting API you can create a script for Photoshop to cut up a large image into tiles for use with Google Maps or a script that allows one to export/import translations from a Photoshop file.