TechTonic
Mozilla Web extensions Hands-on Workshop & Hackathon
7th October 2017

A bunch of web enthusiasts on a pleasant Saturday morning of October’s first week had their weekend plans straight. Around 45 of them gathered in a groundbreaking session and a workshop on Mozilla web extensions. Perhaps, all of us would be using those invaluable tools but only few wanted to dig a bit deeper and know how to create them. TechTonic was a two day hands-on web extensions and a hackathon conducted on 7th & 8th October 2017 at SRM University Kattakulathur, Chennai. The knowledge during the workshop was driven by Mr. KS Viswaprasath , Mr. Karthickeyan Narasimhan,Mr. Dinesh M V & Mr. Balaji prominent Mozilla Tech Speakers and Mozilla Campus Club advisory committee members. It was a part of the Activate Mozilla campaign. The objective of the event had been to teach the participants the process of making a web extension on the Firefox browser. Initially, the flow of it starts with conceptualizing the idea, then weighing its pros, coding it, testing and uploading it for verification.

TechTonic

Activity details:
It was a two day workshop the course of which was executed in the following order. Day 1

  • Introduction by Mr. Karthickeyan
    • -The Overview of the Workshop. -What is Mozilla? What is an Open Source Project? -Where to contribute? Find them at? -Bugzilla, working on live projects, code standards, IRC channels etc
  • Session Ends at 11:20 AM. (A Small Break.)
  • Session Resumes at 12:00 PM
    • Speaker: Mr. Karthickeyan/ Mr.Viswaprasat Speaker discussed following -What are Web-extensions? -Firefox Add-ons, Web-extensions, Anatomy of Web Extensions, manifest.json. -Working on Extensions using Firefox Nightly/Chrome. -Sharing the Agenda about this Workshop
  • Session Ends At 1:25 PM
  • 2:20pm: Participants gathered back after lunch. The “Junior Developers” were asked to watch a YouTube video through a link and visit a GitHub repository. github.com/iamvp7 https://tinyurl.com/SRMKzillaExt
  • 3:10pm: Code for previous add-ons and introduction to input terminology. (add listener function concept)
  • 3:20pm: file output concept. Giving a “q=” in a website URL. (Search URL)
  • 3:45pm: “Code and Post before 4” event organized. (Mini Skill Testing Game)
  • 4:10pm new tab add-on explained. Repeat CSS background template explained.
    • Participants asked to check out tweet beam.
  • 4:20 pm: Momentum add-on explained and requested to make a similar add-on on our own.
  • 4:25pm: Override the main page of a browser using a unique set of own build add-on.
  • 430pm: Extending add Facebook and linked in add on in Google Chrome home page.
  • 4:40pm: Hacktoberfest introduced. Participants will submit the template designed by them on the first day using GitHub Repository.
  • 4:45pm: Introduction to GitHub repository. Participants asked to start a new project and create a new repository and upload their extinction files there.
  • 5:05pm: The much awaited “Red Bull” break.
  • 5:15pm: Back to business with one more extinction- “The YouTube Controller Extinction”
  • 5:55pm: The evening concluded with a summing up the recap of the day.
    • Day 2 For each participant, the second day of Techtonic started with a great enthusiasm and an aim to contribute to the Internet through their Extensions and Add-Ons. 10.00AM-3:00PM The morning session started with a firm discussion of the ideas of the Add-Ons which the participants had to develop and work upon. The Mozilla Reps eagerly helped and solved doubts for each and every participant individually so that they can come up with some really attractive Extensions. They also gave a demo on how to add the developed extension on the Mozilla add-on market. 3:00PM: By this time, about 10 fascinating add-ons were developed by the students. Each participant gave a small presentation about the add-on developed. This basically included the Idea, API used, code explanation and live demonstration of the add-on. Some of the add-ons included:-
  • Language translation
  • History cleaner based on keyword
  • Weather report

