Most of us are generally up for saving environment, working towards greener future. But many don’t know how each one of us can contribute to the same. Sustainable living is not just about big things like buying a $100k ModelS, it is about the choices we make everyday. Everyday choices and small habits can lead towards saving tons of money in the long run and also keeping the surrounding clean and green.

I have tried to create a chrome extension which aims to guide us through various everyday activities that can lead to a sustainable living in a minimally invasive manner. The users will get a tip everyday which you can read and if you agree, absorb in your everyday routine. Within a year you will notice you bank balance depleting at a slower rate that before.

marquee2

Intro to developing Chrome Extensions: Google has provided extensive documentation on how to develop chrome extensions. The APIs are well documented HERE.

One should keep in mind the following architecture of any extension. The extension must have the following pages:

Manifest.json file : This file has all the basic information and permission about the extensions. Sustainability extension should allow notifications and hence that permission has to be enabled in the manifest file.

{
“name”: “Sustainability”,
“version”: “0.2”,
“description”: “Sustainability isn’t just about the big things, like what vehicle you buy, it’s also the small choices we make every day”,
“icons”: {“16”: “16.png”, “48”: “48.png”,”64″: “64.png”, “128”: “128.png”},
“permissions”: [
“notifications”
],
“options_page”: “options.html”,
“background”: {
“scripts”: [“background.js”]
},
“manifest_version”: 2, //this has to be 2 for the extension to work properly
“web_accessible_resources”: [
“48.png”
]
}

There should not be any lines commented in the manifest file else it will not get uploaded to the developer dashboard. 

Background.js or Background.html file : This file has the main logic for the extension. There are two types of background files a) Event files, which only run when triggered by an event and b) persistent files, which are continuously running in the background. The permission “persistent=false” should be stated in the manifest file for it to make an event file. By default background files are persistent.

This page implements a show function which gets the current date and pulls a notification item from an array to display.
function show() {

var date = new Date();
var day = date.getDate();
var month = date.getMonth();
month = month+1; //because January is indexed as Month 0
var dateString = day+’/’+month;

var notification = new Notification(“Sustainability Tip of the Day”, {
icon: ‘leaf.png’,
body: tips[dateString]
});

It also implements a setInterval function which fetches the user defined notification frequency and correlates with the interval timing, then decides whether to execute the show() function or not

setInterval(function() {
interval++;

if (
JSON.parse(localStorage.isActivated) &&
localStorage.frequency <= interval
) {
show();
interval = 0;
}
}, 3600000);//this function will execute after every 3600000ms ie 1 hr. 

Here localStorage.frequency is populated in the options.js file.

Options.js file: Options file has all the selectable options for the extension. This particular extension has a feature to select the frequency of notifications. User can click “options” to get to this page and select the desired option. This page is not necessary.

This page fetches the user defined options

window.addEventListener(‘load’, function() {

// The display activation.
options.frequency.value = localStorage.frequency;
// The display frequency, in minutes.

options.frequency.onchange = function() {
localStorage.frequency = options.frequency.value;
};
});

 Content page: Responsible for browser interaction. Not used in this extension

TIPS:

To host the extension on Google store, you need to pay a one time developer fee of $5

HERE is the documentation to get your extension on the store.

When you are zipping the extension files to upload, select all the files and then add to zip. Do not zip the folder which contains the files. It may create some issues. 

While Developing and debugging code it is useful to locally load the extension in your browser. You can do that by following steps below

  1. Go to chrome://extensions/ and check “developer mode” to enable developer mode.
  2. Click on “Load unpacked extension” and select the folder where you have all the extension files saved.
  3. This will enable the extension locally on your browser. You can then use More tools-> Developer tools to debug and develop the code.

Enjoy building extensions! 🙂

 

Advertisements