My Journey to Mozlondon

FSA program is beyond the benefits listed in the wiki pages and website. It helps you to explore yourself and Learn a lot about Community participation.It motivates you in every way to be a leader of your community and It helps you to learn about Creative thinking and Critical Thinking. It gives you an opportunity to involve in Real time projects and motivates you every time.


The Past two years with FSA Program have been so amazing.It helped me to be a person which I always wanted to be.It gave me so many Opportunities, Challenges and amazing initiatives where I can learn and participate.It Introduced me to many amazing people and showed me what openweb should mean to me.

Hive @Vizag21c13-dsc04340

My First Interaction with Mozilla was in July-2012.As a computer science student i was interested in exploring technologies and attended a session by Mozilla Rep Srikar Ananthula in my college. There was an app of the month contest running on at that time and since I was a web developer I made an app and participated in the contest.I participated twice but never won.In the process of learning,making an app and participating in the contest I came accross many interesting people in the Mozilla India community. This is one incredible community filled with enthusiastic and energetic contributors who always love to help if you want to contribute. That spirit in Mozilla India made me interested in joining the Community and immediately I created my Mozillians Profile. From then on there was no Stop.


It has been wonderful being a part of Many Campaigns, Initiatives, Organizing Events, Learning, Contributing and Participating.Here goes few happenings in my journey with Mozilla

  • Rep of the Month in January 2015
  • 2 Years of Amazing Journey from a Firefox Student Ambassador to VP of Contributions at Executive Board of FSA Program
  • Mozilla Tech Speaker from pilot run-2
  • Privacy Campaign in January 2016
  • Hive Pop up at Vizag
  • Community India Meetup,Hyderabad in 2014
  • Mozilla Beta Camp, Bangalore in 2014
  • Firefox OS App Days in Indore(Needs a mention cz My first talk outside my state B-|)
  • Speaker at Womaniya-2015, Warangal
  • Organized Women in Technology being a part of ETF(Event Taskforce)-Mozilla India to encourage Women Participation in the Community
  • Organized Womoz App Sprint in Hyderabad to Empower Mozilla Hyderabad women community.
  • Mozilla Presence Organizer at Maker Fest 2016(Largest Maker Festival in India)
  • Participated in Maker Fest 2015 as Mozilla India Representative
  • Gave two talks about Webmaker Project and Webmaker tools at FOSSASIA-2015(First talk outside India \o/)
  • Managed FoxYeah Campaign in India as a part of ETF Team.
  • Organized 20+ Webmaker events at Schools, Colleges, Maker Spaces and Community Spaces.
  • Launched 15+ Firefox Clubs in Various Colleges in Hyderabad
  • Organizer and Speaker at 20+ Overnight Hackathons around India Including VIT University App Days, BITS Hyderabad Firefox OS Hackathon, IOT Hackathon at JNTU University
  • Co-organizer of Firefox OS Stall at International Gadget Rush, Hyderabad
  • Participated in Whistler Workweek and Orlando Workweek being a part of #FSADreamTeam
  • Pariticipated in Leadership Summit at Singapore as a Participation Cohort
  • Co-organizer of Firefox 10 bus in India
  • Participated in Mozilla Taskforce Meetup 2015 representing Event Taskforce team and FSA Taskforce.
  • Gave about 80+ Talks at various Educational Institutions, Community Spaces, Maker Spaces, Industrial Organizations and few Conferences.

And Yes, I still microblog everything here even if I don’t get enough time to blog everything.



It has been an incredible journey with Mozilla for 2+ long years and this June I will be attending Mozilla workweek at London #Mozlondon to plan the future of Mozilla on Campuses along with Campus Campaign team, Mozilla Foundation, my FSA Team and many other super fantastic people.

My Organizational Goals are

  • To help Participation team in Shaping the future of Mozilla on Campuses.
  • To help the Campus Campaign team in creating a Successful, full stretch Impactful Campaign in campuses.
  • To discuss with Connected devices team about how the volunteers with different domains of Knowledge can contribute to Connected devices project.
  • To discuss with Tech speakers team in setting the goals and vision in launching Local Tech Speaker volunteer groups.


My personal goals before heading to Mozlondon are

  • To learn and explore the design thinking approaches which the participation team generally follows in solving many major critical issues.
  • To learn about Creating Impactful initiatives with Communities and maintaining the sustainability in communities.
  • To learn about various parameters that empower communities and How to Ignite the spark in the inception of Community.

Mozlondon is 10 days away and I m so excited about the Experiences I’m going to have at workweek.

