Intro: For the last few months I’ve primarily been tinkering with different extensions/plugins. From extensions that simply darken your webpage, to extensions that override the new tab and inject in it a ton of websites, to create sort of a workspace. You can check my latest work here chrome https://chrome.google.com/webstore/search/k.ivanow Disclaimer: Everything that is described bellow can be done with pure canvas js codding, instead of using . However I’ve grown quite fond of since I have used it at work and for several side projects. PixiJS PixiJS Why would anyone do this? At first icons are the most boring part of any project (especially for developers like myself). However this is exactly why some minor touches in an icon can have great impact on the users. I have seen a lot of extensions for Chrome (all adblockers, Limitless, etc) that use the icon badge to display text in it (how many ads are blocked, how much time have you spent on the current webpage, etc). However earlier today I thought that I haven’t seen any extension, that animates its icon. I searched for a while and saw several StackOverflow posts that explain how to icon, by switching between a set of images, defined in the manifest. I decided that it has to be a better way and found that receives not only path to the icon, but can accept imageData as well! Now, let us proceed to the main part of this article. animate chrome.browserAction.setIcon() Hooray!!! How to animate the icon The thought process is straight forward and the execution is easy: Create background page (it will be responsible for the rendering and updating of the icon) Create stage in the background page (it will actually animate the icon) PixiJS Decide on animation — has pretty awesome set of filters, tints, scales, skews and so on… Decide what you want to animate and figure out how to animate it. For me, I decided to use my latest extension — was mainly centered on how much time you have left to live (Memento Mori sort of thing) so I decided that an animated clock that changes its color would be appropriate. PixiJS Mindfulness Execute said animation and update the chrome extension icon on every frame. A few things to keep in mind: ticker will not work in a background page. Nothing based on requestAnimation will work, since the background page is never focused. Use setInterval and animate in it. I use around 33ms, but I could’ve used a 1000ms, it all depends on the animation you have decided to make. PixiJS When extracting the stage as imageData, don’t use the size of the stage, instead use the size of the renderer. The stage is just a container and as such, its width and height are changed by its children. This can result in stretching, squashing or distorting the icon in any other way. Chrome extension icons have issues when the size gets over 190px, according to , so I keep it at128x128. this answer on StackOverflow So, I created a clock class that creates and animates a clock ( ). who would’ve guessed The concept is simple Create stage Add the main icon of the extension Add 3 lines (one for each clock hand) Rotate them based on the current time Change their colour by recreating them for certain tabs (this logic is out of the scope of the article) Dispatch event on every frame In the background page, catch this event and update the extension icon Here is the end result. I use two styles for the arrows depending on the webpage the user is at. Prologue I guess I just came up with something that I haven’t seen done (at least so far. Feel free to correct me if I am wrong) and how to do it and decided to share it. Something similar can be done with a large set of assets, that can be switched to simulate an animation, which is the most common approach I’ve seen while my brief research for the article. The exact same result can be done with a simple canvas and JS code. I prefer because I am familiar with it and it allows me to make more complex animations, if I decide to. PixiJS I hope that you found this article interesting, even if it is for the sole fact that you can just take some part of animated canvas or WebGL context and use it as an icon for chrome extension, instead of a simple png. You can even create your whole icon by simple shapes and filters or blend modes, if you have the time and desire to do so. P.S. Check out the extension , that was the cause for the idea behind this article.

Google

Too Long; Didn't Read

Making security fun one episode at a time

Using PixiJS to generate or animate a Chrome Extension icon.

Too Long; Didn't Read

Company Mentioned

Kristian Ivanov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Using PixiJS to generate or animate a Chrome Extension icon.

Too Long; Didn't Read

Company Mentioned

Kristian Ivanov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES