My Firefox Add-on went live in less than 24 hours

Software engineers love to build software which will make their life easier. I am one of the strong believer of this. I write many backend code and automation scripts so my manual jobs gets done easily. During my college days I used to develop Apps, during that time I had same motto, the apps I develop should help me. With same motto I sat last night and wanted to develop an Add-on which can solve my problem. One of the distracing problem for me when I work is “Changing the youtube song, pausing it when some one comes and talks to me”. For this I have to search the tab and pause in case the song is my favourite one and in some case if the song is not good have to move to next.

So to do this I need to have a easy accessible icon and when I click the icon I need two buttons, one is mainly for play / pause and another is to move to next song.

I started with designing the basic HTML page with 3 buttons in it. One button is for controlling play/pause, one for playing next song. This two options will be working in any normal youtube video. Adding another option which will be used for replaying the song, this will work only in jukebox.

Here I have to access only the tabs with URL containing youtube, check the tabs API in MDN, queryed all the youtube which have youtube in it. After fetching the tab, the next thing I have to find is the which tab the youtube running. Then based on the action I have to execute the script, regarding the executeScript read in MDN. I will share the detailed code flow in my next blog.

Around 2 AM I submitted my addons to addons.mozilla.org and slept. Around 3 PM ( yes in 13 hours) one Add-on reviewer approved my add-on I went live in AMO.

As this Firefox Add-on is written using WebExtension API, I can easily port it to chrome. First I tired to run same code in chrome, but it didnt work and threw some exceptions. There is a small change in chrome.tabs.query and chrome.tabs.executeScript may be I have to read more in Javascript. You can download the chrome extension from Google Chrome web Store

Got excited as my First WebExtension went live, so posted it in Product Hunt. If you feel this is good make sure you upvote it and share your comments so add-ons can be imporved in next release.

Tweeted about my Extension, also

//platform.twitter.com/widgets.js

Some of the to-do for my add-ons is

  • Integrating music streaming website like Gaana.
  • Replaying the last song in youtube.

Note: It was very difficult to share the extension link I had to my friends from Chrome Store. Was not able to know whether it is approved and published or not.

In my next post I will share more about the code Flow in detail. Share the website which you wanted to integrate.

Update 1 : Added to Chrome Store.

Advertisements

MozillaTN KCG 24 Hours Hackathon

For long time in tamilnadu MozillaTN community had not conducted 24 hours hackathon. We talked to Sayaji a month back and his college was very supportive for this hackathon. At first we have planned to have 3 tracks Add-ons Development, WebVr and Localization. Due to miscommunication Localization was just a one day event.

IMG_7953//embedr.flickr.com/assets/client-code.js

I started with the general contribution area to the students, then had a small introduction about why should we develop add-ons using WebExtensios API. Then started brainstroming session. All the students were very enthusiastically shared their Add-ons idea, some of the Add-ons Ideas were very complex which require some more time for developing them.

Some of the Suggested areas

  • MDN
  • Rust
  • WebVR
  • L10N
  • WebCompat
  • Add-ons

Most of the students were very active and participated throughout the night and explored how to develop their add-ons.

Meeting Internet Programming lab Faculty

One of the faculty coordinator for this event was handling Internet programming lab. It was very good to have her. The main advantage was to learn more about students and what they are doing. She told in the 3rd year students have a subject based on HTML,CSS and JS. On interacting with her came to a conclusion to have mini-project based on Add-ons development. This will benefit both students and community growth, students will gain more proper hands-on development experience and community will have strong student developers.

Community Space in Chennai

On Day 2, Head of Department of Computer Science Engineering of KCG visited the hackathon. He shared his thoughts on how students should improve what will help students. He was discussing with us (Me, karthick, Khaleel) regarding the community space owned by college. He was asking whether MozillaTN community can conduct more events in that space. It was really a great opportunity for our community. We are trying very hard to have regular meetups hope this will be great opportunity to get in touch with large community members.