Thank you for reading this.

Publishing your browser add-on to Firefox Add-on Marketplace

You might have probably developed your first add-on and searched for ‘Publishing your add-on to Firefox marketplace’ and finally landed up here. In this post I will be discussing about How to publish your Browser add-on to Firefox Add-on Marketplace.

Firefox Add-on Marketplace (https://addons.mozilla.org) known as AMO is a home for thousands of add-ons. If you have developed a Firefox browser add-on and want to make it available to global audience then AMO is the right place to publish your add-on.

Step 1:

Open AMO’s website ( https://addons.mozilla.org ). If you already have a Firefox account created(which you generally do to sync up your browser preferences) then you can directly Log in to the website. Else register yourself and create your account.


Step 2:

Under tools, click on ‘Submit a New Add-on’ to submit your new Add-on for publishing in AMO. You can update your developer profile by clicking on your username and selecting appropriate option from the dropdown.


Step 3:

Once you click on ‘Submit a New Add-on’ in Step 2, you will be proceeded to the below screen. I want my add-on to be available for Global Audience, Hence I choose the first option. If you want your add-on to be available on your own website like Makkhichoose then you can choose 2nd option and click on ‘Continue’.


Step 4:

You will get  the below screen after ‘Step 3’ where you have to upload the add-on zip file. If you get the below error then that means your ‘manifest.json’ is not found in the root of the zip file. To fix this, create a zip file with all the contents in the root folder instead of creating the folder into a zip file. This means if you double click your ‘zip’ file then you should be able to see the ‘manifest.json’ along with other contents of your add-on.


Step 5:

When you click on ‘Continue’ in ‘Step 4’, the page is redirected to the below page. Simple metadata like the name of your add-on, description of your add-on is already extracted from your manifest.json file. However you can still edit it in this page before submitting for review. Also select the category best suited for your add-on on Firefox Desktop and Firefox for android in this screen.


You can also mention the support email-id and a support website but these are not mandatory. Choose the best licence that suits for your add-on. If you are accessing any of the user’s data or sending it to your servers then you might have to click the checkbox related to Privacy policy(Click on the little question mark for more info).

If you have any notes to the reviewer( eg: test account details required to test your add-on )  you can mention it in the space provided below. Finally click on ‘Submit Version for Review’.


Step 6:

Finally you submitted your add-on for review. The Add-on will be published once it is reviewed. You might already got a mail regarding your subscription once you get the below screen.


Step 7:

Lets add the icons and few screenshots for our add-on. click on ‘Manage Listing’ and select your add-on. You can either add a new logo or choose from existing logos and then upload the screenshots, provide little description for your screenshot. Screenshots are the best way to advertise how useful your add-on is to the user before he installs your add-on. Finally click on ‘Save Changes’ for the changes to get saved.


Step 8:

Now you can find your add-on listed along with the status when you click on ‘ Add-on Developer Hub’ on left top corner after ‘Step 7’.



Hope this gives you a clear clarity on publishing your add-on to the Add-ons Marketplace.

Building your first browser addon for Firefox using WebExtension

Firefox Browser has been an incredible browser with thousands of add-ons in its marketplace. Performance of the browser has been greatly improved with e10s. With WebExtensions support from the recent releases it was made possible to develop cross platform add-ons and run across Firefox, Chrome, IE etc. with just a few tweaks.

I joined as a AMO’s ( addons.mozilla.org ) Feature Board member in November-2016 where I would help the Add-ons’ team in selecting the best add-ons to feature every month on the AMO website ( https://addons.mozilla.org/en-US/firefox/ ). I then came to know about WebExtensions. WebExtensions enable you to develop Cross-browser supporting add-ons which works on most of the latest browsers including Firefox, Chrome, IE etc. I thought to explore around a bit about WebExtensions and in the process I developed my first Browser add-on. \o/ You can find my extension here.

I love inShorts. It helps you to with the news around the world and puts it in 60 words. But it doesn’t have a dark theme and I don’t want the light to flash on my face every night. Add-ons are meant to improve your browsing experience and change how a particular website should work for you. Hence I thought to build an add-on which adds a dark theme to the inShorts website. I spent a weekend and finished my add-on. It is very easy to develop a WebExtension and you fill find a lot of amazing resources to learn. You can find it here.

I thought to share my experience of building my first Browser addon in this post.

 "manifest_version": 2,
 "name": "inShorts in dark",
 "version": "2.0.0",
 "homepage_url": "https://github.com/viswanathamsantosh/inshorts",
 "description": "Read your favourite news on inShorts by dimming the light right away on your browser.",

 "icons": {
 "48": "icons/icon-48.png",
 "96": "icons/icon-96.png"
 "permissions": [
 "browser_action": {
 "browser_style": true,
 "default_icon": {
 "19": "icons/icon-19.png",
 "38": "icons/icon-38.png"
 "default_title": "Turn on or off"
 "background": {
 "scripts": ["background.js"]

Most of the contents in the manifest file are optional. depending on the usage you should include them in your manifest. For example, I need an icon on the browser toolbar for my addon, Hence I included the ‘browser_action’ in my manifest file. If you don’t need it then you can remove the section. More info on manifest.json is here.

Here I included a name, description, url of the github repo I’m using for the addon, browser action, default icons and a background script in this manifest.json file.

  • Next I have to write my javascript code. Depending on the usage you can either choose between content script or backgroup script. Since I m using browser actions in my addon, I use background scripts. Create a file named ‘background.js’ in the same folder as manifest.json file and included it in my manifest.json.
  • I studied the DOM structure of inShorts and wrote the required CSS to enable night mode where I would change the color of the background from white to black, change the text color of news from grey to white and the ‘Load More’ button color from white to Red.
var CSS='body{background-color: black;}span[itemprop="headline"]{color:white;}div[itemprop="articleBody"]{color:white;} #load-more-btn{background-color:red;color:white;}'

If I have to  include this style in the beginning and make no changes later on then I can use content script to make it possible. However  I will display an icon on the toolbar to enable and disable the night mode on the website.

  • I wrote my jscode to insert and remove the CSS in the present tab selected.
//method to enable nightmode
function enableNightMode() {
 browser.tabs.insertCSS({code: CSS});

//method to disable nightmode
function disableNightMode(){
 browser.tabs.removeCSS({code: CSS});
  • Then a toggle function and browser action to toggle the dark theme when you click on the button in the toolbar.


//method to toggle mode
function toggleNightMode(tab){

//event handler when you click the button in the toolbar
  • And finally another event handler to reset the mode when the tab is refreshed.
//when the browser tab is refreshed
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
  • Finally this is how my ‘background.js’ looks like after adding few flags


  • At last add the icons required for your addon and browser action button and mention the related paths in the ‘manifest.json’ file.
  • You can find information about Installing and debugging your addon here.

Hope this helps in getting started with the development of your first add-on! Happy Coding.

Using CSS Preprocessors

I have been writing a lot of CSS these days, when it comes to a project with 20+ responsive components it is obvious to write tons of CSS code. I started to use CSS preprocessors for a while now and it reduced my css code and the time I spend with css a lot than before. So I thought to share few basic tips in getting started with SASS preprocessor.

Here you will write your css in .scss(stands for sassy CSS) files and then use sass (Syntactically Awesome Stylesheets) to generate your css file (say main.css?)


First you need to install sass on your machine. You can find the installation steps here.  I use a mac machine and since Ruby is already installed, I simply run the following command to install it

$sudo gem install sass

Now create a component.scss file in your ‘ProjectFolder/styles/’.

Note: Make sure you save the file as ‘.scss’ instead of ‘.scss.txt’ file.

You can convert this preprocessed file to the final ‘css’ file to use in a website using sass command.

$sass component.scss main.css
  • Lets write our component.scss file now
    color: red;
    color: yellow;
      background-color: black;

when you run ‘sass component.scss main.css’ your file is processed and the generated ‘main.css’ looks like

.main h1{
  color: red;
.main h2{
  color: yellow;
.main h2.heading2{
  background-color: black;
  • You can also use variables if you want a value to be used across the page.
$primary-color: #ff0000;
$secondary-color: #00ff00;
$default-color: #0000ff;

    background-color: $primary-color;
    background-color: $secondary-color;
    background-color: $default-color;

when you sass the above code, you will get

  background-color: #ff0000;
  background-color: #00ff00;
  background-color: #0000ff;
  • You can also include one scss file into another scss.

$primary-color: #ff0000;
$secondary-color: #00ff00;
$default-color: #0000ff;

@import 'variable';

    background-color: $primary-color;
    background-color: $secondary-color;
    background-color: $default-color;

when you sass it, you will get

  background-color: #ff0000;
  background-color: #00ff00;
  background-color: #0000ff;
  • When you are developing a web application to use across different platforms then you will have to use prefixes such as ‘-webkit’ , ‘-moz’ , ‘-ms’. You can simply use mixins to make it easy.
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;

.box { @include border-radius(10px); }

When you sass it, the below css code is generated

.box {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 border-radius: 10px; }

If you are writing multiple components with multiple ‘.scss’ files then you can create a master ‘.scss’ file( say main.scss) and import all other ‘.scss’ file into it and sass it to generate your final ‘main.css’ file which you could include in your html page.

I gave only few examples about how you can use CSS preprocessors such as SASS to make it simple working on CSS. You can read more about SASS here.

Thank you for reading.

CSS ‘display’ property

Imagine you have a parent ‘div’ with 200px*200px and 4 child ‘div’ elements with 50px*50px then how do you fit these child ‘div’ elements in the parent div? If you started working with css and you have a little knowledge about ‘display’ then you would suggest to use ‘inline’ property.

Few important and basic ‘display’ property values are inline, block, inline-block.

‘block’ will make the element appear as a block element which means it starts on new line and takes the full width of the available. eg: h1-h6, p, div elements.

‘inline’ will allow other elements to occupy in the same line if any space is left. eg: span, a elements etc.

‘inline-block’ elements are inline elements but they have width and height.

Now lets get back to our question, We cannot use ‘inline’ since the div elements have no content so we will use ‘inline-block’ to solve it. Hopefully it should work since ‘inline’ property will enable them to be beside each other and ‘block’ gives them width and height. Here is what we get.< https://embed.plnkr.co/5M7Qgp3o4YkrTunwxdLd/ >


You will see a white space between the div’s and you will find many explanations for this gap. It is the general white space between the elements. To remove this space we will use the ‘float’ property and let the elements float to the left. and Yipee it works. Here goes the final code.< https://embed.plnkr.co/6PKsgDBTkvP1UloM7tt0/ >


Thats how CSS ‘display’ property works.

Leadership summit 2016

I always used to hear about Mozilla Summit-2013, A global gathering in San francisco 2 years back which is a volunteer meet and I always used to wonder how it looks when so many volunteers around the globe come together at a place to Learn,Explore,Energize and Dream about the future of the web and their role in empowering it. I used to think about how it would feel to be a part of such global gathering and it finally happened with the 2016 Leadership Summit at Singapore.

2015 has been an incredible year for me as a volunteer as I got involved in Firefox Student Ambassador Program and Tech Speaker program. with the participation team coming into action there has been major changes in the participation of volunteers,contributors in Mozilla. The PT(Participation team) planned for 3 global gatherings to get volunteers at a place to design the future of their participation in Mozilla and get the things done by the end of the gathering. One such gathering is Leadership Summit at Singapore.

As a volunteer it was a memorable moment to meet my co-volunteers around the globe finally at a place and it indeed reminded me of my previous visit to Singapore(I was a speaker at Fossasia-15 \o/).

I loved the leadership summit a lot as it is the first meetup where FSA Executive board met without missing everyone for the first time and we missed you TJ.IMG_1911.CR2

Day1 started with talks from George, Mark and Rosana.

Rosana started talking about how incredible we are and how diversified we are. We were diversified in many ways. We had volunteers in their teens going to college to 60+ years old contributors in the crowd. when it comes to occupations we are everywhere.To my surprise we had an astronaut too from the crowd.


Mark, Super energetic as always spoke about the past challenges we overcame as a community and how we should be prepared to face the Future challenges(eg. Freebasics -_-). Mark spoke about how they fought with Microsoft to make them allow 3rd party browser installation.


The personality test workshop by George was one of the amazing workshops I attended. Truly saying it helped to realize I am not the only one and there are many others who take things similarly.IMG_0649

This was followed by the division of tracks into Campus Campaign and Connected devices.And for obvious reasons I was in Campus Campaign track because Campus Campaign choose me \o/ .

The people from 270 Strategies are amazing and It was great working with them at Orlando Work Week. I like the way they work and the appreciation they give for your ideas. They first analyze the existing culture and help us to plan it better and execute it in a more impactful way.

Later we had a gathering on FSA’s role in Campus Campaign leaded by Brian and Faye. At the end of the meet we got tons of inputs from the FSA’s, RAL’s, E Board and Reps. We understood what we were doing well and what we lacked in our Program. The meet was planned very well and I felt so excited from the output.

Day 2 was another amazing day and was an Important day for FSA Team as well. We had an FSA meet discussing about the 2016 goals, plans and the immediate To-Do’s after getting back to home.


It was later followed by Campus Campaign closing session and later ended with a closing ceremony by George and Rosana. Yeah we had a Thank you Francisco moment at the end and yes it is impossible to do such gatherings without him.


It was another amazing and thrilling experience to be a part of it. I learned a lot about Strategies,Impact, Facing Challenges, Leadership ,Personality development and most importantly I learnt how Mozilla community has always been impactful in protecting the worlds largest public resource Internet.


And with team work comes so many responsibilities and Fun.Cheers to everyone who were part of my beautiful days at Leadership Summit.




Privacy Month-January 2016

As a part of Data Privacy day this January, Mozilla India Launched Privacy campaign this January with the Mission to educate the Internet  users about the Importance of User Privacy on internet and How they should protect themselves from all privacy threats.

Volunteers around the world joined together to be a part of this campaign. Mozilla Reps, FSA’s and Firefox lovers participated in this campaign to educate people about Privacy, Security, Digital footprint, How Mozilla values user privacy and protects the Internet users with Firefox browser features such as Tracking protection, Lightbeam, Forgot button etc. It has been an incredible month with many offline and online events going around the world and the most beautiful part of this campaign is that this is all initiated by volunteers and even the complete campaign is run by volunteers.

We had the Largest Privacy booth with 30000+ Spectators and 5000+ Attendees visited our Booth at Maker Fest in ahmedabad.I organized it as a part of Event Taskforce team of Mozilla India. Kudos to the team Trishul, Ashish, Prathamesh, Ankit Mehtha, Mehul Patel, Sanjay Gowri and Aman Sehgal representing Mozilla India at the Event.

Here goes few blog links and videos:

Online campaign started before January reaching out to as many people as I can. I created a meme for publicity about privacy month. Haha!



The First offline campaign in Hyderabad started with a Train the Trainer session (TTT) to educate the mentors about Privacy month and discussing about the ideas to reach out to people.And I think this is the first offline event in the privacy month as well.We made a plan about how to reach out to people with our creative ideas. DSC_0051

we later thought that online platform is an incredible platform to reach out to internet users about privacy over internet.This is what we did by the end of the day. We got these printed and clicked pictures and tweeted them,posted on Facebook and we had a good outreach more than what we expected.


Here are few links of the offline events happened in Hyderabad

And thats how Privacy Month ended teaching the internet users to protect themselves from tracking and teaching them how important their privacy is for themselves. Here are few statistics about the Privacy Campaign.

privacy report

Excited about Campus Campaign now. \o/


Mozilla And Firefox OS @PurpleTalk Inc

It has been a bit of time I did’nt blogged! Priorities matter. But the 1 Hr Talk we had at PurpleTalk Inc,Hyderabad is making me to Blog about it. The resources we used and the kind of Audience we had today is quite different than the one we used previously. I gave a Professional talk after a long time I could say. Involving more as a Community Strategist,Mentoring and My new Job got me away from Speaking.

Today we had a 1.25 Hr Talk with the Employees of PurpleTalk Inc. It was unique in different ways.We always had long talks completely talking about Firefox OS and Apps of which most of the time our Target audience were Student Developers.This time we had a developers working at a Company. The irony is most of the attendees are Android and Windows Phone Developers.Yeah! I got a Thug Life to go with talking about Firefox OS to other OS Developers and Users.

I Started my presentation talking about Firefox OS, Architecture, How Developer Friendly Firefox OS is and continued talking about WebAPI’s, Packaged Apps and Hosted Apps, Debugging and Testing of Apps,Publishing. Thanks to Senior App Reviewer Jai Pradeesh for your Side Deck . I made my own version with the help of your presentation. You can find my side deck here .

12167294_10152950281151116_384381818_n 12168150_10152950281171116_1009898564_n

Later Ram Dayal Continued his Presentation about Firefox OS Add-ons and WebRTC. You can Find his presentation here.

12167746_10152950280926116_1499677037_n 12092560_10152950281056116_603494185_n

Finally it was time for our Community Leader Vineel to Speak about Mozilla and Communities. He Spoke about Mozilla, Various Projects and Programs in Mozilla, How our community actually owns 30 % of Browser users just with the help of participation from Community and Volunteers.


Every talk I give, teaches me something and today I learnt about how to manage time while giving a presentation. We got like 60 Minutes for our talks and we managed everything so well by our collaboration.The Recent Tech Speakers Pilot which I was a part of helped me to improved me a lot about Speaking and Creating impact with your talk.Thank you PurpleTalk Inc for Inviting us.

PS: The presentations are opensource! Anyone can edit it and use for their Presentation.:)