Notifications in javascript without user input

Question

I've been trying to figure out a way to use notifications on a background process and couldnt find anything online about it. So, I figured out one way around it and wanted to share (Not sure if this is the best way to go about doing this but here goes:)

Problem: I want to notify the user of new info when the page is running but in the background (blurred). I could use alert('new info!'); to get the taskbar icon to flash, but then you have to manually dismiss it (tried it and it's hella annoying). I really liked the notifications, but they only work if the user performs an action, so not helpful...

Answer 1

My solution: I made a chrome extension that runs in the background and triggers the notifications. It's a little limited in scope as you need to have chrome to do it, but it does what i need it to, and for the purposes of the problem i'm working on, i can just make my user group use chrome ;D

The specifics: The extension only has two components, the manifest and a script. Currently, i setup the manifest so that it only works on my site using the match identifier... and i set the permissions to include notifications.

The JS script has a window.setinterval that looks for an element in the page with the id NOTIFIER. If it's empty, it does nothing, otherwise it creates a notification based on the content and then clears the content to prevent showing the same notification multiple times... (I tried using .onchange for that element, but couldn't get the event to trigger... I'd prefer to do this on an event rather then setInterval)

Notify.js

function onExtLoad() {
  var timer = setInterval(refresh,1000);
}

document.addEventListener('DOMContentLoaded', onExtLoad());

function refresh() {
if (document.getElementById('NOTIFIER').innerHTML == "") {
    //do nothing?
} else {
    var notification = webkitNotifications.createNotification("",
        "You got a new message",
        document.getElementById('NOTIFIER').innerHTML);
    notification.show();
    document.getElementById('NOTIFIER').innerHTML = "";
}

}

Then, all i need to do is have the JS on the page control when it adds info the the NOTIFIER and voila! notifications!

Hope this helps someone else.

@ExpertSystem: I messed around with the MutationObserver but I can only get it to trigger once. Here's a JSFiddle: http://jsfiddle.net/BTX8x/1/ Am I missing something? Is there a way to reset it?

EDIT: Figured it out, i needed subtree:true