Patrick Donovan put out a tweet the other day with a screenshot to a Chrome extension he had just put together. It caught my attention and led to this post because it’s a really, really good idea.
— Patrick Donovan (@donovanscience) July 22, 2016
I tracked down Curt Schleibaum whose website included a demo to his Chrome extension idea. In short, he provided a template which included all of the necessary files to have a simple popup Chrome browser extension. It was quite clever – instead of having the user change code for the extension to push information, it had an embedded Google Doc that you use updated with new information. It also included links back to the district website, tech support, etc.
It got me thinking about how the extension could be improved, so that’s what I put together last night. The source is on GitHub so you can see the nitty gritty. My extension builds on Curt’s original idea – allowing a teacher or admin to use a Google service to push announcements out to extension users. Instead of a document, mine uses a spreadsheet and watches for an update to publish and then badges the extension when new information is available.
If you want to play with this yourself, follow the steps below (mostly proof-of-concept at this point, lots of refining to do).
Get the spreadsheet
Google spreadsheets are your friend. The best thing, in my opinion, is that they publish in multiple formats when you publish one to the web (this is different than sharing). One of those formats is JSON, which is a great way to take a lot of data, organize it, and then display that information nicely in another application.
Grab this template spreadsheet and save a copy to your Drive. Then, go to File > Publish to the web and publish it with all the default settings.
popup.html file. The JS does all the magic with the spreadsheet JSON data and the HTML displays it nicely in the Chrome browser. The JS will also ping the spreadsheet every few minutes to see if there have been updates. If there was an update made, a badge notification will appear on the extension icon. Sweet.
The easiest way to do this is to download the extension and load it locally on your machine. To do that, open the project on GitHub and click on “Clone or download” on the right side of the screen. Unzip the file that downloads.
Next, go to
chrome:extensions and make sure “Developer Mode” is checked. Once it’s checked, you can click on, “Load unpacked extension” and select the folder you just unzipped.
The extension needs one more thing: the spreadsheet key. Go back to the template spreadsheet and grab the jumble of letters and numbers that come after
edit in the URL. An example URL would be,
. When you click on the extension icon the first time, you’ll be prompted to copy and paste that spreadsheet key into the box. Now, you’re good to go!
To test the extension, go back to your spreadsheet template and add some data. Give it a minute or two and, hey presto! Your extension will update with the information you just entered.
Most schools are using some kind of learning management system which includes a messaging app. If you’re not, this would be a good way to talk with your students (maybe). In our case, we’re looking at using this as a rapid-push service to notify teachers and other staff about upcoming professional learning, system outages, or other announcements that need to be sent, but don’t need an email. It’s definitely an experimental project, but one I’m curious to play with some more.