I’ve been playing with extensions in Chrome lately. It’s amazing how simple it is to make an extension, if you know JavaScript, HTML and CSS you are all set to go. Read this tutorial from Google to see for yourself. I’m now coding something that will, hopefully, someday become a “new private message notifier” for Mojvideo.com, nothing fancy but a great start for someone who has never developed an extension for anything (well OK I have written some jQuery plugins). And plus this extension might please a user or two when it’s released (once Google includes extensions in the main build of Chrome off course).
While coding I thought it would be cool if I could scroll some text in the, what Chrome calls, badge. Kinda like those signs on train stations:
Well below is the code that achieves that (you can freely use it if you like). The code hasn’t been fully tested but I haven’t seen any problems with it.
function BadgeTextAnimator ( options ) {
if ( options === undefined ) {
return null;
}
this.options = {
text: options.text,
interval: ( options.interval === undefined ? 500 : options.interval ),
repeat: ( options.repeat === undefined ? true : options.repeat ),
size: ( options.size !== undefined && options.size > 0 && options.size <= 6 ? options.size : 6 )
};
this.intervalId = null;
this.index = 0;
}
BadgeTextAnimator.prototype.doAnimate = function () {
var startAt = this.index;
var cutAt = this.options.size;
var addBefore = false;
if ( this.index < this.options.size ) {
cutAt = this.index + 1;
addBefore = true;
startAt = 0;
}
var chunk = this.options.text.substr ( startAt, cutAt );
if ( chunk.length < this.options.size ) {
var difference = this.options.size - chunk.length;
for ( var i = 0; i <= difference; i++ ) {
if ( addBefore === true ) {
chunk = ' ' + chunk;
} else {
chunk = chunk + ' ';
}
}
}
chrome.browserAction.setBadgeText ( { text: chunk } );
this.index = this.index + 1;
if ( this.index === this.options.text.length ) {
if ( this.options.repeat === true ) {
this.index = 0;
} else {
this.stop ();
}
}
};
BadgeTextAnimator.prototype.animate = function () {
var spaces = Array ( '', ' ', ' ', ' ', ' ', ' ', ' ' );
chrome.browserAction.setBadgeText ( { text: spaces[this.options.size] } );
this.doAnimate ();
this.intervalId = setInterval ( (function ( self ) {
return function () {
self.doAnimate();
};
} ) ( this ),
this.options.interval
);
};
BadgeTextAnimator.prototype.stop = function () {
clearInterval ( this.intervalId );
this.intervalId = null;
chrome.browserAction.setBadgeText ( { text: '' } );
};
And you use the badge animator like so:
var animator = new BadgeTextAnimator ( {
text: 'this is some sample text', // text to be scrolled (or animated)
interval: 200, // the "speed" of the scrolling
repeat: false, // repeat the animation or not
size: 6 // size of the badge
} );
animator.animate ();
And this is how it looks in the browser:
