Blog

Dec 31
2012

Chrome notifier extension starter kit

Need a Chrome extension that regularly checks for new updates on your favorite website or application and notifies you of new items, similar to Gmail Checker and Outlook.com Notifier?

The Chrome Notifier Extension Starter Kit allows you to whip something together in a few easy steps:

  1. Fork or clone the repo:

    git clone https://github.com/tombb/chrome-notifier-extension-starter.git

  2. Load the extension in Chrome:

    See Chrome Developer Docs on how to load an extension in developer mode.

    Out-of-the-box the extension will report a random number generated by www.random.com. Every minute the number will change to something else. Enable desktop notifications on the options page to get a notification every time the random number increases.

    This is of course pretty useless. To change it so it reports about your own application or site, follow the steps below.

  3. Change the title of the extension:

    in app-notifier.js:

    AppNotifier.ATTRS = {
	// ..
	title: {
		value : "Your Title"
	},
	// ..
}

  4. Make sure the domain(s) for which your extension needs permission are in the manifest and in app-notifier.js

    manifest.json (use Chrome Match Patterns):

    "permissions": [
	"tabs",
	"*://*.domain.of.your.app.com/"
],

    app-notifier.js (use exact domains):

    AppNotifier.ATTRS = {
	// ..
	domains : {
		value : [
			'the.domain.of.your.app.com',
			'another.domain.of.your.app.com'
		]
	}
	// ..
}

  5. Set the url attribute in app-notifier.js to the URL you’d like to poll for updates/activity:

    AppNotifier.ATTRS = {
	// ..
	url : {
		value : 'https://url.to.your.app.com/some/page'
	},
	// ..
}

  6. Change getNumberFromNode() in app-notifier.js to return a number of new or unread items you’d like to notify the user about:

    getNumberFromNode : function (node) {
	return node.one('.some .selector').get('text');
}

  7. Optionally, replace the following files by your own images:

    app.png Image shown on the options page and in desktop notifications of your extension.

    browser-action-icon-active.png Active browser icon, shown when the extension is successfully polling your app or site.

    browser-action-icon-inactive.png Inactive browser icon, shown when the extenstion couldn’t reach the app or site it’s checking for activity.

  8. Reload your extension in Chrome, then debug and improve until you’re happy!

Nov 28
2012

New Chrome Extension - Outlook.com Notifier

A common bug report I receive from users who try my Outlook 365 Notifer Chrome extension is that it doesn’t work for the “new” Hotmail: Outlook.com. The reason: it was never meant to.

This got me browsing the Chrome Webstore for an extension that does what these people want. To my surprise I was unable to find it. Although I’m not a Hotmail user nor a Christian, I decided to write one. Love Thy Neighbor as Thyself!

After a few hours refactoring and tweaking the original extension, there we go: An email checker for users of Microsoft’s new smart and modern free inbox.

Outlook.com Notifier

  • Displays the number of unread emails
  • Click on the button to open your inbox
  • Optional desktop notifications

It’s early days, but I’m excited to see a steady growth of user numbers and some raving reviews for this extension!

Aug 5
2012

Outlook 365 Notifier now in Chrome Web Store

A few months ago, the organisation I work for migrated email from a combination of on-side hosted MS Exchange and Linux based mail servers to Microsoft’s new cloud based offering: Office 365.

Not entirely to my surprise, I Immediately I found myself in some trouble. I use Ubuntu on my desktop with Mozilla Thunderbird as the email client. Although Outlook 365 does have IMAP support, it didn’t play as nicely with Thunderbird as I would like.

I tried using MS Outlook in a Windows virtual machine for a while but that had it’s own drawbacks (e.g. links would be opened in the Windows browser instead of on my host OS).

Thankfully, the Outlook 365 web-based email client isn’t too bad.

Problem solved? Well, no.. the web app doesn’t work on my favorite browser, Chromium for Linux.

So, I wrote a little Chrome extension that fixes the issue (by pretending to be another browser) and threw in desktop notifications as well.

After having used it for a while and some beta-testing by a colleague I published it on the Chrome Web Store.

So far so good, it’s been in the store for a few days now and already has 50 users. Great to see this is useful to folks out there! :-)

Jul 25
2012

Made with Jekyll and Foundation

A few words on what this site is made of. It’s based on some great work by the open source community:

  • It’s a static site, made with Jekyll, which means I’m writing this in Markdown. Why Jekyll? I had a look at Python tools like Hyde and Blogofile as well, but thought this was as good an excuse as any to start having a play with Ruby.
  • I’m using ZURB Foundation a, SASS/Compass based responsive front-end framework to make it all look decent. Why Foundation? I didn’t want this to look like yet another Bootstrap site, and this was as good an excuse as any to have a look at SASS :) Plus, Foundation comes with some nice little Javascript features like JQuery Orbit (slideshow) and Reveal (modal panel), which came in handy on the projects page.
  • Writing and maintaining a CV isn’t the most interesting task, so I had had a look around to see if there’s anything out there that can make this a bit more fun. I thought of using LaTex, but wanted to keep it simple. I came across this project on Github that allows you to write your CV in Markdown and easily host it on Github-pages or Heroku. I liked another project that had a nice summary button. I decided I would take a bit of both and would be able to use wkhtmltopdf and/or Pandoc to generate .doc, pdf and even LaTex documents if needed.
  • Oh, last but not least, this site is hosted on Rackspace and for now deployed using the magic of scp..

Still to do: dot a few i’s here and there and share on Github like most of the projects mentioned above!

Jul 22
2012

Welcome!

Welcome to yet another “tech blog”. I’m starting this site for two reasons:

  • To have a proper web presence where colleagues, employers, clients and who-ever might be interested can find information about my “professional” life.
  • To have a place where I can share and discuss anything I’ve learnt that I think may be worth something to others too.

I’ll probably talk about my experiences writing apps and managing a software development team.

If you’re looking for my adventures coming to Australia, you can still find them here.

Thanks for stopping by!