4:30PM: An interactive session took place where all the four Mozilla reps shared their experience about the workshop. Also they told the participants about the Open Source World and opportunities for contribution towards it. A small description of The Lightning Fast upcoming browser-Firefox Quantum 57 was also given by the Reps. 6:00PM: The 2-Day workshop came to an end with clicking a group photograph and with a hope of conducting more of such sessions in the future.

Financial and Postmortem Report:

  • The whole event had been successfully executed with minimal financial expenses, thanks to the unparalleled support from the management of SRM University. And the voluntary and progressive fervor of the presided tech speakers.
  • The participant were thoroughly satisfied with what they have learnt in the workshop and also mentioned they would gladly attend any similar endeavors of the club initiated by Activate Mozilla Campaign.
  • Goodies like some sponsorship coupons and Mozilla stickers etc were distributed to the participants.
  • Team SRMKZILLA would like to thank Redbull for their generous sponsorship of energy drink to participants during the events.

Outcomes of the event: The parameter of success for any endeavour is determined by the objectives fulfilled eventually. And TechTonic can unequivocally bragged to be a success in that respect. Various add-ons have been created and successfully uploaded in the browser with acceptance. ADD-On’s Developed at TechTonic :

  • 1. Chetan Kandpal - customized image search- https://github.com/Chetank99/Tectonic_Myaddon_ImageCustomization - Google images API - Search and filter out images on basis of extension https://addons.mozilla.org/addon/customized-image-search/
  • 2. Alapan Kar - FreshDownload - https://github.com/fidddlestick/mijnExtensions - javascript APIs- This extension stores the latest downloaded file and gives options to either open or remove it from the browser history. The logic behind is a stack implementation where the after the deletion of the latest downloaded file, the second latest file is shown. - https://addons.mozilla.org/en-US/firefox/addon/freshdownload/
  • 3. Rahul Suresh - Language Translator - https://github.com/RahulSuresh-GIT/Translator-WebExtension - Google Translate API - This extension translates the selected text from any website into various languages. There is no language restriction from which it can translate into. https://addons.mozilla.org/addon/selectedtexttranslator/
  • 4.Mudassir Mohammed - Dictionary - https://github.com/sakhtcoder/Dictionary - This extension gives you the meaning in a click, instead of searching for it all over.
  • 5. Ankit kishore - Keyword History Cleaner - https://addons.mozilla.org/en-US/firefox/addon/keyword-history-cleaner/ -GIT-HUB : https://github.com/ankit9971/Keyword-History-Cleaner - History API - Deletes the history with help of the keyword. Delete the al the history which has the keyword in it URL or in the title. Download and Delete History...instantly using Keyword, with just 1-click on the Eraser button!
  • 6. Aditya Anand - Recon - Github : https://github.com/aditya12anand/Recon - ContextMenu API - This web extension is designed to help you search throughout the web in an extremely versatile manner where all you need to do is select a word / words and then right click to unveil all the searching options that has been provided by this web extension. - Add-on link : https://addons.mozilla.org/en-US/firefox/addon/recon/
  • 7. Parv Patni - MultiSearch - Github: https://github.com/parvpatni/multisearch - Omnibox API - This web extension allows you to search in the desired website through your address bar.- Addon link: https://addons.mozilla.org/en-US/firefox/addon/multi-search-engine/
  • 8.Raunak Adak - MeanSomething -https://github.com/raunak249/My-Extensions/tree/master/Meaning - tabs API - It provides a place to directly search for a meaning instead of instead of going to google and searching it.
  • 9. Jayesh Bhatia - FireFox HomePage + Search/ - https://github.com/b-jayesh9/Browser-Home-Page-AddOn - ContextMenu API and AccuweatherAPI - All important websites on your home page and weather and time updates. You can also translate anything into 8 different languages. And search for a previous version on Wayback Machine or search about any term's popularity. - Link to AddOn https://addons.mozilla.org/en-US/firefox/addon/firefox-home-page-addon/