Then visited and checked some of the hacks done by Students. List is below

  • Texify :This addon will remove all the images and videos & page and show only text.
  • Newsfeed: This addon will fetch the news from Local news paper and share when we open new tab.
  • TabClose on Schedule :Will schedule a time and closes all the tabs at the scheduled time. Will be helpful for people in IT to work fixed hours.
  • Screenshot: Student was trying to take screenshot of the page and save it locally.
  • Facebook Birthday Remainder : Remainder add-ons
  • Facebook Event Remainder : Remainder add-ons

One problem faced in the event is, this is first time for this set of students for 24 hours hackathon and some had either very little knowledge or no Knowledge on HTML/CSS. They tired to learn basics and implement it, but they did at the end. And they were focusing more ideas on Mobile based apps than Desktop Add-ons, switching their context from Mobile based app thinking to desktop based add-on thinking took some time. May be have to learn more to learn their thoughts.

//platform.twitter.com/widgets.js

One of the most interesting hack was students showing a small video player which was more like Firefox Test Pilot Min-Vid.

At the end of the hackathon prizes were given to those who showed the demo, the add-on which was like Min-Vid and Textify were choosen as winners.

Photo album can be found in Flickr

One of the attendee is Balaji from SRM University, he wrote his experience in his blog

Is our Contribution Helpful A contributor Asked

I used to have lot of converstaion in Telegram with our fellow community members. A week back one contributor pinged me in-person asked whether we are contributing in the right track and will it be helpful for us in future. I was very happy to answer his question, and I mainly suggest the contributors to contribute to areas which they are interested or which they feel it will be really helpful for them.

tn//embedr.flickr.com/assets/client-code.js

Recently MozillaTN community had its first meetup at Coimbatore, we choosed some of the contribution areas and share knowledge about those areas, at the same time we built shareable resources based on those areas

Areas we focused

  • Rust
  • WebVR
  • L10N
  • QA & WebCompat
  • Add-ons

These areas are carefully choosen by the core team who worked for days before Meetup and even now these people constantly work to improve community along with other contributors. One of the main goals while chosing these areas is it should align with Mozilla mission and also align with participation/innovation team goals.

How this areas help Mozilla

Rust

We know Rust is system programming language and gaining more traction in past years. In Mozilla it is mainly used for developing Servo

WebVR

Mozilla helps making web a better place. Mozilla doesnt want VR content available to specific set of hardware, it should be available in Web so everyone can access it easily. So Mozilla supported a framework A-Frame which is very helpful in building VR experience using HTML.

Localization

It is very important to have software in the language which we are comfortable with. There are many non-english software users. Contributing to Localization is very important, due to huge number of contributors in L10N project Firefox is available in many projects.

QA & WebCompat

It is very important to make sure a web page is behaving in same manner across browser. Web Compatibility is very important and many developers forget this. Mozilla Webcompat contributors are helping the website owners to fix this in one way.

Firefox QA is very important, there are millions of devices available in this global and it is not possible for Mozilla to have so many devices. Contributors test the browser and share whether features are working well in their hardware. Collectively Contributors are shaping browser. And increasing the Nightly adoption in community makes it better right from start of feature implementation.

Add-ons (WebExtensions)

Firefox Add-ons helps us to customize our browser. Now from Firefox 57 only WebExtensions are allowed, these WebExtensions will be written once and can run in major browser like Chrome, Opera and Edge. Bringing more WebExtension developers will help AMO to grow.

How these areas help Contributors Professional

I wanted to answer these questions and the answer here are based on my personal experience and my reading.

Rust

As said it is System programming language. In the past 1 year there has been a trend where most companies move to GoLang or Rust, you can check the companies which are using rust in the website. Now companies which do product development (in India we are seeing more product development companies coming) are trying Rust. And also in stackoverflow survey it is named to be Most Loved language. So learning it we can become full time back-end developer.

Localization

When we see software in our local shops it will be mostly in local language and sometimes the big super markets will have in english. When we make a software in local language it is easier to get more customers. So many companies work hard to bring software in many local language. Contributing to Localization projects you can learn what is the professional way of translating the software. I personal know many contributors who are getting paid by external agencies for localization.

