Cross browser extensions
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 561 | |
| Author | ||
| License | CC Attribution 2.0 Belgium: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/44215 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
FOSDEM 2019114 / 561
1
9
10
15
18
19
23
24
27
29
31
33
34
35
38
39
40
43
47
49
52
53
54
55
58
59
60
63
65
67
69
70
78
80
82
87
93
95
97
102
103
104
107
110
111
114
116
118
120
122
123
126
127
131
133
136
137
139
141
142
148
153
155
157
159
163
164
168
169
170
171
172
173
174
181
183
185
187
188
193
196
197
198
199
200
201
205
207
208
209
211
213
214
218
221
223
224
226
230
232
234
235
236
244
248
250
251
252
253
255
256
257
262
263
264
268
269
271
274
275
276
278
280
281
283
284
288
289
290
293
294
296
297
300
301
304
309
311
312
313
314
315
317
318
321
322
327
332
333
334
335
336
337
338
339
340
343
345
346
352
353
355
356
357
359
360
362
369
370
373
374
375
376
377
378
383
384
387
388
389
390
391
393
394
395
396
406
408
409
412
413
414
415
419
420
425
426
431
432
433
434
435
436
438
439
440
441
445
446
447
448
453
455
457
459
466
467
471
473
474
475
476
479
480
484
485
486
489
491
492
496
499
500
502
505
507
508
512
515
517
518
529
531
533
534
535
536
539
540
546
550
551
552
553
554
555
557
558
559
560
561
00:00
Kummer-TheorieWeb browserField extensionFormal grammarData structureContent (media)Scripting languageWeb pageGroup actionComputer configurationMultilaterationField extensionWeb browserKummer-TheorieGroup actionComputer iconDomain nameComputer configurationFunctional (mathematics)Bookmark (World Wide Web)CodePattern languageUtility softwareWikiWeb pageMultiplication signGoogolInterface (computing)Scripting languageSphereSoftwareDesign by contractAndroid (robot)Web 2.02 (number)Event horizonMetadataRevision controlDescriptive statisticsOrder (biology)Graph coloringContent (media)WordPoint (geometry)Java appletFormal grammarConnectivity (graph theory)Data structureComputer filePasswordPerfect groupBootstrap aggregatingMereologySoftware developerFacebookGoodness of fitAbsolute valueSystem callRight angleCache (computing)Suite (music)Maxima and minimaLink (knot theory)Form (programming)Latent heatDifferent (Kate Ryan album)Computing platformBitPlug-in (computing)CASE <Informatik>MathematicsCodeAutomatic differentiationComputer animation
07:44
Group actionWeb browserExecution unitLink (knot theory)Domain nameGoogolFacebookPattern languagePower (physics)Matching (graph theory)Web browserTrailAuthorizationPerfect groupMathematicsScripting languageDependent and independent variablesEmailEvent horizonWeb 2.0File formatMoment (mathematics)Complete metric spaceWeb pageMereologyComputer iconMultiplication signContent (media)Open setLink (knot theory)Frame problemComputer fileCodeSoftware developerData storage deviceGraphical user interfaceClosed setField extensionNumberKummer-TheorieGroup actionMedical imagingInterface (computing)Computer configurationBookmark (World Wide Web)Task (computing)Message passingType theoryRegulärer Ausdruck <Textverarbeitung>Latent heatBitOcean currentParameter (computer programming)Right angleDescriptive statisticsRevision controlMultiplicationFunctional (mathematics)Video gameTap (transformer)WritingComputer animation
15:20
Automatic differentiationScripting languageContent (media)Domain nameLink (knot theory)Word
16:12
Link (knot theory)Computer wormStructural loadVideo GenieMenu (computing)Dew pointPiScripting languageWeb 2.0Web pageOpen setLink (knot theory)Computer iconRegulärer Ausdruck <Textverarbeitung>Software developerField extensionView (database)InternetworkingComputer animation
17:44
WordView (database)CodeInternetworkingWordCASE <Informatik>2 (number)Computer animation
18:09
Lie groupExecution unitGraphical user interfaceSelectivity (electronic)Context awarenessTotal S.A.WordHeegaard splittingScripting languageFrame problemGroup actionNumberMenu (computing)CountingMobile appFunctional (mathematics)Multiplication signSlide ruleMatching (graph theory)BitRight angleLengthSource codeComputer animation
19:38
Structural loadMIDIExecution unitView (database)FreewareField extensionWeb browserSoftware developerLink (knot theory)Graphical user interfaceWordContext awarenessAsynchronous Transfer ModeSoftware testingWeb pageMenu (computing)Scripting languageKummer-TheorieGame controllerTotal S.A.SpacetimeSource codeComputer animation
21:19
Execution unitStructural loadKummer-TheorieInformation securityKummer-TheorieGraphical user interfaceField extensionWebsiteMultiplication signProcess (computing)Formal grammarMiniDiscAuthorizationWeb 2.0State of matterSource codeComputer animation
22:50
Hard disk driveOrder (biology)Computer animation
24:07
Computer animation
Transcript: English(auto-generated)
00:06
Otherwise, happy to introduce another Matilda 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 changes the
00:21
behavior of the browser more than just a page, how can you do that across browsers? Awesome. That's my talk. Morning everyone. So everyone can hear me at the back, right? Perfect. Perfect. Yeah, that's a mic check, we've 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
00:44
can see 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
01:04
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? Plugins for browser. Plugins for browser. Anyone else?
01:20
Okay, let's keep it simple. Anything that extends the functionality of a browser is a browser extension, right? Browsers are quoted with like 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 quoted with minimum, so basically one size that fits all.
01:46
But your browser when, okay let me put it like this, browsers are cool, everyone agree to that? Perfect. So when it suit up with extensions, it become a superhero, right?
02:05
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
02:28
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?
02:43
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?
03:03
So this is a savior tool for me, like people who are really bad at grammar. Maybe block your ads and trackers, anyone know this extension? Ghostery. Maybe using for secure browsing, does anyone know about Facebook containers?
03:23
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 stock things, maybe you want some news, maybe you want to do some search, maybe you want a better UI.
03:41
All that can be done via extension. Maybe managed passwords? Precisely, anything you want with your browser. How to do that? Let's get started, this is an interesting part. I am just sugar coating it, it's the most boring part of this talk, because it requires
04:01
some bootstrap coding. So this is a structure of extension, how it looks like. It is a manifest file, it has some components like content script, background script, page action, browser action, yeah these are fancy words, I'll make it simple for you guys. So manifest.json is the entry point of the extension.
04:22
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.
04:42
Second thing is content script. 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.
05:02
These scripts directly is injected into the code DOM. Second thing is background script, yeah that executes in background. So what happens is, content scripts 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
05:24
script, but for example you know 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
05:43
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,
06:00
you can click that small button and find what is the IP of the domain, 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, I mean whenever you click that, maybe opening a popup, maybe executing
06:23
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.
06:41
If you want to give users 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, it supports CSS and JavaScript together. That was a boring one, trust me.
07:01
Web extensions API, so whenever I say or anyone say API, what comes in your mind? Anyone? Contract. Interesting. Sorry? True, but this time, I mean, I can say this comes directly from MDN.
07:25
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
07:44
JavaScript interface where you can just plug in some options and do the actions. So what basically I'm saying is, with JavaScript, you are touching the browser's code. Like for example, as simple as throwing a notification, it's a native browser action.
08:03
But you are doing that thing with JavaScript with this method, web extensions APIs. So there are ample APIs, we'll see some of them. Notifications API, this is my favorite because this is like most straightforward. You put some options and it throws a notification.
08:22
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.
08:44
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.
09:00
Right? Like you guys have seen that whenever some add-ons 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.
09:20
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, that score will be displayed here. It's as simple as that.
09:42
There are more to that, like for example you put, you want to communicate to background script, throw a notification let's say. So you can listen to that action 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.
10:06
So that can be dealt by like set bash text, whatever you want to set, you can set there. Tabs API, this is an interesting API. So this gives you full power of tab. For example, whenever let's say combine to browser action and tabs API.
10:24
Whenever you want to open few tabs on click of 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. Let's say you are making an extension which keeps a track how many times you open a Facebook page.
10:45
So this can be your frame. Like on activated, I'm not sure if it's visible at the back or not. But this says browser.tabs.onactivated.adlistener. So basically you can put a function, JavaScript function, whenever the tab opens. And you can count like how many number of times Facebook page has been opened.
11:02
So this is a very naive example, but I'm just giving an idea 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.
11:21
Maybe anything you want, maybe just simple text and plug it here. So this tab will replace the new tab, the stock new tab and put your HTML page into this. One more to go there. This is the most interesting API.
11:40
Do anyone know about this web request API? It was in news recently, so probably. So this makes you super powerful as an extension developer. As the name says, it's like a whole-soul owner of the web request.
12:02
This API lets you to modify a web request in any way. Basically it has multiple events. On before request, on send headers, on before send headers, on send headers, on header received, on response headers, on completed. And on before redirect, on auth required.
12:23
So precisely to make it simple, I'm going to say like this. With this web request, you can change the response header, change the request header, maybe block the request, maybe redirect from domain A to domain B, maybe stop the auth requirement.
12:44
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? This is the same exact API which is used to make every entry tracking every ad blocker.
13:05
So this is a bit powerful. So as one of my favorite movies dialogue, with great power comes great responsibility. So please and please use this responsibility. The funny part is, every extension which is made is reviewed by reviewers manually and programmatically both in Chrome store and Firefox store.
13:35
So enough of blabbering. I told you this is like really boring part for me also and I suppose for you also.
13:44
Because as a listener, I really am not into listening all the things. Where's the code? Show me the code. Please show me the code. So I have two very silly, silly, very, very silly errands. But just explaining the idea how it can be done.
14:01
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 high. So this is a code.
14:21
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 search? 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.
14:41
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 there are two parameters, like first is matches. So matches is for like if you want to inject this JavaScript at every page. Or maybe specific rejects pattern let's say.
15:02
I just want to do it on Google.com domains or maybe just on Facebook.com domains. So for being as lazy as I am, I just put all URLs. Like hey please do it on all URLs. And what to do? Just inject this js file here. And this is my js file. Probably if the mirroring works properly I will just...
15:23
Here's my link painter. 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?
15:43
Does it even help? Okay. Sorry. So what I'm doing is very simple. I'm getting all the anchor tags and just putting the style background red. I mean yeah that's my designer self. So sorry for that. So this is manifest.
16:02
So on all mozilla.org domains this script will be injected and it will do whatever it did. Let's try it together. Hopefully this works. So to install temporary add-ons we have to go to this specific page
16:22
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 copied. And this is the name.
16:41
And like let me do two things. First I'll open if the internet allows. Of course it's google.com. Nothing happened. It's fine. Because we put a regex for just mozilla.org. Let's open mozilla.org. Can you see a bit changed view of this? So I know this is very lame, very simple example.
17:02
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 this room do you agree to that? Like if you can inject a JavaScript into a page
17:20
you can do almost anything. Everyone? So that's web 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 like all the things are gone.
17:43
Now the second one which I really like is so I just created this as a fallback like just in case if internet is not working or some of 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.
18:02
Oh I'm sorry they say. So just I will plug into the code maybe so that we have a better idea. Else they will throw me out of the... So this is a manifest, this is the background script I'm telling backgroundscript.js. Here is an interesting thing, permissions.
18:22
The permissions are required for some of the APIs or maybe most of the APIs. So this will be notified whenever you install an extension like in your mobile app. So you will be having a notification like hey this add-on wants to access your context menu and notification.
18:41
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 is a very simple example. I'm doing three steps. First thing is I'm creating a menu. Context menu means the right-click menu. Don't worry, it's available online. I'll just share the slides.
19:00
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. Don't judge me on my variable names. So on count me I'm doing simple things. I'm getting selection text because I got the selection context here
19:21
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.length and total characters selected text.length. Sounds simple? Cool. Let's see it in action before my time runs out.
19:40
Okay. So let's this is the word counter. This is manifest.json. Okay, let's go here. This is a background script so it runs page agnostic anywhere. So here is your first step. You can see the context menu entry
20:01
and when I click it you have a notification there. Total words, total characters. Make sense? But, but, but. We started the talk like cross browser extensions, right? This is all about Firefox. Did you notice? Then asked you know
20:20
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 is that the word developer mode is on
20:41
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. Any website? Seriously?
21:01
Sorry. Here's our entry and when we click it here is our notification. Thank you. Thank you. So there are few things left.
21:20
Probably one minute left. So I'll quickly wrap this up. Security. I told you that whenever you put a permission you will get a prompt that hey these sites want to do this like for example this grammar layer wants to access your data for all websites. Yeah. That kind of stuff. If you cancel it will not install.
21:41
If you add it will install. Debugging. I showed you how to 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 this process because
22:01
you can install only signed or authorized add-ons or extensions in Chrome and Firefox. There are some tools WebExtensions.tech where you can start learning. This is how you publish an add-on. These are some resources. And thank you guys.
22:25
Hopefully I don't have time for questions so do I have. If you have any questions I propose to discuss outside. Sorry guys I'm available outside you can just grab me there. And thank you a lot for the talk it was very interesting. Thank you. Okay.
22:44
This was a pretty great talk. I'm sorry to send somebody to be sure you are here. Okay.
23:01
I have some goodies. 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 lazy them. Are you sure? Okay. While you set up.
23:22
Please compact. Like hard drive. Please. I see here a place. Yeah. Okay. Okay.
23:42
Okay. Okay. I'm sorry for breaking your order. Yeah. Don't worry. Okay.