 Otherwise, happy to introduce another Mozilla Tech speaker. We'll see a bit. I think pretty much all of us think the browser is now the platform, but then the excitement is you have a ton of different browsers. So if you want to make code that changed the behavior of the browser more than just a page, how can you do that across browsers? Awesome. That's my talk. Wanting everyone? So everyone can hear me at the back right. Perfect. Yeah, that's a mic check. We have been doing the whole morning, right? Cool. So yeah, that's me. Whenever I go back to my home country, India, I miss food. You can see it already. So today I'll be talking about cross browser extensions. What are cross browser extensions? Okay, what are extensions? Anyone? So here's the thing. I'm a super lazy speaker. I mean, I sleep while talking. I have a history of that. So just in case if I sleep, you have to wake me up with your answers. So once again, what are extensions? Anyone? Sorry? Plugins for browser. Plugins for browser. Anyone else? Okay, let's keep it simple. Anything that extends the functionality of a browser is a browser extension, right? Browsers are putted with bare minimum requirement. Maybe the tools which your developer needs may not be needed by a designer or a designer needs a tool which are not needed by a developer, right? So browsers are putted with minimum. So basically one size that fits all. But your browser, when... Okay, let me put it like this. Browsers are cool. Everyone agree to that? Perfect. So when it's suit up with extensions, it becomes a superhero, right? So it's not a new thing. Like since the browser-browser extensions are there, why we are talking in this conference about in this specific room about browser extensions? I know you will kill me for this because JavaScript. So these extensions are made just using JavaScript. And how many of you use any form of extension or any extensions maybe Chrome, Firefox? Almost everyone. So any links which extension you use the most at Blocker? No scripts. Anyone else? STDPS everywhere. I love that personally. Empty cache. We have ample of examples. So just to have a revision, what an extension can do? This is like one of my favorite tool because I am super bad at it. If I write my call for paper without this, surely everyone will reject it, right? So this is a savior tool for me, like people who are really bad at grammar. Maybe Blocker ads and trackers. Anyone know this extension? Ghostry. Maybe using for secure browsing. Does anyone know about Facebook containers? Perfect. If you don't know after this talk, give it a try. Maybe better new tab experience. Like whenever you open a new tab, you may not like the stop things. Maybe you want some news. Maybe you want to do some search. Maybe you want a better UI. All that can be done via extension. Maybe manage passwords? Precisely. Anything you want with your browser. How to do that? Let's get started. This is an interesting part. I am just sugarcoating it. It's the most boring part of this talk because it requires some bootstrap coding. So this is a structure of extension. How it looks like. It is a manifest file. It has some components like containers, pages, browser action. These are fancy words. I'll make it simple for you guys. So manifest.json is the entry point of the extension. Whenever you create an extension, you have to tell the... No worries. Whenever you create an extension, you have to tell the browser what all your extension can do. What permissions it requires. And all the metadata like name, description, version. So these kind of stuff we put in manifest.json. Second thing is content script. So there are times when you need your extension to inject some script into the browser code. For example, you want to read all the anchor tags in the page. So you need to put some JavaScript code into the page. So this is the thing which is used to do that. These scripts directly is injected into the code DOM. Second thing is background script. Yeah, that executes in background. So what happens is content script are page dependent. Like for example, you open Google.com and you want to do something on Google.com. So that can be done via content script. But for example, you want something to do when the Google.com opens right before opening. You have to put the code in background script. This is page agnostic. Like it runs whenever the browser runs. It's not running only when your page opens or specific page closes. But this runs throughout the browser time. Page action and browser action. So these are pretty utility buttons like toolbar buttons whenever you want to give a functionality. For example, the first one is an example of an IP finder. So whenever a URL is open, you can click that small button and find what is the IP of the domain or where it is hosted and that kind of stuff. This is pretty page specific. Whenever a page is loaded, that depends on that icon. The second one is browser action. It's more generic. Whenever you click that, maybe opening a pop-up, maybe executing some action, maybe injecting a content script or maybe sending signals to background JavaScript. These are options page. The next thing is option page. So option page is basically this is a method how you put preferences in your extension. If you want to give user's facility to maybe change the color of your add-on or maybe some timing of doing events, this is a place where you can do that. And this whole thing is just HTML page. This supports CSS and JavaScript together. That was a boring word, trust me. Web extensions, APIs. So whenever I say or anyone say API, what comes in your mind? Anyone? Contract. Interesting. Sorry? True. But this time, I can say this comes directly from MDN. How many of you know MDN? I suppose JavaScript developers almost everyone know MDN. MDN is Mozilla developer network. It's a wiki of all the JavaScript basically. So these are the APIs which are built on top of browser features and has a native JavaScript interface where you can just plug in some options and do the actions. What basically I'm saying is with JavaScript, you are touching the browser's code. For example, as simple as throwing a notification, it's a native browser action. But you are doing that thing with JavaScript with this method, Web Extensions APIs. So the AMPEL APIs will see some of them. Notifications API. This is my favorite because this is most straightforward. You put some options and it throws a notification. Probably this is more of self-explanatory type basic. So basically it says like basic includes a message, a title. There are like image types. Just notification will have images. So it just does a simple task browser.notification.create. Basically it creates a notification which has icon on that icon.png. It has a title, my extension and with a message, my notification. Browser action API. So I just explained what the browser action is. So the interesting thing is like whenever you click a browser action, you have a pop-up, right? Like you guys have seen that whenever some irons have whenever you click the toolbar button, there's a pop-up. So how many of you know that that pop-up content is just a plain HTML page? Anyone know that? Now you know that. It's a plain HTML page which executes with JavaScript and CSS. You can do anything there like write anything, execute anything, maybe fetch APIs. Maybe what to say like for example live ticker. Let's say you want a there's a FIFA match and you want a live score. You have an API for that. You can just call from on that page and whenever you click that button, the score will be displayed here. It's as simple as that. There are more to that. Like for example you put you want to communicate to background script through a notification. Let's say so you can listen to that action on click and listen to the action on on click and the action can be done. There are sometimes like in some extensions you may have seen like there are small badges next to the browser action. So that can be dealt by like set batch text. Whatever you want to set you can set there. Tabs API. This is an interesting API. So this give you full power of tab. For example whenever let's say combined to browser action and tabs API. Whenever you want to open few tabs on click off a button you can use that API. Whenever you want to do some action on close of any tab or maybe on opening of any tab this can be an action. I will give you an example like let's say you're making an extension which keeps track how many times you open a Facebook page. So this can be a friend like on activated. I'm not sure if it's visible at the back or not but this is browser dot tabs dot on activated dot at listener. So basically you can put a function double script function whenever the tab opens and you can count like how many number of times Facebook page has been open. So this this is a very Navy example but I'm just giving an idea of how this can be used. New tab API. So this API just lets you to do one single thing. Change your new tab page. So you can create an HTML page maybe anything you want maybe just simple text and plug it here. So this this tab will replace the new tab the stock new tab and put your HTML page into this. Okay one more to go there. This is the most interesting API which I do anyone know about this web request API. It was in news recently so probably okay so this this makes you like you know super powerful as an extension developer. Like as the name says it's like a whole soul what to say owner of the web request. This API lets you to modify web request in any way. Basically it has multiple events on before request on send headers on on before send headers on send headers on header received on respond headers on completed and on before redirect or required. So precisely what to make it simple I may say like this with this web request you can let's say change the response header. Change the request header maybe block the request maybe redirect from domain A to domain B maybe stop the requirement. So let me put back this I think all of you know ad blockers right everyone has been using ad blockers. Do you think this API can be used to make an ad blocker of your own right this is the same exact API which is used to make every entry tracking every ad blocker. So this is a bit powerful so as one of my favorite movies dialogue with great power comes great responsibility right so please and please use this responsibility. The funny part is the funny part is every extension which is made is reviewed by reviewers manually and programmatically both in Chrome store and Firefox store. So enough of blabbering like I told you like this is like really I mean you know boring part for me also and I suppose for you also because as a as a listener I really am not into listening all the things like. Where's the code show me the code please show me the code. So I have to very silly silly very very silly around but just explaining the idea how it can be done. First first one is link painter by the name can you guess what it does. Sorry it makes the link stand out but I'm a really bad designer so it will be really bad so don't have your hopes I so this is a code basically these are two files this is one file and this is other file. So can someone tell me which is this file called manifest that chase exactly so it has some like name version manifest version description icons and the important part is content script. Remember I told content script few moments back what it does it injects JavaScript into the current page right so this is the format of content script everyone at the back can see this right perfect. So the two parameters like first is matches so matches for like if you want to inject this JavaScript at every page or maybe specific rejects pattern let's say I just want to do it on Google dot com domains or maybe just on Facebook dot com domains. So for being as lazy I am I just put all URLs like hey please do it on all URL and what to do just I'm inject this JS file here and this is my JS file probably if the mirroring works properly I will just. Here's my link painted here's my manifest JSON this is the content script and content script says oh it's really hard to coordinate together can we do a quick word wrap. So what I'm doing is very simple I'm getting all the anchor tags and just putting the style background read I mean yeah that's my design itself so sorry for that. So this is manifest so on all Mozilla dot org domains this script will be injected and it will do whatever is done let's try together hopefully this works so to install temporary add-ons we have to go to this specific page about debugging. And we can just load temporary add-on so I created link painter I'll give path to manifest.json and here's my link painter it has a small icon which I just copy and this is the name and like let me do two things. First I'll open if the Internet allows it's Google dot com nothing happened it's fine because we put a rejects for just Mozilla dot org let's open Mozilla dot org can you see a bit change view of this. So this is I know this is very lame very simple example but my idea is to make you understand like how easy it's injecting a JavaScript into the page and when you can inject a JavaScript into the page you can do wonders. So every JavaScript developer in my in this room do you agree to that like if you can inject a JavaScript into a page you can do almost anything everyone so that's the extension for you right. Let's try another one this is an example of something using content script. And I'll just remove this and reload the page just to make sure that all the things are gone. Now the second one which I really like is so I just created this as a fallback like just in case of Internet is not working or some that kind of stuff. So this goes like this. Second one is word counter. I bet you cannot guess what this add on can do. Okay. Oh I must hurry to say. So just I will plug into the code maybe so that we have a better idea as they will throw me out of the. So this is a manifest. This is the background script. I'm telling background script.js. Here is an interesting thing permissions. The permissions are required for some of the APIs or maybe all of the most of the APIs. So this will be notified whenever you install an extension like like in your mobile app right. So you will be having a notification like hey this add on wants to access your context menu and notification. So do you agree if you agree then only this will be installed. Sorry for my pace. I'm getting a bit faster. Hopefully that can match. So this in very simple example I'm doing three steps first thing is I'm creating a menu in the context menu means the right click menu. Don't worry it's available online. I'll just share the slides. So I'll create a menu and give the context like hey I want the data from selection whatever I select give me the data to the function. So whenever there is a context menu on click I'm adding a listener count me. Yeah don't just be on my variable names you know. So on count me I'm doing simple thing I'm getting selection text because I got the selection context here. And with that selection text I'm framing and splitting and counting the number of words and I'm just creating a notification like hey total words this words dot length and total character selected text dot length. Sound simple. Cool. Let's see it in action before my time run out. Okay. So let's this is the word counter. This is manifest.json. Okay. Let's go here like this is a background script so it runs page agnostic anywhere. So here is your first step you can see the context menu entry and when I click it you have a notification there. Total words total characters. Make sense. But but but. But but but. We started the talk like cross browser extensions right. This is all about Firefox. Did you notice. Then asked you know I told you like I sleep like please I totally forgot. So let's try this on Chrome. Does it work. I still have maybe two or three minutes. Let's test this quickly. Two minutes. Extensions. One thing we need to make sure developer mode is on so that here we can load unpack and it's link painter link painter is fine. Let's go to word counter. Let's open it and let's open it. Any website. Seriously. Sorry. Here's our entry and when we click it here is our next notification. Right. Thank you. Thank you. So there are a few things left probably one minute left so I'll quickly wrap this up security. I told you that whenever you put a permissions you will get a prompt that hey these sites want to do this like for example this Grammarly I know wants to access access your data for all websites. Yeah. That kind of stuff if you cancel it will not install if you add it will install debugging I showed you how to debug debugging basically why we say debugging because. Whenever you install whenever you install an add-on or extension in Chrome or Firefox these guys are looking at me like please hurry up I'll throw you out of the state. So you have to go through through this process because you can install only signed or otherwise add-ons or extensions in Chrome and Firefox. There are some tools web extensions or take where you can start learning. This is how you publish an add-on. These are some resources. And thank you guys. Hopefully I don't have time for questions so do I have yeah if you have any questions I propose to discuss outside. Sorry guys I mean I'm available outside you can just grab me there. Thank you a lot for the talk. It was very interesting. Thank you. Okay. Trust with you. I'm sorry to send somebody means to be sure you are here. Yeah. Okay. I'm putting it outside. Oh thank you. I have some goodies. I'm putting it outside this room. If someone is interested please grab it. Or maybe I can just keep it here if you don't let it do. Are you sure. Okay. While you set up please compact like a hard drive. Please I see here a place yeah. Ah. Okay. Okay. I think we're going to be busy today. Yeah. Yeah. Yeah. Yeah. We're going to get out of here. I'm sorry for breaking your own. No. No. No. No. No. No. No. No. No. No. No. No. No. No. Thank you very much for your time. Thank you.