Mozilla Add-Ons Day

Mozilla Add-Ons Day

Hello Everybody!

You know what? A week back I got the opportunity to be a part of an event about Mozilla Add-ons on 19th of August in my own college (NIEC, New Delhi) by the members of Mozpacers and organized by one of my friend ChampionShuttler (Shivam Singhal). And I think that was really a nice and much informative session.

The session was about 6 hrs but believe me, it did not sound like much. “Interesting Moments are easy to spend”. I was always fond of Mozilla and Firefox. And the workshop took my interest farther.

The event was conducted by Trishul Goel (Mozilla Add-Ons developer), who created the event and aura, killer enthusiastic and what should I say… Amazing, Superb. He first asked all of us about the level of JavaScript knowledge we possess, so that he would have the rough idea of where he should start. And soon the event was in a flow.

We gathered in the auditorium of my college about 10 am, enthusiastic about learning something new. Soon the stage was set up to charge with knowledge and Trishul started to flow the event.

We were asked couple of questions and we got introduced to the prerequisites:-

  1. What is MDN?
  2. A brief about web development.
  3. what is JSON format and how it is related to the file “manifest.json”?
  4. what are WebExtension APIs?
  5. where and how we can try temporary add-ons?

Briefing:

  1. MDN  is nothing but A Mozilla Developer Network which gives information about web development and tools used in the same.
  2. Programming languages like HTML, JS, CSS, etc. and tools like Dreamweaver.
  3. manifest.json: it is the special file with a predefined key name that consists the data of our extension (like version, name, description, permissions, etc). and JSON is simply the format in which data is stored.
  4. WebExtension APIs provide a cross-browser means to develop extensions, instead of SDKs which could create dependent extensions.
  5. type this in the address bar of Firefox “about:debugging#addons”. and load your extension directory. simple

Once the prerequisite session was over we moved on to start creating a simple addon. The add-on we were going to create was simply used to put a RED border on the web pages that are having “mozilla.org” as a substring in the URL. (e.i :  mozilla.org itself)

MY FIRST EVER ADD – ON: “Borderify”

  1. Firstly we created a directory with name Borderify and created the file manifest.json in it.
{
  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",
  "description": "Adds RedBorder to WebPages matches mozilla.org.",

   "icons": {
   "48": "icons/icon2-48.png"
            },

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

 

2. Then we created borderify.js (file mentioned in “js”: [ “filename.js” ] in manifest.json) in the same folder.  Though it is single line file, but as I said, it was a simple extension so it didn’t need much.

document.body.style.border = '5px solid red';

3. Then I myself created the folder “icons” in the same directory and put an icon file named as “icons2-48.png” in it.

AND no sooner my first ever addon was ready to target web pages now.

4. Then we went to “about:debugging#addon” from firefox and add my “temporary addon” from the button given, browsed to my extension’s directory and selected the manifest.json file.

mozillaaddonsday
about:debugging#addons

5. Now after our extension was temporarily loaded. we tried to open a page having mozilla.org as a substring in it (e.i mozilla.org). And A smile came to my face when I looked my extension (though a simpler one) was working alright!

mozillaaddonsday2
can you see the RED border?

 

6. Then we were informed how to run this same add-on (which was a cross-brower) on chrome as well:

Open chrome –  Menu(top-right)->More tools->Extensions->checkmark:Developer mode->load Unpacked extension

7. And once again the extension was working alright in chrome as well.


Once the first part of our session was completed at about 1 pm, we met with a break of nearly 20 minutes in which refreshment was given to us. And no sooner again we were set to learn.

IInd part of the session began but this time our objective was to create a more functional addon. We created an addon to add a button in the browser’s menu bar, which was nothing but a drop-down menu having names of different animals and if we select any name the animal’s picture will get reflected on the browser page.

— The whole session was simply amazing!

At the end, we were given some goodies and stickers of Mozilla and Firefox. And a group picture was taken that is shown on the top of the blog.

 

With this, I conclude with this blog, have a nice day and this, is GeekyShacklebolt

bidding you goodbye!

Advertisements

5 thoughts on “Mozilla Add-Ons Day

  1. I am not certain the place you’re getting your info, but great topic. I needs to spend some time studying much more or understanding more. Thanks for fantastic info I was searching for this info for my mission.

    Like

  2. Wow, amazing blog format! How long have you ever been running a blog for? you made running a blog look easy. The full look of your website is magnificent, as well as the content!

    Liked by 1 person

  3. It’s really a cool and helpful piece of information. I’m happy that you shared this helpful info with us. Please keep us informed like this. Thank you for sharing.

    Liked by 1 person

  4. It’s actually a nice and useful piece of info. I am happy that you simply shared this useful info with us. Please keep us up to date like this. Thanks for sharing.

    Like

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