Name: Augmenting the Internet with Browser Extensions // Shannon Capper // CascadiaJS 2018
Uploaded: 2020-04-15T18:20:51.000Z
Duration: 25 min 30 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Adverbs of degree

I am really excited to be up here talk to you about browser extensions.

We are going to talk about what they can do, challenges my team faced when we built ours,

and most importantly what all this has to do with sandwiches.

My name is Shannon Capper and I am a front-end developer here in Seattle as a starting company

I should tell you a little bit about what I do.

We are an augmented writing platform that lets you know how your language is going to

We document a score, we use highlights to draw your attention to key phrases and suggest

We are writing a recruiting aid here and as you can imagine this isn't the ideal user

It is disruptive to come over to our website to write the e-mail and copy and paste it

Ideally we would want to bring the platform to you.

We wanted to build something that looks like this.

This is someone else's page and someone else's e-mail editor but with all the text in U OOSHGS

Out of curiosity, how many of you use browser extensions on a regular basis?

Now how many of you know how to actually build one?

You may be smarter than me but I use browser extensions all the time and had no idea how

they worked until I started building one.

It turns out they are pretty straightforward.

A browser extension or a plugin is just a small piece of software that runs inside the

My extensions are built with JavaScript, HTML and CSS.

There is a standardized web extension backed by the W3C.

Safari and Internet Explorer use different extensions so it

The question you should be asking here is what can't a browser extension do because

Frankly, it is kind of terrifying knowing all things we are capable of.

For example, you can get lots of controls over your tabs.

It can open new ones, read the ones open currently, and close them.

Pop-up blocks for a good example of this.

They monitor open tabs and monitor those that detect problems.

Mail checker will ping the server regularly to see if you have new mail and if it detects

We can read, modify and add to the DOM of any web page and this could be used in a creative

This is a video of Google's translate which reads the selected text from the DOM and adds

a tool set to the page to show you the translation.

Another example is my personal favorite called millennials to snake people and it is awesome.

What it does is finds any instance of the word millennials on the page and replaces

it with the word snake people to write results like this.

Here the plugin is actively modifying text nodes put into the DOM by the house page and

that could be dangerous but we will get to that later.

To go back to the earlier question, if browser extensions can do all those amazing and powerful

First, they are tied to the browser so if the browser isn't open, the extension can't

Next, you can't go changing your permissions willy-nilly.

You have to declare which pages you want to run on and which parts of the web extension

If you want to go change those permissions later on, the extension is temporarily disabled

until the user agrees to the user's new one.

Probably the most important thing it can't do is directly interact with the

They don't even share the same Window object.

While this is sometimes a problem, for the most part, it is a good thing.

At CascadiaJS two years ago, it was called out the dealing with the polluted objects.

The host page might do bad monkey patching and the good news is we don't have to deal

with any of that because we are in an isolated environment.

Under the hood, a browser extension is made up of four parts.

A manifest file containing metadata and specifies permission, there is a pop-up which can be

invoked by clicking on the extensions icon in the browser's toolbar, there is a background

script running behind the scenes whenever the browser is open and isn't tied to any

one tab and has access to the full web extension API, then there is the context scripts and

they can talk back and forth with the background script.

If you are used to seeing server-client architecture diagrams you will notice this is looking similar.

These are the ones that can interact with the DOM and what we will focus on for the

My team decided we wanted to build a com extension.

We decided to start with Chrome since that is what most users use and we knew we could

We wanted to bring Textio to e-mail and supported clients.

Now that we know the powerful things an extension can do, it should be straightforward to make

Turns out writing JavaScript that runs on someone else's page is way harder than writing

As a browser extension, you have no control over the page.

You can't control how its laid out, you can't control the code or the user action and every

Not only that, but it is also super easy to abuse your power and change things in a way

that brick -- breaking news -- breaks the host site.

We laid down a set of principles and principle one is don't write site specific conditionals

and number two is don't break the host page.

One problem writing an ex tension that works across multiple hosts is each one is different.

Subtitles ListPlay Video

Augmenting the Internet with Browser Extensions // Shannon Capper // CascadiaJS 2018

specific

scenario

native

applause