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 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 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
} );
animator.animate();
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.
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 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 } ); animator.animate();
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.
Comments
That’s really cool~~
I’m wondering if there is a way to reorganize the order of the extension icons, thanks.
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 …
Hi Jan, thank you for the animation code. I used it for the blind text chrome extension https://chrome.google.com/extensions/detail/cppochldfkgoogiimndcieiiadecejfl
Cool! I’m happy somebody found a use for it!
Hi Jan, thanks for the animation code too. I’ll use it for Google DevFest Countdown extension for Google Chrome (https://chrome.google.com/extensions/detail/cpaokbabilmdndkckllokmijokbaoong). Your name will be mentioned in the code. :)
[...] 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 [...]
And where do you write all this code? In the manifest.json file itself or where?
I have the exactly same question which is asked by K9. how do we implement this code. Where do we save it ?