This weekend’s coding challenege was to create a simple Chrome browser extension that would enable me to click a button to display the SEC Digital Calendar website in a popup window on the toolbar.
Update: the browser extension / add-on is now available for Google Chrome, Brave, Vivaldi, Mozilla Firefox, and Microsoft Edge.
Thankfully, the Chrome Developers documentation is pretty good and really got me off to a good start.
For this kind of extension, all you really need is a manifest.json file which describes to Chrome what the extension does, where the key files such as icons and popup window, plus a popup.html file which is where the code for the popup window goes, some images and a handful of CSS.
This is what my extension folder looks like:
|-- \css
| |-- popup.css
|-- \icons
| |-- 16.png
| |-- 32.png
| |-- 48.png
| |-- 64.png
| |-- 128.png
|-- manifest.json
|-- popup.html
|-- README.htmlYou can see the code on GitHub.
It’s a very simple extension. The popup.html page simply loads an iframe pointing to the SEC Digital Calendar website. This acts like a window through to another website, allowing the SEC digital calendar to seemingly appear in the popup window.
I’ve submitted my extension to the Google Chrome Web Store for review. In the meantime, if you want to use the extension you can sideload it into Chrome (instructions are in the README.md file on GitHub, or install the Page to Popup extension and manually add the SEC Digital Calendar website to that.
Next on my list is to adapt this extension for use with Mozilla Firefox. As far as I can see, the only difference is that Chrome uses manifest_version: 3 while Firefox uses manifest_version: 2. But I will find out more once I crack on with that small project.
Install
The following extensions are now live:
- Add to Google Chrome (also Brave and Vivaldi)
- Add to Mozilla Firefox
- Add to Microsoft Edge
