Outreachy Internship with Mozilla:Week-2
This week was good. Last week I learnt about building themes and this week I actually implement these. In this blog I’ll explain about building dynamic themes.
A theme and browser extension functionality cannot be defined in one package. One can, however, programmatically include a theme in an extension using the Theme API and those themes are called dynamic themes.
I made one dynamic theme where theme is changing according to the time of day. After that I added an additional functionality using browser action. So, a user can add an alarm to it’s firefox page using browser action button.After setting alarm( in hours), whenever the hour matches with the alarm time hour, the page produces a sound and theme is changed for one minute. After one minute the theme is again resumed with the particular day time theme. It was fun making this. :-)
First you need to create a manifest.json file within your main folder. This file specifies basic metadata and theme components. My manifest.json file looks as follows-
Next, you need to build a JSON object containing the information about your theme. See the example below-
Theme that appears when alarm hours matches with the current time( written in alarm.js file).
Day, night themes ( written in background.js file)-
Lastly, pass the JSON object in a theme.update() call as shown below-
So, building a dynamic theme is fun. All you need is to keep some points in mind and tada~ theme is built. :-D
I would like to attach a GIF of the dynamic theme. Note that I am writing this blog during day time, so the GIF has day theme along with an alarm theme which user can set at any hour.
At the end, I would like to thank my awesome mentor Les Orchard. :-) He is assigning some cool stuffs to me and answers all my doubts. :-D
Thanks for reading. If you are having any suggestions or thoughts on this, be sure to leave a comment. :-)
Bye Bye :-D