 So this is all about me. I contribute to Mozilla as a add-ons contributor add-ons content reviewer Firefox add-ons mentor and all these things are mentioned here So these other things are related to add-ons apart from that. I do lots of stuffs in Mozilla itself So today I'll be talking about these things browser add-ons web extensions architecture of web extensions Few of the web extensions API and also how can you put your chrome extensions to firefox or from firefox to chrome or any of the browsers as well So basically water browser add-ons browser add-ons are simple small piece of code that lets the users to enhance the functionality or modify the functionality of the browser so suppose you guys must be using any of the browsers like add-on browsers like Grammarly add block plus you guys must be using them. So let's talk about few of them So Grammarly helps you to find and fix the grammatical errors or punctuation error or mistake whatever you want So this is very this is very Friendly for us because when we write a mail or anything content We actually face issues related to articles propositions and it can actually help you very easily So next is ghostry this add-on is a privacy add-on which actually helps you to know Who are the trackers that are tracking you on the specific website and also whom you can block them as well Like you don't need to block everyone sometimes But you can actually see you who are the trackers and how can you block them as well? So this is a very good add-on since it is a privacy month. So I'll be focusing more about privacy add-ons as well Next is private private x. This is also a private privacy add-on which actually suppose We all know that we should use we should view few of the sites in the private window or incognito window depending on the browser So it in that case suppose we are you are using any traveling site? You you should actually use it you open it in the incognito window Why because they actually increase the flight rates or something depending on the cookies or they track you right? So for that purpose you should they it allows the user that you should view the specific website in the Private window and it actually opens the same URL instead of copying the URL and again again writing that you can just directly Click that icon and just it will open it and also its blocks the UTM tokens as well UTM tokens are the Google analytic tokens that actually tracks you So next is Facebook container. So Facebook container is as an aim says it's Actually creates a separate session or for your Facebook or Facebook identity as well So whenever we are viewing any of the sites like Amazon it displays the same ads on the Facebook Right, so it's very buggy or an eyeing to the users. So in that case this helps Yes, hello, so it actually Creates a separate session and in that case it actually it makes it harder for Facebook to track you So this is also a privacy extension, which you should install it and use it if you find it cool and keep it The next is tabicat. This is a very cool and simple cute add-on Which just whenever you open a new tab then it will show a different different kinds of cat showing different experience Swing different expressions and all so this this actually imply implies that you all need You the add-on can be from very simple to complex This is very simple add-on right and Grammarly is like having a AI model in itself So the variation of the add-on itself different it depends on the user perspective and the preferences So this is web extensions. How can you build our build an odd on? So cross browsers this is this you can build your own add-on using web extensions, which is actually a cross browser system So it simply means that whenever you are viewing You are creating an add-on for Chrome You can simply put in in the five of the same small piece of code can be used on the firefox or opera or edge And why should you create we've used web extensions because all you need is basic JavaScript I'm not asking you to use react.js node.js or any kind of JS Just basic JavaScript skills are enough to create your own add-on and also since the it is like all the Documentations are different platforms for Chrome as well. Everything is similar. So you can use any of the documentations that that you find it very flat friendly actually and This support this all this is also compatible with the multi process firefox So multi process firefox is actually the thing that whenever you open a tab then it is itself a process It's not the whole window is a process. So every tab is a Process and in that way for one tab crashes crashes the whole window won't be getting affected with that So this up this is compatible and you can easily port your extension from one browser to another browser This is how the architecture of web extensions looks like so the basic heart of the web extensions lies in the manifest.json Which has background page content scripts browser action page action option page and web accessible resources So I'll get into more detail of these things So this is the structure of the manifest.json that looks like and It actually has all the things related to your add-on like version name description permissions browser action and This is the actually all the configurations or all the files. You can say this is like where from your where from where your add-on starts So next is background scripts So background scripts are actually the normal scripts that actually runs from the time of your installation of your add-on to the uninstallation times and All these scripts I can access the web extensions API very easily and this is how you mention the background script in the manifest.json the code is that is mentioned Next is content scripts content scripts are normal scripts Which it which is actually specific that up to the few pages like suppose in the example if you want the The specific script to run on the mozilla.org extension domain then you can you can embed this content script in that actually your code and it will run only on the on this specific site URL whatever you are providing actually and Since content script cannot access the web extensions API all the web extensions API. So it actually exchanges the messages with the background scripts in order to access the web extensions API So this is quite similar to a normal web extension the normal scripts Next is browser action. So browser action is the like suppose whenever you want to add your add-on icon on The toolbar or on the address bar. There are two ways to add your add-on icon It can be on the address bar or the toolbar So suppose when you you want to add on the toolbar then browser action comes in the picture and it should be there only When your add-ons feature are applicable to all the sites suppose Grammarly Grammarly is applicable to all the sites Right, so it should be on the toolbar and hence we use browser action. Otherwise we use page action page action as in Suppose private access there. It's limited to only banking sites or book travels traveling sites So it is why this is why it is there on the address bar. So this is how we write the code and the manifest.json Next is option page option page actually helps you to define the preferences For the so that the users can make changes to it So this is how it the it whenever your user install this add-on It gives the access privilege to the user so that they can change the preferences according to their because every user has their Own preferences. It can be like one user's like notification for the specific add-on and one user might not like the notifications for the That's the specific add-on So this is and how web extensions come into the picture. This is because of web extensions API So I'll talk about few of them not all because there are lots of APIs so these are the few APIs like notifications API book map bookmarks alarm API tabs store is API web request API Notifications API other API as the name says it notifies or alerts the user Suppose I said that private access private access actually notifies or alerts the user, right? So it actually notifies them This way so in that case it is using notifications API And this is very simple to use because you just need to use this code and You provide the icon title in the message and this is our notification comes in the picture this this small piece of code Helps you to give the notification Next is alarm API alarm API suppose you are trying to create a add-on Which reminds the user to drink water on a periodic basis suppose after every 15 minutes It should remind me so in that case I am creating this periodic alarm which actually repeats itself after every two minutes or 15 minutes you can define any value and It will create it will trigger any API or it will trigger that actually alarm API So here alarm API has come to the comes into the picture Next is tabs API if you will see then browser.tabs.create actually helps in just creating the tab with the specific URL which you have mentioned So this will create a tab with the URL example.org This is it all you need to know about is the how to use the web extensions API That's it and it will just create the tabs whenever you want to deal with a tab ID is tab creation tab deletion Then we use the tab API Next is Windows API Windows API is almost similar to tab instead of tab we use windows and whenever you want to create a tab Create a window with different tabs. We will provide a set of array of URLs And it will create a these these URLs with these tabs with the inner window itself So let's talk about more about security how secure and add-on is with whichever are there on the Chrome web store or add-ons Mozilla.org So whenever you install add-on it actually seeks permissions Which shows that which whatever the add-on is actually accessing or developer is accessing from your by installing your add-on So if it says that accessing to the all the data you're for your all the websites So you should be like you should ensure that is that Permissions similar to the what add-on speaks to do so whenever you install an add-on you should first see the ratings reviews of that specific add-on and also how is it that it's that coming from a specific Brand because generally it can be from it's always from the third party and It can be anyone it can be you it can be me and I can be a tacker as well I can say that my add-on does these things but instead instead of this I'm tracking every data digital footprints of yours and you might not know this and you are at at least actually at the Risk of your security So you should always view this and also you should make sure that when you're installing you should see the ratings and review of the add-ons So next is how can you put your add-on from one browser to another? Suppose you have written a small piece of code from Chrome for Chrome browser Then you can easily put it to the Firefox because Firefox uses both the namespace Chrome space name space and browser name space But when you are putting it from Firefox to Chrome then all you need to change like control f control f browser than control replace it with the Chrome keyword that's it and this is how you can just simply Put your add-on to another browser. That's it This is all required with no or it might be the case that you don't require any changes or very few changes Next is how can you debug your add-on? This is simply like just go to the about colon debugging page tab and then you just load your template Load that manifest or json and enable the add-on debugging and just select manifest or json and then hence You can debug it like as you debug any javascript code like console or again console.log These are the tools which are used to create an add-on like for the beginners level all you in general You all you need is a text editor be it at arm or a sublime text It's the actually it's for the beginners actually web extensions dot tech Which helps you to excel itself create everything and it will it will help you to download a zip file and the format of the Structure of the every manifest or json and hence you get get started with the coding directly so that you are not stuck with the starting process of the web extensions For the hardcore developers who love to use command line tools, so this is web extension command line tool which you just can use web extension run or lint or and all suppose whatever I showed in the debug Debugging your extension you can just use a run and it will do the similar similar stuff And the command time command line tool itself This is how you can publish the add-on. I cannot show you but you I'll just pose the slides after the session You all you need to do to go this page and register yourself and just publish it for chrome You just need to pay five usd for the first add-on and for firefox. It's very it's free from the starting itself These are the few resources which we can see after this post this session If you need any kind of help you can just contact these are see channels mailing list And if you see a while developing if you are stuck with something you can just drop a mail to this mailing list and you can just get Like from the developers itself you can just get in touch with them And you can just ask your queries itself and you can join the telegram channel for the onspot replies That's all for the day from my end any questions