Chrome Notifier Starter

This repository provides a base for creating Chrome notifier/checker extensions, i.e. extensions that notify the user about updates or activity on their favorite apps or websites. Examples of such extensions are: Gmail Checker and Outlook.com Notifier. The latter actually uses Chrome Notifier Starter as a base.

Usage

Create your own notifier/checker extension in a few simple steps:

1. 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 your notifier 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!