Outreachy Internship with Mozilla:Week-2 – Shruti Singh – Medium

Hello folks! 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. Introduction 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 themes are 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 forefox page using browser action button.After setting alarm( in hours), whenever the hour matches with the alram 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. :-) Getting Started First you need to create a manifest.json file within your main folder. This file specify basic metadata and theme components. My manifest.json file looks as follows- manifest.json Here “permissions” is necessary to request “theme” for building Dynamic themes. For including browser action, we add “browser_action” in manifest.json. But what is browser action? A browser action is a button that your extension adds to the browser’s toolbar. The button has an icon, and may optionally have a popup whose content is specified using HTML, CSS, and JavaScript. Here the popup content is specified in “alarm.html”. In this pop up you can set alarm ( in hours). 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