Push Announcements With a Chrome Extension

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.

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.

The Extension

The extension is a collection of JavaScript files and a 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

`https://docs.google.com/spreadsheets/d/`

and before edit in the URL. An example URL would be,

`https://docs.google.com/spreadsheets/d/THE_SPREADSHEET_KEY_IS_HERE/edit`

. 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!

Testing...testing...

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.

6 thoughts on “Push Announcements With a Chrome Extension

  1. John Wallace says:

    Howdy Brian,

    Working on an educational browser extension myself…am eager to see what mods you have added. However, I hit a snag on install (note below).

    Was it necessary for Curt Schleibaum to add you to a Google Docs “sharing” list to get access? Is he on GitHub? (Searched GitHub using his name, “geekyedtech”…no joy.)

    Having downloaded and unzipped the extension from GitHub (thank you!); I attempted to load the “unpacked” extension and rec’d the following error:

    Error Loading Extension

    Failed to load extension from: C:\Users\Public\Documents\Original DLs\geekyedtech\announcements-master

    Could not load background script ‘jquery-3.1.0.min.js’.

    (You’ll want to include a copy of the jquery file in the GitHub files.)

    • John Wallace says:

      (Placed your extension files in “geekyedtech” folder, thinking Mr. Schleibaum’s original would be added next.)

    • Brian Bennett says:

      Hey John,
      I’ll reply to all of your comments at once:

      1. Sorry about the source errors. I meant to go back and include the jQuery library in the GitHub repo when I published it and I just forgot. It’s pushed with the correct dependencies (including icons). In fact, my next step is to go back over and remove the jQuery…I’m not convinced I even need it.

      2. With Curt’s extension, yes, it would need to be shared because it’s just an `iframe` element showing a document. So, if it isn’t shared with you in the first place, the embed won’t work. With my method, the spreadsheet just needs to be published to the web, not shared.

      3. There is a way to make sure the user is logged into a Google account, I just haven’t added it yet.

      Thanks for downloading and letting me know about the issues. Let me know if there is other stuff you’d like to see added :-)

      • John Wallace says:

        No apology necessary. It is impressive to see educators designing, riffing (re-mixing?), and sharing tech, in the way that you & Curt & Patrick are doing. I was able to substitute an image for 19.png (smart to name it that way, was immediately clear that it was for the browser action icon). If there is ever anything I can do to test, preview, etc., I would be happy to help. You have my addy. Cheers!

  2. John Wallace says:

    Then this:

    Failed to load extension from: C:\Users\Public\Documents\Original DLs\geekyedtech\announcements-master
    Could not load extension icon ‘icons/19.png’.

  3. John Wallace says:

    I wrote two HyperCard™ “stacks” for the classroom in 1991, my first year of teaching.

    One of those presented a sequence of input screens for students to
    a) enter their name (for my database)
    b) receive a group assignment (lab groups; 1 thru 8, random generated)
    c) enter the book # (inside of front cover)

    Several screens in, one young lady looked at me with wide eyes and whispered

    “It knows my name!”

    (The app used the name that they had entered themselves, later in the session; but, there were no “digital natives” back then.)

    Having left the classroom in 2000*, it is encouraging to see you, Mr. Donovan, and Mr. Schleibaum all writing code, too.

    You guys rock!

Leave a Reply

Your email address will not be published. Required fields are marked *