QA & WebCompat

No software development is complete without Quality assurance. When we write them it should be checked well and checked at different hardware. When I contributed to QA I generally learned more about the different test involved in particular feature, the more ways we learn to test the more test case we think while developing software.

Browser Compatibility testing is very important for when we develop Cloud based software. Have seen due to in-compatibility in Safari, customer drop-off during purchase steps.

Add-ons (WebExtensions)

When I started developing WebExtensions, I started learning front-end (HTML,CSS and JS). Was able to learn more Javascript. I think the more we develop add-ons we can get started with Front-end easily.

WebVR

I have not much contributed to this and not able to find directly where I can use in my professional life. Will update what other contributors say about WebVR.

Why I contribute

I started my contribution in 2013, I came into community to learn more about HTML5. I learned them and started writing articles on how to use them and shared it with others. I wrote some articles on MDN and learned what are the things will be there in documentation of HTML tags, and API documentation. Currently I am trying to create platform for students to learn Emerging technologies with help from other contributors. I develop add-ons write blog on how to develop them from my experience, teach students to develop add-ons. I also get in touch with other project members to learn and share with other student contributors. I also use the skills I gained here in my professional life many ways.

When I use the skills I gained from community it means I am consuming community members efforts, the only way to pay back is to teach it to other contributors like me.

I hope to some extent this post will clarify the doubt first time student contributors have, all our contributions can be used in our professional life, and our professional skills can be used to contribute it takes sometime to learn and do the things. Start slowly and steadily we can become a good contributor and get self satisfaction someday.

Building Multi Search as Add-on using WebExtension API

Before reading this post setup your Firefox so you can run WebExtensions in your browser.

We call the Address bar as Omnibox in chrome. In this API we will discussing on building our Quick Search with an help of Add-on. Here when the user starts typing we will check whether our desired pattern is matched and we will process. Here we will be having two stages, once the pattern is given our extension will wait for next keyword for our pre defined search engine and then search query. Example is below.

ms g hello world

Explanation

In this about ‘ms g hello world’, ms is our predefined keyword which our addon will be checking whether use is typing this keyword so we can capture the event, then g is the predefined searchengine keyword for Google in our add-on and ‘hello world’ is our query string. So once the user hits the enter we will be searching at the google for hello world.

Stages of Add-on

Define the key word which has to be captured.

First we have to say in the manifest.json which keyword has to captured by the addons when user types in omnibox, in our case we have mention the keyword as ms

 "omnibox": {
"keyword" : "ms"
}

Remember if two add-ons used same keyword then the latest one will be doing all the actions.

Defining the actions and Functions

We have one Function which can be defined to set Default Suggestion.

browser.omnibox.setDefaultSuggestion({
 		description: 'Default Description here'
 	});

we have four different actions which can be captured

  • browser.omnibox.onInputStarted
  • browser.omnibox.onInputChanged
  • browser.omnibox.onInputCancelled
  • browser.omnibox.onInputEntered

We can add suggestion as the user enters, here as the user types, we will be changing the omnibox suggestion to “Default Description here”+text_entered

browser.omnibox.onInputChanged.addListener(function(text, suggest) {
    browser.omnibox.SuggestResult({'description': text});
});

In our example we have captured only two events onInputChanged and onInputEntered.

So whenever an user types i will be changing the search suggestion. Then when the user final finishes entering (onInputEntered), I will be startin the processing.

browser.omnibox.onInputEntered.addListener(function(text) {
  navigate(text);
});

Here in text we will be getting the pharse exluding the keyword, in our case we will get “g Hello world”, as I pre-defined g as Google Search I will start searching in the Google in the current tab.

One of the Problem which I am not able to solve is if user types like “ms ttt 5t”, in my pre-defined list we ttt is not predefined to any Search engine, so going to Error page and dynamically adding/modifying new search engine keywords and URL.

Checkout the code in github and share your thoughts.

Why MozillaTN Campus Club Building Website in Jekyll

