unublog

Tab notifier for Firefox and SeaMonkey 1.2

aranor — Mon, 20 Feb 2012 18:20:13 +0000

Tab notifier for Firefox 1.2.0 has been released and now it supports also SeaMonkey!

Several features have been added since the first release, announced in this blog.

The following localizations are available:

Dutch (markh van BabelZilla.org)
German (Archaeopteryx)
Italian
Simplified Chinese (Wang.H.K)
Spanish
Swedish (Mikael Hiort af Ornäs)

To contribute you can either donate on the add-ons page or translate it in you language with BabelZilla

To report bugs or suggest improvements please post on the support page

A slideshow with Flex

aranor — Wed, 04 Jan 2012 11:15:17 +0000

Several months ago we needed a simple slideshow showing some pictures but emphasizing mainly some texts over them. I created a slideshow with the free and open source Flex SDK and TweenMax. You can see a demo here.

How to use it

Download the slideshow and modify the example slideshow.xml. The only other file that you need is slideshow.swf, but if you don’t want to use it on-line but to show images on a local drive use slideshow-local.swf instead. slideshow.xml is the default filename for the configuration file, but you can change it by means of the flashVar “xml“. The most important part of the xml are several slide elements contained in the root element. Each one of them can contain an optional text element and has to contain at least an image element (with its file attribute containing an url or a path depending on the version). The example explains the meaning of other tags and attributes:






0.75
0.75

http://www.joshwoodward.com/mp3/ht/NoVox/JoshWoodward-HereTodayNoVox-06-LearnToFly.mp3

false





Enter: fullscreen
click on on the left border or Page Up: go to the previous slide
click or Page Down: go to the next slide
]]>
 


If you put more than one image in the same slide the extra images will scroll from the right to the left




 



The images are taken from collectionbird.blogspot.com
The song is "Lern to fly", by Josh Woodward (www.joshwoodward.com)
]]>

How to build it

Download the same zip file, that contains the source code. It was coded hastily, still I think it’s a good example of what you can do with Flex SDK without framework (that’s with completely free and open source tools and with a target swf really small) and TweenLite or TweenMax. It embeds code of TwinMax that has its own dual license. To build the slideshow you can use Flash Builder (formerly named Flex Builder) or, if you can’t afford to buy it, download the Flex SDK as I did.
An ant script is not provided with the slideshow, but there are a batch file for windows (build.bat) and a shell script for Linux (build.sh) used to build it with Flex SDK 4. You may need to configure them depending on the installation directory of the SDK etc.

Options for a chrome extension: tab notifier 1.1

aranor — Wed, 21 Dec 2011 09:05:55 +0000

The version 1.1.0 of tab notifier for chrome has been released. It now stores persistently the list of ignored sites and allows to manage it by means of a option page. Let’s see how it’s done.
To store the options now the extension uses the localStorage attribute of the window object.
This is the simplest part. As we saw in the previous post everytime there is a click on the menu item “Ignore this site” we change the object mutedDomains. Now we also stringify it to store it in localStorage:

var menuItemId=chrome.contextMenus.create({type:"checkbox",
	title:"Ignore this site",
	checked:true,
	contexts:["all"],
	documentUrlPatterns:["http://*/*", "https://*/*"],
	onclick:function(info,tab){
		var hostname = getHostname(tab.url);
		if (hostname) {
			if(info.checked) {
				mutedDomains[hostname]=true;
			} else {
				delete mutedDomains[hostname];
			}
			window.localStorage.ignoredSites = JSON.stringify(mutedDomains);
		}
	}
});

Please note that we don’t need to put the attributes of localStorage inside a namespace (hence ignoredSites is totally arbitrary) because they will be unique for every extension in the way they are unique for each subdomain when they are used in the scope of a web page.

To restore the object we use the following code:

var updateOptions=function() {
	var s=window.localStorage.ignoredSites;
	if (s) try {
		mutedDomains=JSON.parse(s);
	} catch(e){console.log(e);};
};
updateOptions();
window["updateOptions"]=updateOptions;

