Up next in 10
Watch the third session of Women in Tech Virtual Conference by Jyotsna Gupta as she talks about Building Cross-Platform Browser Add-ons.
C# Corner - Global Community of Software and Data developers
https://www.c-sharpcorner.com
Conference Website: https://www.2020twenty.net/womenintech
#Cshaprcorner #womeintech #diversification #virtual #conference #girlpower
Show More Show Less View Video Transcript
0:00
Thank you
0:29
welcome thank you any thank you hi welcome yeah thank you really great to have you here and um i
0:59
I think we're all very excited to hear your talk on building cross-platform browser add-ons
1:05
So for the next 30 minutes, this page is all yours. Thank you so much
1:24
Hello everyone. I hope you all are doing great at your pace
1:28
and keeping safe. So as I'll be talking about cross browser extensions today
1:34
giving you overview of what are extensions and how can you build one
1:39
So let's start with myself first. So I'm a software developer at Exordel
1:45
I primarily code in Golan and I contribute to open source. And it's been five years
1:51
that I have been contributing to Mozilla. And currently I'm enrolled into the two programs right now
1:58
which are Mozilla Tech Speakers Program, and another one is Mozilla Reps Program
2:03
And finally, I'm contributing to the add-ons community of Mozilla. So in case you wanna reach out to me
2:10
with respect to Mozilla Tech Speakers Program, Mozilla Reps Program or add-ons related queries
2:15
you can just reach me out and let me know what are your questions
2:20
Post this. And so today I'll be talking about the agenda would be
2:28
Basically, what are the browser add-ons? What are web extensions? What is the architecture of web extensions
2:36
And how can you use web extensions API in your add-ons to leverage the benefit of using it
2:42
running it over Chrome, Firefox, or any other browser? And also, if you have already built an add-on
2:49
so how can you port it on another browser, basically? So this will be a quite overview
2:56
This will give you a quite overview of what are browser add-ons and how can you build one and how to get started with it and how can you go into that
3:07
I'm sure that many of you would be aware of what are browser add-ons and I'm sure that you might be using at least one of the add-ons
3:16
But still, let me replace for the non-techie people or someone who has not used it
3:20
So basically browser add-ons are a small piece of code which you actually use to enhance the functionality of the browser
3:30
So it extends and modify the functionality of browser as per your own convenience
3:35
So this was a bit technical. I know that there might be, I'm expecting there might be some non-techies or you want to tell your non-techie friends what are browser add-ons
3:44
So let me tell you. So I consider browser add-ons as the shoes with lightings
3:51
So here we all know that we need shoes. We need at least one shoes to step out of our place or whenever we are at place even
4:01
So in that case, consider shoes as the browser and shoes with the lightings as the browser add-ons
4:09
So few of you might like it and few of you might not like it
4:13
But if you ask me, then I would love to have a Lightning Shoes because I love shoes
4:18
So you can actually tell people that this is how shoes with the Lightning's are browser add-ons
4:27
Let me start with some of the examples and let me give you a disclaimer that whatever the add-ons I'm suggesting here
4:35
I have not been sponsored to give their names or to put their names on my slides
4:40
so it's just my preferences and my choices that i'm suggesting you to use these kind of add-ons
4:46
to give an overview as well and the most useful plus most famous add-ons few of them are so let's
4:54
talk about grammy lee uh we all need content related help while writing we all make mistakes
5:00
and grammy lee is actually the best tool or best add-on basically when to fix and find your grammar
5:06
mistakes of punctuation mistake or smelling errors right and we all do it especially while
5:11
writing mail we send it very randomly without even cross verifying it the content so gramily
5:17
helps a lot and it has saved a lot of people's mail content and let's see how it is works so
5:24
basically if you have installed gramily in your browser then you while writing a mail it will
5:31
actually tell you that this is the problem and this it will actually help you to find the fix
5:35
and find the problems and it will suggest you you can use them you might skip those suggestions from
5:42
gamut grammardy let's see other add-ons so another one is ghost free so i'm not sure if you might
5:50
have heard about it but it's a privacy add-on so ghost free is a privacy add-on it actually stops
5:56
the trackers block your ads and also in in return it speeds up the website loading time so in short
6:04
it helps you to stay away from the tracking digital footprints. So as you can see that
6:09
you can actually track, you can see if you're visiting a website then the
6:13
Ghostry will show you how many websites it has been blocked and what is the
6:17
second number of seconds it has actually increased for the page load time. So this
6:23
is a very one of the useful add-on for privacy concerns if you're very concerned
6:28
about the privacy. Let me talk about another add-on which is again a privacy
6:33
theme led on which is private X so let me tell you what is it so basically we
6:40
all know that whenever we are using some websites with which requires the input
6:46
of critical information we should actually view them in the private window
6:50
or in combinator window so but the problem is we all we need to we are
6:56
already using the normal window on the browsers and we tend to avoid the extra
7:02
seconds to open a private window and then open websites net banking websites or travel booking
7:08
sites because we know that if we are viewing the travel booking sites if we if let's say we are
7:14
viewing the flight rates then it might increase again and again if you are viewing it again and
7:18
again right so like booking.com if you are viewing the flights then if you are due to the cookies and
7:24
tracking features they will again reach out to they will again increase the flight rates So to avoid that we should usually try to view travel booking sites or net banking sites in a private window
7:36
So, but the problem which is that we tend to avoid that
7:40
So, which is solved by PrivateX basically. So, all you need to is, it will show you that it is, it will give you the alert that this site should be viewed in a private window
7:51
You just need to click that icon and then it will open the same website in the new private window and the best part is it actually
8:00
Removes the default Qtm tokens as well from the website URL as well. So which helps you in this gives you a second security feature
8:08
so I might be boasting about it But this add-on is created by me and I created it because I was facing I was one of it was one of the problem that I was facing that I
8:19
I had to copy, create a new private window and then open websites
8:24
So this made me to create one add-on. And I tried it too
8:27
It is a very small add-on and I just find it very useful
8:31
And I thought it of publishing so that it could be useful to other people. So next, let's talk about Facebook container
8:40
So Facebook container is another privacy theme add-on. So I would say that we all use Facebook on our laptop, right
8:48
so you might have witnessed the you have might have witnessed the ads of certain products which
8:56
you have viewed on amazon so how does it come to facebook it's because of this facebook gets the
9:01
web activities of your whatever the web activities of your amazon or other sites right so but we tend
9:09
like let's say if you're trying to book a website you will see the same ad on the facebook but
9:13
ideally we shouldn't we shouldn't get that right because we want our web activities different
9:18
isolated from the facebook so facebook container is an add-on it's a great app which actually
9:25
isolate your web activity with the facebook so facebook will not have the control over your
9:32
web activity so while using facebook facebook will know what you are viewing right on the facebook
9:37
only not what other sites you are being so it's a very good add-on to basically
9:43
eradicate the web tracking digital footprints so and I have been using it
9:49
and I found it very useful like viewing it on the laptop and next is Tabicad if
9:56
you see it's a very small cute add-on and it just it is it just whenever you
10:01
are creating a new tab it shows you a cat which blinks which leaves and you can
10:07
actually even let you pet them so the best part is it's a very small cute add-on and all i'm trying
10:12
to say here is that your add-on could be a ai-powered startup like gram elite it could be a
10:21
small add-on like very cute add-on like tabby cat and also it could be a add-on like private x which
10:26
can help to solve your problem so if you are facing some issues or problems in the browser
10:32
You can try to find the same add-on or you can try to build one add-on, right
10:36
So it's the best thing to create an add-on. It's a diverse set of add-ons
10:42
Which are there published on the Chrome web stores or Firefox add-on
10:48
And now let's see what are web extensions. So web extensions are basically a cross-browser system
10:55
So by cross browser, I mean that it's a system which helps you to build
10:59
browser for either Chrome, Firefox, Safari. So for developing an add-on. And let's see how, why should you use web extensions
11:11
So web extensions, if you see, if you go into the depth, so it uses standards HTML, CSS, JavaScript
11:17
And I assume most of the techie would be knowing, aware of the HTML, CSS, JavaScript
11:22
Even if you don't know, then you can start picking up the JavaScript and you can build one
11:27
So if I talk about me, I didn't know JavaScript. I primarily code in Golan
11:32
But one day I try to learn JavaScript along with the building and add-on
11:36
So this is how you can do it. It's very easy to just have a vanilla JS
11:40
Just have a small add-on even. It doesn't need to be a Grammarly-like add-on, right
11:46
So this is what I would suggest. It's very simple to build. It's very easy, not simple
11:51
and also you don't need different different codes to run it on each browser so for chrome also for
12:00
firefox also for oprah edge you can use the same code base with zero or minimal changes and then
12:05
you can just publish it there so it doesn't require writing the same code same logic for
12:11
different browsers so this is the beauty of web extensions and you can find since it is a cross
12:17
browser system so you can find the documentation from all over the places
12:22
Even Chrome has their own documentation. Mozilla has their own recommendation. So
12:26
you can leverage the benefit of this, right? And now let's see what are web
12:33
extensions architecture. So the architecture of web extension contains manifest.json. Basically this is the heart of the web extensions where you
12:42
start giving the basic configuration. So it's a JSON file which gives you the
12:47
which actually you can input all the JSON features and conflicts related to your add-on
12:54
What are the points you're going to give permissions? And I'll show you in the next slide
12:59
how the structure of Maniface.json looks like. But let's see what are the other components
13:05
in the web extensions are, which are actually one of them is background page
13:09
Another one is content scripts. It could be page action. It could be browser action, options page
13:15
and also web accessible resources. So let's see each one of them in depth
13:22
This is how your Manifest.json will look like for your add-on. So this is the
13:27
basic structure. The key would remain the same. The values might vary according to
13:32
your add-on. So it's very readable. You need to provide the name of your add-on
13:37
versioning of your add-on, the description of your add-on. You can provide the icons. This is the icon path. And this is the permissions. So in the permissions
13:47
this is one of the features for the security purpose. So whenever I'll discuss in the later
13:54
slides is that whenever you're using some of that API, then you need to give them, provide them in
14:00
the permissions array of key, right? So this is how you will enhance the security of your add-on
14:07
as a developer. And next is page actions. And you are providing Nexus default IDL
14:14
Whenever you are hovering over your add-on, then this message will be shown to the user
14:20
who has installed your add-on. And next is background scripts. So this is a small overview
14:25
And let's see what it actually is. And I'll show you what are the components of the components
14:32
So this is a background script. And if I talk about background scripts
14:37
So you mentioned background script path or the file name in the manifest.json in this way
14:45
So this is a code snippet of the manifest.json itself. We just provide the file name
14:50
and basically background scripts are the script which gets loaded as soon as you install the add So if I have installed your add then the background script of that add will be loaded on my browser and it will get unloaded only when I uninstall it
15:08
And the beauty of background script is it gives you the leverage
15:12
you can leverage all the web extensions APIs in your script. So there are n number of
15:18
let's say there are n 50 web extensions APIs and all the 50 you can utilize them in the background
15:23
while writing background scripts. and now let's see what are content scripts so content scripts are somewhat similar to
15:32
background script but there is a bit difference so i would say it's a normal normal scripts in the
15:38
in your web browser but the uh the key point here is you can access the dom structure and also it
15:45
uses a small subset of your web extensions API so as i mentioned let's say uh there are 58 web
15:51
extensions API then the ground skips would be able to use all the 50 web
15:55
extensions API but that's not the case with content scripts content sets might
16:00
be able to use only 20 of the 50 APIs so it has that kind of only permissions to
16:08
you that is being allowed in the content scripts but if let's say if you if we
16:14
want to use all other API is which cannot be accessed directly by the
16:19
content scripts then there is a hack basically so what you need to do is you can actually send
16:25
messages to the background script and background scripts will indirectly access all the web
16:30
extensions api and then it will send the response to the background scripts which in return will
16:36
actually send back the response to the content script so basically you are exchanging messages
16:42
to through the web background scripts to access some of the apis indirectly which content script
16:48
doesn't have the permissions to do that. So this is how content scripts look like
16:54
So I'll give an example. So let's say there is a website
16:58
in which you just want to send an alert pop-up kind of thing when you are loading
17:04
So what it will do is it will just see the web URL
17:08
and the URL is modular.org. So basically it's a domain. In any domain of the modular.org
17:15
these JS scripts will be running. But if I am viewing let's say DuckDuckGo, then these scripts will not be running because I have given in the matches field that only run these scripts only when the website is Mozilla.org
17:29
So this is how you can leverage it. It's just a normal script which runs only on specific sites
17:34
But it gives you the access to the DOM structure as well. So let's see what are browser actions
17:44
So browse as we can as you can see is there is a Grammally add-on which is installed on my add-on on my browser and the Grammally
17:54
extension icon is actually shown on the toolbar so all I need to say is is there that whenever you are using browser action then the icon of the add-on would be
18:05
visible on the toolbar and and when to use it is the point where is that when you when your add-on features are applicable to
18:15
all the websites then you use browser actions so there is a page action and browser action
18:21
whenever websites like Grammarly doesn't depend on the website right it it it its features will
18:27
be applicable to all the websites so in that case in that case all the add-ons would be there
18:34
All the features would be applicable to the website and you can use it and you can view that the
18:40
Specific add-on icon on the toolbar and this is how you mention the browser action in your manifest.json
18:46
You are providing the my browser action key You're providing the default icon which will be shown on the toolbar
18:52
You are providing the default title and there you are providing providing the popup.html
18:57
So basically if you click on the Grammarly icon you will see a small pop-up which is actually a stable page
19:04
and you can have the you can just it is a small subset of a web page exactly
19:09
pop-up is something which we know that and it will give the title so whenever
19:15
you are hovering the over the icon then whatever the default title you are
19:20
providing you it will be shown in the browser action icon and another one I
19:25
I mentioned was phrase action so when whenever the website or add-on features are applicable to the
19:32
particular website so this I have given the example of private X and private X because private X
19:38
features were limited to the net banking sites or travel booking sites it's not applicable to
19:43
google.com or mozilla.org right so in that case I have used phrase actions and it will be shown in
19:51
the address bar. Since it is applicable to the website URL, so it is shown on the address
19:58
bar and the content which you mentioned for the page action in the manifest.json would
20:05
almost be similar apart from the keyword page action or browser action. So that's the only
20:10
change which you need to mention in the manifest.json. But you need to use either of them, either
20:15
page action or browser action and then there comes another component which is
20:22
options page so options page is actually you mentioned options UI and page
20:27
options HTML page in the manifest.json as as provided in the code snippet but
20:32
basically it's a page where you can actually define the preferences of the
20:37
extension so let me give you an example let's say I'm using a extension in which
20:44
I might need to give them I might provide the notifications that this website is not good for
20:52
viewing so in that case It might be annoying to the other users as well, right as a developer
20:59
I am providing this notifications as a key feature is one of the feature which cannot be a skip by the
21:04
Users so the user one of the users my few of the users might find it very annoying and in that case
21:10
what will happen they might uninstall it. So basically as a developer I would have
21:15
used this feature notification speech feature in the options page and I would
21:19
have given the individual preferences to the add-on users who are installing my
21:24
add-on. I would have given the specific features specific to the users. Users can
21:29
actually actually turn on or turn off the notification feature of my add-on. So
21:33
this is where options space comes with the picture and let's talk about I've
21:37
I've already mentioned web extensions API word. Let's see what are these APIs
21:44
So let me start with a few of the examples. One of them is notifications, alarms, bookmarks, tabs
21:52
storage, sidebar action, context menus, web requests. So these are very few and I have just provided
21:59
very few web extensions API just to make you understand and provide in your layman language
22:03
so that you can understand and dig more into the depth. and explore other APIs as well as per the add-on requirement
22:12
So let's see each one of them. So this is the notifications API
22:17
So let's say you wanna build an add-on in which you want to send the number of count of the words basically So what you are doing is you just selecting the number of right clicking on it and just using the web add feature which is actually word count
22:35
And it will throw a notification to the user. So it's counting and throwing. So to throw the notification, I'm using the notifications API
22:44
and it's very straightforward. All you need to do is use this code snippet
22:49
to create any notifications. So what I'm trying to use is I'm using the browser namespace notifications API
22:57
and the function of notifications API is create. An alert user is the notifications name basically
23:06
Whatever the notification I'm providing, it's the name. And these are the key fields
23:11
I'm providing the key fields what are the icon would be there, what is the title, so title, whatever the title message would be there in the notification itself
23:20
So this is very straightforward and you can use this code snippet to just create a throw a notification to the user
23:26
Let's see another API, alarms API. So as the name says, let's say you want to build an add-on, which can help you to remind
23:36
which can actually help you to remind yourself that you need to drink the water right now or after 15
23:41
After every 15 minutes, the add-on should remind you that please drink the water, right
23:47
So for that periodic alarm, you are actually, for that add-on, you might be using notification
23:54
API to throw the notifications. And also, you are using alarm API, which will actually run periodically
24:02
Like after every 15 minutes, I'll have delay in minutes as 15 or delayed period in time
24:07
as 15 to create a alarm that it will run it in background after every 15 minutes and it will
24:14
throw the notifications api and you can actually bring water whenever it sends you the reminder
24:20
because we tend to work a lot and we forget tend to forget that whenever we need to bring water or
24:24
not so this is kind of straightforward you are just using browser name squeeze alarms api and
24:31
create function of the alarm api and you're providing the name and in which you are providing
24:36
the well used and it will just create an alarm in delay of five minutes
24:43
Let's see another API which is tabs API. So tabs API is one of the
24:49
API which is used more often because in browser there are tabs, any browser will be having tabs
24:57
right? You need to use the tab feature most of the times. So what I am trying to do is here is
25:03
I'm using browser API, browser namespace, and browser action is the actually thing
25:09
because you are clicking the browser action. So what is happening here is
25:15
let's say I have created an add-on. A user will click the icon of the add-on
25:21
and when it gets clicked, it will create one new tab, which is example.org
25:28
So this snippet will actually, just whenever someone is clicking the browser action icon
25:35
then it will create a new tab, which is example.org. And this snippet is quite simple
25:41
like on click and add listeners. I'm using tabs API, browser namespace
25:46
tabs API and create function of tabs API. And with a simple URL, you can just create it
25:51
And whenever it is created, you can call the other functions. And it's pretty straightforward to use
25:58
browsers tab and .create, right? And there's another API which is quite similar to the tabs API
26:04
This one is Windows API. So, if you see the code snippet, it's quite simple
26:11
So, in this, let's take an example. So, I have created an addon in which I want the user to click the addon icon
26:19
And once it gets clicked, then it will actually create a window with the two different tabs
26:26
which will be having URLs as developer.mozula.org and addons.mozula.org. So I hope you got a difference
26:33
between the Tabs API and Windows API. So basically, in the Tabs API
26:38
it will create a new tab in the same browser window, but for the Window API, it will create a new window
26:43
It could be a private window as well, depending on your features, configuration
26:48
with those URLs, which you have provided in the code snippet. So it has the same thing
26:53
Instead of browser action, If you're using page action in your manifest.json
26:57
then you can just replace browser action with the page action. And it's straightforward
27:04
And these are the kind of API which are very quite common
27:09
and it might have given you confidence that you can also build one add-on very easily
27:16
But the most important feature is security in an add-on as a developer as well and as a user as well
27:24
So I generally tend to focus on an add-on security as a user more because I see that add-on developers
27:33
would be less, but as a you might develop only one add-on
27:37
but you might use several add-ons. So security as a user is more important
27:42
than a security as a developer in my context as a number of users
27:47
So whenever, if I talk about security is then, See, whenever you are trying to install an add-on, then you will be prompted a pop-up, which actually I am trying to, in this screenshot, I am trying to install Gestureify
28:03
And it will show all the things for which it requires permissions to, as a user
28:10
So it will access your data, it will access your browser tabs, it will access Close Recent Labs, it will access, actually it will display notifications to you
28:18
So, basically the point which I mentioned in the manifest.json, there was a permissions key
28:26
in which you need to provide the tabs API as a developer
28:30
So, that feature is actually used here. So, whatever the APIs I have mentioned in the permissions
28:37
it will be shown here to the user whenever they are trying to install
28:42
So, this is very important. I'm emphasizing more on this because there are some add-ons
28:47
which actually says that they will do something. They will do some X feature
28:52
They will provide you some X feature, but they will try to access your data also
28:57
when there is no need even. So in that case, you need to know
29:01
what this add-on is trying to access, what this add-on is trying to track you
29:06
If why it is using notifications API, is add-on really using providing me the notification
29:12
Why that add-on is accessing my data or the browser tags, right
29:16
So in that way, as a security, we need to, as a user, we need to take care of the security of the add-on because your data is very important
29:26
And let me talk about security in depth as well. So whenever you are trying to install an add-on as a user, I would say whenever you are actually trying to buy some product on Amazon
29:39
so you always tend to check the reviews, you check the ratings, right
29:43
Similarly, we need to do that for add-on as well. We should check the reviews
29:49
we should actually check the ratings of the add-on for our security itself
29:53
because we don't want to be tracked uselessly. So, but we don't do that because we think that data
29:59
data is not costly but it's actually costlier than the product which you are buying on the
30:04
amazon right so please do take care of your security by while installing as an add-on as a
30:10
user but with respect to the add-on developer that add-on security would be like using the
30:17
third-party libraries and not using minified.js and also minified versions or using the libraries
30:25
that you should keep on updating the third-party libraries because they might have security
30:30
to extend it all right. So for that, as a developer, you should make sure
30:34
that you are using the updated libraries and other few key concepts which are provided
30:38
on the WebExchange and workshop website as well, which I'll mention later on
30:45
And this is the last component of browser add-ons, which is how can you code your add-on
30:50
So as I mentioned, we are using WebExchange in the browser system. So you don't need to write the same piece of code
30:58
for different browser. All you need to is you can use the same code base
31:02
or do some minimal changes. So I'll tell you what Chrome uses
31:08
Chrome uses a Chrome namespace and all the APIs would be similar
31:13
Mozilla uses both the namespace, Chrome namespace and browserspace. And Edge and Oprah uses browser namespace
31:21
So what I'm trying to say here is, if you're trying to build an add-on for Chrome
31:28
then you need to use Chrome namespace. When you are trying to build an add-on for Firefox
31:33
you can use either of them. And let's say you want to port your Chrome extensions
31:37
to the Firefox add-ons. Then all you need to do is just publish it
31:45
because Firefox accepts Chrome namespace as well. But let's say just reverse this condition
31:51
If you have built an add-on on Firefox and then you are trying to publish it on the Chrome then I would need to change the Chrome names browser namespace to the Chrome because Chrome accepts only Chrome namespace In that case I don need to do anything
32:07
just Ctrl-Find, select all Ctrl-Find and just replace all. Replace all Chrome browser with the Chrome keyword
32:14
That's it. And that's what I did for my add-on. I published it in the, for the Firefox
32:20
I used browser namespace, but Chrome was not accepting it. I just replace it and I just push it to the publish
32:25
with the Chrome Web Store as well, just by a single change
32:31
I will talk to a lot of the concepts of browser, browser add-ons, giving you examples
32:37
but let's see how can you start one? How can you start coding one
32:41
So I'll give you two options, provide you two options. One of them is web extensions UI
32:47
So you can just visit this website and actually get started. it will give you the boilerplate to get started
32:53
with the web extensions. You will provide the name, extension name, you will provide the versions
32:58
you will provide the description, you will provide do you need browser action or not
33:04
do you need background script or not. So in that case, it will give you a boilerplate
33:10
skeleton basically for your add-on and you can just start with the logic itself
33:15
It will give you a zip and you just download it and start coding. and that was most of
33:22
for the beginners basically if you're a beginner I prefer you to do that but
33:28
if you're a hard core developer and doesn't like UIMS so you can go with the command line
33:32
tool which is web extension you can install that and it will actually help you to build
33:36
run and test web extensions API and these are very straightforward command line commands web extension
33:42
run web extension link or build so you can try as well if you don't like the UI feature
33:50
And next is once you have build the add-on, what's next, right
33:54
While basically while building one add you need to keep on debugging it because to check basically if it working fine or not So all I do is I go to Firefox I write about page and enable the add debugging
34:11
I'll just load the manifest.json of my add-on. And this will actually load your add-on locally on your browser at that moment
34:19
And you can actually see if the feature you have built is working fine or not
34:24
And this is how you can debug it easily and you can provide console log or alerts
34:29
whatever you want to, how the way you actually debug the JS code
34:36
And the last thing when, after debugging, when it is working fine is you need to publish your add-on
34:41
So when you want to publish your add-on on a Firefox website, it is free of cost
34:46
You can do it. For Chrome, you might need to pay five USDs
34:50
for your first add-on and later on it's free as well. So just go to this website and just read this
34:58
This is one of the blog from one of my co-tech speaker and he has mentioned that how can you actually
35:03
publish your write-on with ease if you're facing some of the difficulties
35:07
But this documentation provided by Mozilla is all sufficient in case you want to look for
35:14
And these are few of the resources and I will actually emphasize more on the first one
35:19
because it has all the things, all the things for a developer to get started with the extensions
35:25
It has beginner level guides. It has all kinds of links, all kinds of security things
35:31
If you read it all, you will get everything. And next is, this is MDN website where you can read about how can you build it
35:38
I started with this second website itself. And this is the Chrome website, Chrome documentation
35:45
which where you can see and actually see how can you build one if you're facing some difficulty
35:49
And next is github.com. It is provided by Mozilla. Let's say if you know, sometimes you know
35:54
few of the APIs that, yes, for my add-on requirement, I need to use this API but how to use that Sometimes documentation is not enough You can actually see the small web extensions example They would be that would be running code add basically
36:10
but you can actually see how some API is used in those add-ons
36:15
And last one is the Wikipedia, Wiki page of Mozilla, and where everything is mentioned
36:21
related to the web extensions. It is, it will talk about add-ons
36:25
what are the, how can you contribute to the add-ons community as well. And just in case if you are facing any difficulty you can reach out to since Mozilla has a community of add-ons
36:37
So we are all there to actually answer you if you are facing any
36:42
difficulty of you want any queries you can reach out to the matrix and just run basically join these add-ons and
36:49
Enmo channel or you can just drop a mail to this mailing list or you can just
36:53
join this channel, join this group, add on stat on Telegram, and you can just ask
36:59
your questions there itself. And this is all about today, whatever the things
37:06
overview are provided. And just in case if you are thinking that what are the
37:11
why, how can I find the links, then you can just visit this link right now and
37:17
you can find the slide at this moment and you can just bug me or ping me or DM
37:22
me anything that I need for is related to the web extensions. Wonderful
37:26
Thank you so much, Joc. Thank you for your time for presenting today
37:31
here at the Women in Tech virtual conference. We for sure hear and see your passion
37:37
We're actually a couple of minutes late, but that's, of course, because you had a lot of exciting knowledge
37:43
to share with us. So thank you very much for that. And I hope you stay safe and stay healthy
37:49
And we for sure will be following you. Thank you, thank you, Annie. Thank you. It was nice talking to you
37:55
Thank you so much. Bye. Thank you all my pleasure
#Programming
#Internet Software
#Computer & Video Games
#Mobile & Wireless
#Mobile Apps & Add-Ons
#Education
#Online Goodies
#Social Network Apps & Add-Ons
#Video Game Mods & Add-Ons