Outreachy Internship with Mozilla:Week-2

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 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. :-)

Getting Started

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-

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