The function “updateOptions” is attached to the window object to be accessible to the option page as we’ll see pretty soon.
Since now the list of ignored sites won’t be reset at the beginning of every session, it becomes more important to allow the users to manage that list. We can achieve that with an option page. Let’s add a row to the manifest.json file:

{
   "background_page": "background.html",
   "content_scripts": [ {
      "js": [ "tabnot.js" ],
      "matches": [ "http://*/*", "https://*/*" ]
   } ],
   "description": "Notifies when the title of a tab changes",
   "icons": {
	"16": "icon16.png",
	"48": "icon.png"
   },
   "name": "Tab notifier",
   "permissions": [ "tabs", "notifications", "contextMenus" ],
   "options_page": "options.html",
   "homepage_url": "http://unusoft.it/blog/index.php/tab-notifier/",
   "update_url": "http://unusoft.it/extensions/updates.xml",
   "version": "1.1.0"
}

Then we add two new files to the extensions: options.html and options.js. The first contains the interface of the configuration, here’s the core of it:

ignoredSitesSl will be programmatically filled when initOptionsPage (contained in options.js) is invoked. To see the full code follow the instructions in the previous post.
Beside the initialization of the interface options.js contains the javascript code bound to the click event of every button in the page:

(function() {
    var ignoredSites,ignoredSitesSl,removeBt,selectAllBt,saveBt,ResetBt
    ,load=function() {
		var s=window.localStorage.ignoredSites;
		ignoredSites={};
		if (s) try {
			ignoredSites=JSON.parse(s);
		} catch(e){console.log(e);};

		for (i in ignoredSites) {
			var o = document.createElement("option");
			o.innerHTML=i;
			ignoredSitesSl.appendChild(o);
		}
		disButts(true);
    }
	,disButts=function(a) {
		resetBt.disabled = a;
        saveBt.disabled = a;
	}

    window.initOptionsPage = function() {
        removeBt = document.getElementById("removeBt");
		selectAllBt = document.getElementById("selectAllBt");
		saveBt = document.getElementById("saveBt");
		resetBt = document.getElementById("resetBt");
		ignoredSitesSl = document.getElementById("ignoredSitesSl");
		load();
        removeBt.addEventListener("click",function(){
		var d=false;
			for(var c=0;c 0) ignoredSitesSl.options.remove(0);
			load();
		},false);
    };
})();

As you can see from the rows 48 and 49, when the button “Save” is pressed two actions are performed: the list of ignored sites is stored and the updateOptions function in the background page is called. In this way the background page always uses the most recent version of the list.

Tab notifier for Firefox

aranor — Thu, 15 Dec 2011 16:21:41 +0000

Tab notifier for Firefox has been released.
This extension shows a desktop notification when the title of a tab changes while the tab is not focused.
Here’s some features of this extension that are not yet available in the chrome version:

~~You can manage the list of web sites to block.~~ Update (21/12/2011): added this feature to tab notifier for chrome as well
You can block a web site just with one click when the first notification appears.

You can install it from the Mozilla Add-ons web site.

Ontogeny of a chrome extension: the tab notifier

aranor — Fri, 04 Nov 2011 11:52:43 +0000

The tab notifier is our solution for who uses messaging web clients but don’t want to renounce nice toasts popping up as alerts. Let’s see how it’s done, in order to be able to customize it or to learn something that may be useful to make other extensions.
To develop a chrome extension you need to know javascript and few more things.
Let’s start from the begin.
We need to create at least a manifest.json file and a html file with the javascript code that will be run in background. A first simple technique that we can use to detect title changes is to compare every few seconds the title of every tab of every window with the previous value. We already know that we are going to do it in a better way, but getting the list of the tabs is definitely one thing that can turn out useful, so let’s start from here.

Here’s the file manifest.json:

{
	"background_page": "background.html",
	"description": "Notifies when the title of a tab changes",
	"name": "Tab notifier",
	"permissions": [ "tabs" ],
	"version": "0.1"
}

