My First Mozilla Session

It’s been around half a year since I came to know about Open Source, yet I had not attended a single meetup. Either I used to be busy with college or I was just lazy. This time I thought, let’s give it a try.

The session was at Indira Gandhi Delhi Technical University for Women. Confused by the google maps and unaware guards I reached the venue well on time. I saw a man getting ready to give the session. Then my friend Geekyshacklebolt (Shiva) pointed and said, that’s Trishul. And I immediately knew that this was the person I had heard about whenever I listened about a Mozilla event or extension topic from my friends.

Within 5 minutes the session started and Trishul was amazing in keeping the audience engaged and keeping the session hands-on and theoretical with the right balance!

We were first told about what basic we would be required to make our first extension. And the Trishul said, “Who all know Javascript here?”.

And as expected only 1-2 hands were raised amongst the audience of approx40. Then he rephrased the question: “Who all can write an alert statement in Javascript? That’s all it’d take you to get started” And happily almost everyone raised their hands including me this time. Now he starts with a little theory about how add-ons SDK was used earlier, but later WebExtensions was introduced that was not only easy but also offers more compatibility. It could run on chrome too. Remember Mozilla’s the default browser. 😛

Pardon me for my silly jokes, let’s get started with the basic files and commands required to create our extension Borderify

Creating the extension

First thing we need is a file named manifest.json

(Psst, if you get confused with extension, Plugin, Extensions, check out this page )

It will consist of a few JSON key-value pairs, let’s see which ones we require and what we can do.

Here’s the file, we’ll break it and see what each statement here does:

{
     "manifest_version": 2,
     "name": "borderify",
     "description": "first extension",
     "version": "1.00",
     "icons": {
         "64": "blog_icon.jpeg"
     },
     "content_scripts": [
       {
         "matches": ["*://*.mozilla.org/*"],
         "js": "borderify.js"
       }
     ]
}

 

First thing is "manifest_version": 2 what this does is, it tells that we are going to use WebExtensions and not the extensions SDK.

"name": "borderify" This is the name of our extension.

"description": "first extension" Is pretty self-explaining. It gives the description of our extension. This is not much useful so we can change it to be like this:
"description": "An extension that adds colored border to specific webpages"  This is more self-explanatory.

"version": "1.0.0" Can start with another number if you wish. Just remember to bump it whenever you do an update to the extension.

"icons": {
 "64": "blog_icon.jpeg"
 }

This gives our extension a 64-bit icon, that must be in the same folder as the manifest.json file.

"content_scripts": [{
     "matches": ["*://*.mozilla.org/*"],
     "js": "borderify.js"
 }]

This makes the javascript borderify.js run in context to web pages that match the pattern. In this case, it’d run on a web page whose URL contains .mozilla.org

Now, create a file borderify.js in the same folder as manifest.json and write this

document.body.style.border = "5px solid green"

That’s it. This should work.

If you can, then upload the complete folder together. Else just select manifest.json. in the about:debugging page of your Firefox. Then load temporary extension. And select the file or folder as possible.

You can see that the Icon specified comes up along with the name of the extension.

I increased the width from 5 to 15 so it’s clearly visible. The green border on the website http://www.mozilla.org is the outcome of our first extension!

After it there was a brief session by Faye on Women in Mozilla, and an explanatory session by CuriousLearner (Sanyam Khurana) on F/OSS philosophy and how to do contributions. He told us how to get started, and many many more things, keeping them for some other post, See ya. 🙂

 

Keep trying harder

storymode7

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s