 Hello everyone, let's start. So myself Trishul, I'm from India. I am a volunteer to Mozilla, specifically in Adonstein. So him to talk about browser extensions. So almost everyone has heard about browser extension. Am I right on that? Can I have a hands up? Who knows about browser extension? Perfect, my job is half done then. So we'll just go through it. What is browser extension? In very layman language, we say anything that extends a browser functionality that is a browser extension. So browsers are made on very simple principle. One size fits all. It's not necessary that every tool is needed by everyone. For example, I'm a developer. I may need a React developer tool. But a designer may not. That will be a waste for him. So browser are made like MVP. The minimum viable product. And when you want to add on to it, you install extension, you install add ons, you install plugins. So that's where the browser extensions come in. So can anybody tell me why we should build browser extension? Why guess anyone? Not missing maybe needed feature. Okay, I have a simple donation for that because it's built using JavaScript. I'm a JavaScript developer. So I love it. So anything which uses JavaScript, I'm on for it. So that's my reason. Everyone can have a different reason. So it's an important question. Like we are learning something new or... So what it can do actually? What browser extension can do? Anyone, any guesses? Sorry? Block ads. Block ads for sure. Anyone else? Change DOM. Anyone else? So okay, to summit anything you want. Anything you want. There are a few things like add script to web page. If I say add script to web page, you can do anything. Once your JavaScript is injected in the page, you can do almost anything. You can intercept a web request. We can create alarms, storage, background processes, a number of things. So how? So this is basically the structure of an extension. So almost everyone of us know manifest is a structural file for everything. Made be Android app, made be add-on, made be iOS app. So manifest holds the structure of the thing. So for add-on is also the same. Manifest JSON is a file which is having the structure of the add-on. There's something called as content script, background script, page action, browser action, options page, web accessible resources. I know there's lots of theory, but just in few minutes it will all start making sense. So what is a content script? So when a page loads, the page load event is done, then we have to inject some script to actually modify the dome, right? So there the content script comes in a play. So as it's written, JavaScript that executes once the page load is complete. Simple. Second is background script. Anything that runs in background is a background script. So page action. How many views that add-on something which is present in the address bar? Anyone has used that something kind? So that's achieve via page action. In a moment we'll learn how. How many of you have used this toolbar buttons in any of the add-on? You are my target, sir. You have used all of it. Perfect. I'm glad that you are in audience. So that is called as browser action. Then options page, like many add-ons have the preferences, right? So as an add-on developer, as an extension developer, I can actually classify my options. For example, this was my add-on Facebook blocker. Sometimes I wanted to be very strict to myself so I blocked the Facebook for a while. So I can set the number of hours, how many hours I want to from two. So that can be done via options page. Okay, enough of those things. So important thing is web exchange and API. Everyone knows what API is, right? So when we say JavaScript is doing the thing, so actually JavaScript is not doing the exact thing. JavaScript is just triggering the API, which is provided by the browser. And that APIs are doing the actual thing. For example, we are generating a notification via our browser, via our extension. So what's happening is we are using the browser notification API. And that browser notification API is actually generating the notification from the back screens. Make sense? Everyone? So we'll be discussing few APIs. For example, tabs API. So by name, it will be dealing with tabs. So with this API, we can create new tab. We can modify the properties of tab. We can actually hook up JavaScript function on close of tab, maybe detaching of tab, maybe activity in activity. Suppose I have three tabs open. So what I want is whenever a tab is activated, activated means that it's clicked. So I want an alert pop-up, as simple as that functionality. So that we can achieve with this API. Isn't that powerful? Suppose you want to create an add-on, which counts number of time that specific page has been activated. This is your thing, right? Similarly, when the tab is closing, you can have an event already. Next one is notification API. This is the really good API which I like it. All it does is generate a browser notification. How many of you know browser notification? So what happens is whenever you install Gmail or anything, nowadays every website had that. Do you want to receive notification? You click Yes, and you are spammed by notifications. Thanks to this API. So now something interesting is browser action API. How many of you know browser action? Perfect. So let me rewind a bit. That is browser action. That button is called as browser action. So that button is browser action. To play with that button, all you need is this API. It can be clicked. It can be opened. If you want to open a pop-up on click of that button, that's your API. Now, this is the most powerful API which I feel, Web Request API. So what if I say, I send a request to abcd.com from my browser. But when it leaves my browser, it's already xyz.com. Isn't that great? Or may be tricky? Or may be useful and for sure dangerous? That everything is done by this API. We can trace all HTTP requests. We can change the headers. We can change the payload. We can block the payload. We can redirect the payload. Everything can be done with the help of this API. That powerful. So as the mature guys say, with great power comes great responsibility. So make sure of that thing. So enough of the talks and all. So now let's get started. Do you want to see a just quick add-on? So I created this very simple add-on link painter. So all it does is whatever anchor tag is in your page, it will turn the background red. That's it. Nothing more than that. And a wild guess how I can do that. Anyone? Forget about add-on. I gave you a web page. And I'm saying it, write a JavaScript to make all the anchor tags having a background red. Can we do that? How many of you are JavaScript developer? Can I have a hand raise? So again, I'm repeating the question. If I want, I'll give you a web page. And I say, write a small JavaScript code to turn all the anchor tags with a background red. Now how many of you can do that? So here's a bit of code for that. So interesting part is, this is the manifest file. So quickly we'll check it out. First thing is manifest version. So manifest version says that we are using web extensions API. There's nothing more to it. It's static. This will never change until we have a new manifest version. Second thing is name of your add-on. Third thing is version. Fourth thing is description. These other things just have good to have things. And then icons. And then something important. How many of you remember content script? We discussed a few moments before. Anyone? So content script is a script which executes after the page load. So what I want is execute my JavaScript when the page loading has been done on the foreground. So what I say is match this all URL. Probably we can give a rejects here if you want to execute that script on a specific page. And then execute this script cs.js. And this file is cs.js. All I have written is get all the anchor tags here. And all you have to do is style, background, color, red. So now any guess what this line of code will do? The last line of code. Anyone? So I'll repeat the line. Document.getElementByTagNameA Anchor. And for each of it, do e.style, background, color, equal to red. Any wild guesses? Sorry? It turns out blue. Oh, nice try. So this is the output. This will be there. Once add on install, this will happen to your web. Make sense? So idea is I'm injecting JavaScript into your website. When I can inject JavaScript, I can do almost anything, right? Second example is a word counter. So this add on was made by me under the influence of my wife. She nagged me like anything to make it was she is a marketer and she has this job. What she has to do, like write the content words, like number of words content. So she always have to copy the content, put it in a website, online tool, and then count number of words. So she challenged me like, are you deaf? Are you sure? Can you solve this for me? And trust me, my debut was hurt like anything. Like, are you serious? I can do anything. I inject JavaScript. And by end of the day, this was ready. So roughly, I'll tell you what happened is when we come to this API called as menus, so this will generate a right-click menu entry, which will be having the title word count. And on the click of that event, I'm firing a function count me. And what count me does is it gets all the data and get the selection text. So whenever the right-click API is hit, it gives us several things. For example, the selection text, what the text is selected. If you're clicking any image, it will give you the URL of image. If you right-click on any link, it will give you href and other alt properties. So that powerful is this context menu API. So once I get this, what I do is I create a notification and just write something, total number of words, dot line, that's basic JavaScript. So idea is get the data from context menu and populate it into a notification. And all this is done just in this small piece of code. So output is something like this. Here is the entry. I selected the text, hit the new entry. And when I click it, here's the notification. So idea is this code is not exceeding more than 20 lines. But I'm actually changing the properties of the browser. The native properties of the browser. In this code, I'm changing the right-click menu. I'm creating a notification. Isn't that amazing, guys? Perfect. So these are the small steps which you can actually test on your, your add-on can be tested on a browser. The thing is, whenever you install any add-on or any extension in a browser, it has to be signed by App Store from Chrome or maybe add-ons.mozilla.org from Firefox. So these ways are generally how to get it in the debugging mode. So add-ons seem has created a tool called as WebEx. So this will be automating testing your tool and basically creating another instance of Firefox, which will be not conflicting with other add-ons. And you can seamlessly test the add-on. So once you're done with your add-on, all you have to do is publish your add-on to the marketplace. So you can use this link to know more about the publishing thing. And these are few resources. I have used the bit.ly link so that probably you can understand better things. So I'll show you some of my add-ons, which I have created. So let's talk about this add-on. This is measure it add-on. So what it does is, whenever I click it, it creates a layout over this. And I can actually measure the size of the height and the width. This is actually useful for front-end developers. Because most of the times, we need to know the size of the block, the size of the image. And accordingly, we need to do things. So this add-on is pretty popular. And right now, I'm having more than 19,000 downloads. And the code is just maybe 25 lines. So that's the power of add-on. So yeah, that's all from my side. I'm Trishul Guel. Thank you all. I have a minute of time for questions. I think I want to ask a question. I'm curious to know the next big thing in add-ons. So the beauty of it, it is cross-browser. So with minimal or almost no change, you can run seamlessly that code on Firefox and Chrome. Opera, they say on I, but I doubt. I'm not sure about that. Because I don't use I.E. So yeah, no offense. Not right now, but yeah, that can be a good thing. Actually, I can put it up to the team. Let's see. That's a nice way to do it. We must know it. Anyone else? So do we still have time left? So what if I code an add-on right now? Will that be fine? Perfect. So our volunteer team has created a small utility tool called as Create WebEx. So that's basically generate a scaffolding project for the add-on. So based on some options, the things that you like, for example, content script, background script, options you need or not, accordingly, they create a folder structure for you. So let's say Create WebEx. Let's say, wasAsia, done. That's it. WasAsia, our thing is created. So this is the manifest.json generated as we discussed. It is manifest version, name, description, version, icons, dummy icons, and content script. This is important. So as I told you, we can give all URLs or any specific rejects. So what I want is just run this content script on only the sites with mozilla.ovg. I don't want to run it everywhere. So the code which I'm going to write will only work on mozilla.ovg. So there's a content script file which is included. So all I need, so simple what I will do is I'll change it to blue as your request so that it may fix. Ah, my bad. So what I do extra is I will just make it available to all URLs instead of any specific URL. So it's a very small code. I'll just read it. Document.body.style.border equal to 20px solid blue. So probably everyone in the room knows what it will do. So the task is to put it into the browser which the manifest file will do. All URLs is the spelling mistake. Nice catcher. Save me. So let's do. Let's go to the debugger. And all I need to do is load the temporary add-on in the documents. The add-on name was Fossacea. I'll come Manifestation. So as you see, I installed a dummy icon. It's already there. Our extension is here. So what we need to do is just open any site. The add-on is ready. I don't think I took more than a minute. And so the story is not over yet. So just a moment before I answered the search question that what if this is only for Firefox? Let's give it a try on Chrome. So all we have to do is go to extension. So we have to make sure developer mode is on, because again we are loading something which is not signed by the store. We are loading that extension. Again, we are going for this, select, and let's see how this works. It's working the same here. So it's completely cross-browser. But when we port add-on from Chrome to Firefox or vice-versa, not all APIs behave same. So when I say it will be working across all the browsers with minimal or no change. This is, for example, for no change. But there can be a few changes. For example, context menu. In Firefox, we use browser.menu. In Chrome, we are using Chrome.menu that much only. So we can define a global variable and accordingly we use. So yeah, that's all from my side, guys. Thank you.