Most recently MozillaTN17 has been organised. One of the agenda of the meetup is to build strong relationship with Campus Clubs Students (formely Firefox Student Ambassador). During that time our plan was to discuss with each and every campus club and help them build a small website for them. It was my responsibility to bring website for campus clubs. I teamed up with Prasanth and karthick.

Prasanth is awesome guy who loves Jekyll very much, and Karthick is good at validting the designs

Till the meetup date we did not choose the design, make it easier for the campus clubs to edit and host it. On meetup date, myself and Prasanth sat all alone and were editing the template at the second day end we came up with the template and we were sure on changing few things campus clubs will be able to bring their own website so they can make it live.

Why Campus Club Website

  • MozillaTN campus clubs are very active, they host large number of events (QA Days, L10n Sprint, Rust Hackathons etc.,) we can not write all the clubs report in mozillatn due to the time taken for accepting pull request, so having club website makes the club lead easier to push the content.
  • All campus clubs associated with one or more communities so to show case their activities we need a website.
  • Website posts stays for long time and act as online proof for their club contribution.
  • Campus Club will have ownership to their website.

Why Jekyll

  • MozillaTN website is running on Jekyll, so contributors can learn Jekyll and write post in main website in long time.
  • Jekyll is really a good static site generator.
  • Simple HTML is difficult to scale, not all love to write html tags for all posts.
  • Jekyll also supports HTML tags.

Why Jekyll based github pages instead anything else

  • Many at first suggest for using WordPress for MozillaTN. It was first in WordPress when we started in 2014. But if we are in github we are so open and ownership can be transferred easily.
  • Most importantly all the club websites are interconnected using disqus code. Post of one clubs will be cross shared in another campus club website.
  • Learning curve is good. We actually look like we dont know anything at the start but it is like simple C programming.
  • More customizable than we expect.
  • Cost of running is 0.

Steps for Club to run their website.

  1. First any member (call person SC) of the club should file an issue in github.
  2. As of now MozillaTN admins will create an Repo for that club (repo name will be in lower case only).
  3. SC will have write access to his club repo. So he has to clone Clubs repo and his college repo
  4. Now you will have two folder Clubs and your Club Repo folder.
  5. Simply copy docs folder from Clubs repo to your Club Repo.
  6. After copying from clubs folder, delete club folder now you have to work only in your college club repo.
  7. Then you have to edit few files

Editing _config.yml

Change title, eg:- MozillaTN Velammal Club

Change description, eg:- Velmmal is very old clubs.

Change url, eg:- https://mozillatn.github.io/collegeclubreponame

Change about.md File

Write a detailed description about your Club and who to contact in the about.md page.

Change contents inside _data folder

You will be having past contributors, present contributors and organisers file. Make sure you update them properly. It is mandatory to update in organisers file if you want to write any post (either event invitation[event] or event report[blog] ).

Change title in .md files

There are some files where we have hardcoded the title. You have to change them. List of files are about.md , blog.md, contributors.md, events.md . In all these files chanage as About MozillaTN , Blog of MozillaTN , Contributors of MozillaTN , Events of MozillaTN . Replace with your club name.

  1. After making these changes, you have to push it to github.
  2. Once you successfully push it to github, MozillaTN Org owner will be giving you admin access to make your website live.
  3. So in setting page of your Club repo there will be a heading GitHub Pages under which you will have Source there you have to choose master branch /docs folder

Thats it you club website is live.

At the time of writing this post around 4-5 clubs have published their website, list is below

These website have pushed atleast one post.

So whenever you are planning for event, you have to write a small post about the plan of event, what you will be doing, when is going to happen and where it is going to happen (in post the value for categories is as follow categories:event ) and in this same invitation post ask contributors to share the feedback as comments after event. Then after event make sure you write a small report what worked well and what things to be improved in next meetup (in post the value for categories is as follow categories:blog ) so it will be learning for other clubs who are planning for similar event.

Benefits

  • Club leads who are organising events regularly (atleast 3 per month) will be having Editor access to our MozillaTN social Media accounts and they will be trained to update it regularly.
  • As said you will learn a basics of Content Management System.