Note that we need the tabs permission (as every time we need to use APIs from the chrome.windows or chrome.tabs namespace). This makes a warning show up when you install the extension from a compressed .crx file, but not when you install it form an unpacked directory (which it’s what we are going to do as long we are still developing it).

Here’s the file background.html:

The background page is loaded when the plug-in is started or reload, and it contain only the javascript code bound to the load event of the page. This code scans all the tabs every 20 seconds, please note from the row 13 that the pop up is showed only when a title is changed but the url is not (which means that the title has been changed by some javascrit code because the page is still the same) and only if the tab is not opened and the windows focused (that’s it only if the user is not seeing what it’s happening).
To try the extension go to the page chrome://extensions/, active the “Developer mode” and click on “Load unpacked extension…”, going to the directory where our two files are.
To test it more conveniently you may need a small html page like this. It generates a scrolling title (which ideally is one of the things that we wouldn’t like to cause a notification but it’s perfect for our aim because it keeps on generating the event that we are trying to detect, anyway we’ll try to distinguish a scrolling title from an actual message notification, in some cases, later on, not showing it a second time after we close it, refer to cyclic messages detection). We can experiment some defects easy predictable. Definitely the more obvious is that we can have a delay after the tile change. This can be acceptable when we receive an email, but can be intolerable when we receive a instant message. We can play with the pollInterval variable, however, another defects is that a script has frequently to go through all the tabs even when nothing is happening, and decreasing pollInterval would make things worse.

I believe in a better way (content scripts).

Instead of polling every tab we can proceed the opposite way. We can use the DOMSubtreeModified events in every tab we want to monitor to detect at once every change of the title. This is possible because chrome allows us to inject javascript in the pages. Since this injected javascript can access only to a small subset of the chrome APIs, we need to send a message to the background page and let it do the rest. To inject javascript code we have to add the content_scripts permission and the new field content_scripts to the manifest.json file:

{
	"content_scripts": [
		{
			"matches": ["http://*/*", "https://*/*"],
			"js": ["tabnot.js"]
		}
	],
   "background_page": "background.html",
   "description": "Notifies when the title of a tab changes",
   "name": "Tab notifier",
   "permissions": [ "tabs", "notifications" ],
   "version": "0.2"
}

our content_scripts field says that the javascript in tabnot.js will be injected in every page (but just if it’s the top frame) whose the url matches “http://*/*” or “https://*/*” (that’s for every page in a web site). This code will run inside an isolated world, so we don’t have to worry about clashes with any javascript in the monitored pages.

The content of tabnot.js file is:

var titleEl = document.getElementsByTagName("title")[0];
var docEl = document.documentElement;

if (docEl && docEl.addEventListener) {
	docEl.addEventListener("DOMSubtreeModified", function(evt) {
		var t = evt.target;
		if (t === titleEl || (t.parentNode && t.parentNode === titleEl)) {
			titleModified();
		}
	}, false);
} 

function titleModified() {
	chrome.extension.sendRequest("");
}

We’ll make more complex the function titleModifier to fit the needs will occur. Now it’s pretty simple: it send a message to the background page (as we said the content scripts can’t use all of the chrome APIs but can, off course, communicate with other parts of the extension).
This is the new background.html:

The _request_ parameter of the callback function passed as listener will be always an empty string according with the sendRequest inside tabnot.js. However we have all the information we need inside sender.tab.
Please note that, unlike what we could do with the previous method, when after any change to the code we needed to reload only the extension, now we need to refresh also the monitored tab in order to reload the injected javascript.
Testing it with this page we’ll see that that shortly the screen will be filled with notifications. Probably it’s better if every tab can trigger just one notification each time, and that if the title changes again while a notification is still open the old notification will be replaced accordingly. In this way scrolling titles and cyclic messages will be readable the same way you can do it on the tab.
The chrome API offer a simple way to achieve that, the property replaceId of the notification object. We set it before showing the popup and when we try to show it and a popup with the same value of replaceId is already open then the old one will be replaced. The API documentation says that the id of a tab is unique in a session, then we can use it as replaceId value.
Another desirable feature is that capability to open the tab when you click on the popup showed by it. Then we’ll close the popup because its job is done.Here’s the third version of the background page:

