Badge animator for Chrome extensions 5 December, 2009

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, 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 I’ve made Chrome Badge Animator which you can use like this:

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
} );

And this is how it looks in the browser:

The code is freely available on GitHub, under the MIT license, here, so feel free to use it or fork it.

If you wish to discuss this post please use twitter or contact me.


byheaven December 7, 2009 at 11:59 am

That’s really cool~~

byheaven December 7, 2009 at 12:02 pm

I’m wondering if there is a way to reorganize the order of the extension icons, thanks.

Jan Hančič December 7, 2009 at 12:08 pm

I haven’t found a way to do this. Maybe it’s not possible yet, but I assume they will enable this feature before they push extensions to the stable release …

_tasu_ February 20, 2010 at 7:42 pm

Hi Jan, thank you for the animation code. I used it for the blind text chrome extension

Jan Hančič February 20, 2010 at 7:46 pm

Cool! I’m happy somebody found a use for it!

Leonard Lee June 28, 2010 at 1:15 pm

Hi Jan, thanks for the animation code too. I’ll use it for Google DevFest Countdown extension for Google Chrome ( Your name will be mentioned in the code. :)

My first github repository – Jan Hančič September 22, 2010 at 4:27 pm

[...] just a simple JavaScript class you can use if you are building Chrome extensions. I have already posted about it some time ago. Nothing special, just something to get me started with this social coding [...]

K9 June 10, 2011 at 6:04 am

And where do you write all this code? In the manifest.json file itself or where?

Ishan September 1, 2012 at 5:15 pm

I have the exactly same question which is asked by K9. how do we implement this code. Where do we save it ?