Weeks of Contribution- WebExtension Session7

Date : 29th August 2017

Time: 8:30 – 9:30

IRC channel: #MozillaTN

This is our first series of the WebExtension webseries. The main agenda of the program is to get started with Mozilla community and discuss the syllabus we will be learning in this series.

In our previous session we get learned about executeScript API, where we built a small youtube controller.

In the seventh session we are going to learn about building a context menu.

Agenda

  • Introduction about Add-ons Contest
  • Context Menu Video

Problem Statement

When we select some text, we get a suggestion to search with our default search engine when we do right click.
So instead of having only one search engine, our idea is to have more than one search engine listed so users can use their required search engine to searching the text.

MozillaIN Contest

Mozilla India community has declared a contest on developing Add-ons which should be working on Firefox 57 properly (means WebExtension). Best Extensions will be choosen and the winners will be getting the Limited edition AMO Pendrive. Last date is end of October 2017.

You can get started with building the context menu from the following video and this video is contributed by Trishul.

All the code samples discussed in the above video is available in the github and the detailed blog post on this particular API is shared before. Link of post

Attendees

Name / Twitter handle

  1. Fahima Zulfath A/ @FahimaZulfath
  2. Balaji B / @balaji2198
  3. Mainak R. Chowdhury / @rcmainak
  4. Viswaprasath / @iamvp7

Etherpad of the session. Link is here

Advertisements

Weeks of Contribution- WebExtension Session6

Date : 22nd August 2017

Time: 8:30 – 9:30

IRC channel: #MozillaTN

This is our first series of the WebExtension webseries. The main agenda of the program is to get started with Mozilla community and discuss the syllabus we will be learning in this series.

In our previous session we get started learning what are omni box API and have built keyboard based quick multi-search engine.

In the sixth session we are going to build a small youtube controller.

Todays Problem statement

Controlling the youtube player from any tab without visiting actual tab where youtube is running.

Agenda

Controlling Youtube Playlist without Changing tab

  • Learn about Message sending between JS file and background JS, MDN docs
  • Learn about executeScript API. MDN docs

You can get started with youtube controller code flow from the following video.

All the code samples discussed in the above video is available in the github and the detailed blog post on this particular API is shared before. Link of post

Problem

In the above built Add-on one of the problem is when youtube is in many tabs, it will be detected in all the tabs and code is exectued in all tabs. We had a very interesting discussion around this and we have got some suggestions to work on this.

Can you have a way to detect which tab has the playlist open? If I have two tabs with two different playlists which one will be affected by the addon actions?
ya you found the problem rcmainak .. it will affect all the tabs. becoze we are querying all the tabs and iterating all the tabs. it will be awesome if any one of us work on this, like showing the list of tabs (by title of song) and execute script on the required tab

One of the contributor send feedback to share the PDF of the presentation. Google drive PDF link

Attendees

Name / Twitter handle

  • Selva Makilan/ @selva_makilan
  • Mainak R. Chowdhury / @rcmainak
  • Baranitharan/ @baranicool
  • Kaviya D/@kaviya99
  • Kaverinathan/@sudhannathan
  • Balaji / @balaji2198
  • Viswaprasath / @iamvp7

Etherpad of the session. Link is here

Weeks of Contribution- WebExtension Session5

Date : 4th August 2017

Time: 9:00 – 10:00

IRC channel: #MozillaTN

This is our first series of the WebExtension webseries. The main agenda of the program is to get started with Mozilla community and discuss the syllabus we will be learning in this series.

In our previous session we get started learning what are tabs API. There are lot of cases where we have used Tabs API and published add-ons on it. We will slowly cover tabs API one by one along with Different API.

In the fifth session we are going to learn one of the use case of omnibox using Tabs.create API.

Todays Problem statement

In the address of Firefox / Google Chrome what happens is when we enter some words we will be getting the results from default search engine. but we will some times require to search on different site. say you know my handle in twitter is @iamvp7 so there are two ways goto twitter.com and search my handle (or) goto search engine search my handle with twitter keyword.. so it sometime gets bored. so we will build a small add-on which will
be helpful for us.

Agenda

Building simple Multi Search Add-on

You can get started with omnibox API & Tabs.Create API from the following video.

All the code samples discussed in the above video is available in the github and the detailed blog post on this particular API is shared before. Link of post

Google drive PDF link

Attendees

Name / Twitter handle

  • Baranitharan / @baranicool
  • Fahima Zulfath A / @Fahimazulfath
  • Subhrajyoti Sen/ @iamsubhrajyoti
  • Seshadri/ @Seshadriii
  • Viswaprasath / @iamvp7

Etherpad of the session. Link is here

Weeks of Contribution- WebExtension Session4

Date : 2nd August 2017

Time: 8:30 – 9:30

IRC channel: #MozillaTN

This is our first series of the WebExtension webseries. The main agenda of the program is to get started with Mozilla community and discuss the syllabus we will be learning in this series.

In our previous session we get started learning what are Browser Extension. What is so important of it and how it is going to keep web safe and help developers to maintain code easier. You can learn by checking my previous blog.

In the fourth session we are going to learn basics of tabs API, lot of extensions can be done by learning Tabs API

Agenda

Learn about basic Tabs API

  • Firefox internal like how Close button works
  • Firefox internal like how Reload button works
  • Firefox internal like how Tab is updating with new URL

Some of the questions asked by contributors during the session.

I have one doubt in last session. After restarting our browser extension didn’t work in Nightly but it work perfectly with chrome? by Barani
In nightly we have installed in Debug mode, so it will be there only till the browser is active.

You can get started with Tabs API from the following video.

All the code samples discussed in the above video is available in the github, previously we have discussed about Tab.Close API in one of our blog post.

Google drive PDF Link

Attendees

Name / Twitter handle / Github profile

  • Fahima Zulfath A/ @FahimaZulfath
  • Karthikeyan Sethumadhavan /@im_karthimadav7
  • Baranitharan / @baranicool
  • Viswaprasath / @iamvp7
  • Shivakumaar MGS/ @shivakumaarmgs
  • Balaji / @balaji2198

Etherpad of the session. Link is here