Cyclic messages detection

We have built something that detects promptly every change of title in the tabs but we’d like to show a notification only when it’s useful (and not annoying…).
Let’s consider for instance a case that can be applied to several web sites. When an instant message arrives, Facebook changes the title alternatively from the original value (e.g. “Facebook”) to something like “Charlie Brown messaged you” and vice versa. The user may not be interested in the message, and she can just choose to close the notification, but, if we simply show the notification every time a title change (as we have done so far), the notification will keep on showing up. To avoid this we may use an algorithm as complex as we like, but we are going to restrict the scenario to the case of messages showed always in the same order and all different from each other, which should cover all of the relevant eventualities.
We use an array containing the titles that could be part of a cyclic message.
If the title changes twice within 15 seconds we push the titles in the array, but if the title changes slower we empty the array.
As long as a change occurs fast enough we compare the new title with an old one (accordingly with an index increased every time there is a match and reset when there isn’t) and every time there isn’t a match we push it in the array. When the title matches the very last element of the array the boolean cycle is set to true. The comparison goes on with the following changes of the title and cycle will be reset the first time a new title doesn’t match an old one. If you close a popup during a sequence detection every new change to the title while cycle is true won’t trigger a new notification.
The cyclic messages detection can be implemented in the content script or in the background page. Every choice has its own pro and con but they are not a big deal. In the current version (1.0) of the tab notifier the detection is implemented in the content script (tabnot.js) and the requests sent to the background page contains a string that indicates whether to show or to hide the notification, while the background page distinguishes the reason of the closing of a popup and when it’s due to a click of the user on the closing icon (that’s, if you look into the code, when popup.closingReason is undefined) it uses the API chrome.tabs.sendRequest to communicate it to the content script.

Other improvements

To see the full code you can, after installing the extension, go to the directory where the files are stored by chrome, that should be ~/.config/google-chrome/Default/Extensions/ on linux, something like C:\Users\*UserName*\AppData\Local\Google\Chrome\User Data\Default\Extensions in a recent windows or C:\Documents and Settings\*UserName*\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions in an older version of windows.
The code is a bit more complex compared with the one in this post. In fact, beside the cyclic messages detection, it implements some small extra ideas. For instance it reproduces the behaviour of a IM client also when it hides an open notification when the tab that triggered it is opened manually (this is done by means of the events onSelectionChanged and onFocusChanged).

What we think is really important is to leave the user free to decide what has to be notified and what must not. Which actually is another excuse to introduce another magic of the chrome extensions: the context menus.

Let’s change again the manifest:

{
	"content_scripts": [
		{
			"matches": ["http://*/*", "https://*/*"],
			"js": ["tabnot.js"]
		}
	],
	"icons": {
		"16": "bell.png"
	},
   "background_page": "background.html",
   "description": "Notifies when the title of a tab changes",
   "name": "Tab notifier",
   "permissions": [ "tabs", "notifications", "contextMenus" ],
   "update_url": "http://unusoft.it/extensions/updates.xml",
   "version": "1.0.0"
}

The highlighted changes show a new permission (contextMenus) that allows us to use the APIs in the chrome.contextMenus namespace. The icon 16×16 is showed next to a new “Tab notifier” item on the context menu by chrome. Just right-click on a web page too see it.
In the background page we create a checkbox item in the context menu of chrome titled “Ignore this domain for the current session” with chrome.contextMenus.create during the initialization and we check or un-check it by means of chrome.contextMenus.update whenever the user selects a different tab. When the user clicks the menu item the extension updates a set of blocked hostnames. Here’s the creation of the item:

var menuItemId=chrome.contextMenus.create({type:"checkbox",
	title:"Ignore this domain for the current session",
	checked:true,
	contexts:["all"],
	documentUrlPatterns:["http://*/*", "https://*/*"],
	onclick:function(info,tab){
		var hostname = getHostname(tab.url);
		if (hostname) {
			if(info.checked) {
				mutedDomains[hostname]=true;
			} else {
				delete mutedDomains[hostname];
			}
		}
	}
});

getHostname is a simple function that extracts the hostname by mean of a regular expression. contexts determines the types of elements of the page that will have the item in their context menu, documentUrlPatterns limits the documents that will have the item in their context menu on the basis of the url, in our case it’s equal to the content_scripts.matches field of the manifest, that limits the monitored pages. Here’s the function used to update the menu item:

function updateMenu(url) {
	var hostname = getHostname(url);
	chrome.contextMenus.update(menuItemId,{checked:hostname.length>0 && (hostname in mutedDomains)});
}

Ideas for the future

Maybe you don’t like the matter that the list of ignored domains are not kept stored between two consecutive sessions. Indeed, doing that would be easy enough thanks to a new feature of Html5, localStorage. But I wouldn’t do that until we enable the user to see and edit directly the list. We can do that adding an option page, and with that we can do even more like managing regular expressions to ignore groups of url or subdomains (besides to ignore single urls). The list should be initially filled with a default set of web sites that already use desktop notifications.
Html5 audio may helps to add another cool feature, that’s configurable audio notifications (that have to be disabled for a configurable list of web sites, initially filled with well-known sites that already play sounds when they have something to notify.

Update (21/12/2011): by the time you read this post some of the listed features will have been implemented.
Please check the changelog

Notifications for everyone

aranor — Fri, 21 Oct 2011 18:23:15 +0000

If you use one or more web-based emails or web thin clients for Instant Messaging such as Yahoo! Messenger, GMail chat or Facebook, it’s probably because for some reason you find them better than the equivalent desktop applications, or likely you don’t want to install stuff at the office, or you can’t do it. A disadvantage of this solution is that you don’t have a visual notification when a new email or chat message arrives (at lest so far, and unless your browser is chrome and your web-mail is gmail (which uses the desktop notifications) or you can take advantage of some other combination of browser-plugin-webclient using HTML5 Notifications or similar, which is not my case).

If you can install at least one desktop application, an excellent “all-in-one” solution is a multi-protocol IM program such as pidgin that notifies also new incoming emails for some kind of mailboxes. If you opt for pidgin you should install a plug-in that shows notifications in a “toaster popup”, for this porpuse I used guification 2 for long, but I don’t think it’s nice with the default theme. To install a theme, after downloading it, open the themes tab (Tools>Plugins>Guifications>Configure Plugin>Themes), drag the downloaded file and drop on it. This post shows a screenshot of guification with the Green Toast Theme. On a recent linux distribution you may prefer to activate the pre-installed libnotify plug-in.
Pidgin is not the only multiprotocol chat client out there, I’d like to mention at least Empaty.

An alternative for users without administrator privileges is to install a suitable extensions for your browser. I checked the chrome web store and there were several of them. Some act as proper email clients, which means that you have to configure them the same way you would do it with your desktop email application, others use specific ways to check the mailbox such as the Yahoo! Mail API, I didn’t find an all-in-one solution (please post it if you find something with nice alerts for any of the major browsers).

Let’s do it ourselves

The basic idea here is that to solve a simple problem you should need a simple solution. Most of the mentioned web clients change the title of the page to tell the user that something happened. If we can detect and correctly interpret these alerts we can take advantage of that, in this way we won’t need to poll the mailboxes duplicating the work of the web-based mails and we won’t need to configure anything. Basically we won’t need to reinvent te wheel, the web clients are there and usually they are good enough, we just need to add the things that they need: the desktop notifications.
This is what the Tab notifier for chrome does. In the next post we’ll see how it is made, using it as an excuse to explore some of the capabilities in developing chrome extensions.