11.1: Introduction to Chrome Extensions - Programming with Text

Hello. Welcome to another session for the

course Programming from A to Z. And

except that you're watching this

video, it's called Programming with Text

on YouTube because programming from A to

Z sounds like it's a beginner course, and

this course is really for people who have

already gone through my Foundations of

JavaScript stuff, and who want to do more

things with programming with text –

generating text, analyzing text, and a lot

of different things like that. So,

what is this playlist going to

be about? This playlist is about Chrome

extensions and a word that I can't say,

bookmarklets. I like to say "bookmark-lay"

No, that doesn't make any sense. That was like

the French for the bookmark-lay? No.

Bookmarklets. It's very hard to say.

Bookmarklets. So why is this

interesting? Why is this important? So all

of my sessions in this particular course

have all been about – I mean this is not

entirely true – but this is a web browser.

The sessions have all been about

programming, kind of, what happens inside

here – inside the actual content of the

page – by creating your own – I know – It's a

vacuum cleaner because I live in the

real world where things happen, like

vacuuming. But I'm gonna just go on.

Sometimes, my mind lives in its own

universe though, which hopefully, makes

these videos somewhat watchable, but, or

not anyway. So, this is what we've been

focusing on. And maybe you make an HTML

file, and a JavaScript file, all sorts of

things to make things happen in here. But

working with text. So you make

a web page. It generates a poem and it

makes a chatbot with the user. All these

kinds of things that I've looked at.

Analyzes text that a user typed in. But

what if what you really want to do is

affect the browsing experience as a

whole? So what if what you want to do is

say when the user is on the website

github, or when the user is on the

website of a particular newspaper, their

experience that user's experience of

browsing that web

page changes. Now this is typically done –

and so, a way to do this is with two

different things. One is called a

bookmarklet, which is a way of creating a

simple bookmark button that can live up

here that can run some JavaScript code

to alter and change your view of the

current web page you're on. The other is

called a Chrome extension. Now you can

imagine here the reason, sort of, one

limitation of me making this

tutorial video is that it is a Chrome

extension. It is only for the browser

Chrome. But it allows you to essentially

make – If you think about Chrome like you

might think about your phone, you can

develop an app for your phone to alter

your experience of using your phone – a

Chrome extension is like an app for the

web browser Chrome itself that allows

you to alter the behavior of the browser

beyond just what's happening in the page.

So you can add interface elements, you

can know about what people are typing

into the address bar, you can create a

page that shows up whenever somebody has

a new tab. You could know that somebody

said "new tab," you could know –

you could pop up a timer whenever a

user is on some sort of

social media website to tell them, "You

only have five more minutes to look at

this website and then close the tab for

them anything you could do to alter

subvert change the browsing experience

now this exists as a business model

because companies can make Chrome

extensions to you know offer you a

coupon or I don't know have pop-up chat

pop-up that get offers to give you help

on that page I use a Chrome extension

called two buddy I'm now projecting out

by accident promoting which gives me

extra features to see how to manipulate

and know my stats and all the sort of

stuff while I'm browsing YouTube so

that's really but what I want to think

about in this playlist are this idea I'm

just gonna call it for lack of a better

word creative Chrome extensions so what

if you use a crow what if you create a

Chrome extension to subvert distort

change our browsing experience for the

purpose of social commentary

or art or activism and I should mention

there's something important about this

this is not something that you can just

put on somebody's computer you can make

a webpage put it on a web server email

all your friends they come to my webpage

but you you can't put a Chrome extension

on somebody's computer without them

opting into that we'll see that in a

moment as we look at the Chrome

extension

store however I'm not really in this

playlist going to focus at all about how

you can deploy your Chrome extension to

the store I'm gonna show you how to use

a Chrome extension in what's called

developer mode so you can write and

create and debug and edit and change

your Chrome extension right there on

your own computer if it's something that

you then want to distribute you can

package it and put it into the chrome

store and I'm just super some kind of

approval process there but we're gonna

stay with a sort of local development

environment so this is kind of the

overall picture and so in the first two

first tutorial what I'm going to do is

has a warm up kind of looking a

bookmarklet which is kind of a much

simpler lower look lower barrier of

entry point to just do something

interesting with manipulating the

browsing experience so I'm gonna start

with that and that so if you--if you

want to get to the code stuff you can

stop this video now just go to the next

one but what I'm going to do before I

get to that is let's look at some

examples of some different Chrome

extensions all right so let's look at a

couple examples of things that I'm

thinking about this is a bookmarklet

called the deletion ascent to me on

Twitter and I believe it actually

relates to something that I did a

previous video about erase your poetry

kind of which is that let's try it so a

bookmarklet is a thing that I can drag

into the bookmark bar and then in theory

when I press this button ooh

it got rid of stuff so let's go to let's

go to github.com and let me click the

deletion nest well and it got rid this

is actually very very similar to one of

my favorite bookmarklets called wordless

web which actually gets rid of

everything on a webpage that is text

which has some really surprising and

interesting effects trying to think of

one more website that's not going to

make me feel so awkward and

uncomfortable to go to to demonstrate

this idea but anyway I encourage you to

play with the deletion so this is

something I'm Mabel will make a

bookmarklet that replaces every image on

the webpage with like kitten kitten

images or something like that we'll do

that another Chrome extension that I

wanted to show you is by one of my

favorite artists um addy wagenknecht her

website is places I've never been calm

this is a Chrome extension that she

created called girls versus get I'll

just read to you what it does every

username on github is replaced with a

generic female username every Gravatar

is a place with a Gravatar of a woman or

female type image why there is a death

of women contribute to open source

software this plug-in is presented as a

filter to challenge assumptions about

gender roles and software and to rewire

your brain so you can see here you can

imagine this is a chrome one something

you can do with a Chrome extension is it

only activates when you're on certain

web pages and changes your view of that

web page and so you can see this is uh

this is on github I will include links

to all these chrome extensions and

bookmarklets in the video description

I'm going to come back to wordless web

this is a Chrome extension that was

submitted by I'm just want to make sure

I have the right name looking in the

slack channel here

I believe sorry Noah van boven I

apologize for pronouncing the name

incorrectly called

Web Paint. Let's try adding it. So if you

make a Chrome extension that's in the

actual Chrome Extension Store, you can

just go and hit "Add to Chrome" – Now here's

something really important. This is what

I mean by opting in. Chrome extensions

get a lot more permission to do stuff

beyond what you would normally have just

in a generic, regular web page. So this

Chrome extension says it can read and

change all your data on the websites you

visit. Presumably, this has been vetted by

Google, I suppose, and

in the Chrome Store because it doesn't

do stuff like steal all your

passwords. But this is certainly – there

are certainly security and privacy issues

that are at play here. But I'm gonna add

this extension. And then what I'm going

to do is I'm going to go back to

github.com/Schiffmana-to-z. I'm gonna –

Now one thing a Chrome extension

can do – and we're gonna see this – is you

can add menu options to the menu, like

this button. So now, I'm gonna click this

button. Oh and look! You can even do a

pop-up! Well, I'm gonna show you how to do

pop-ups too. And I'm gonna pick this

pencil, and now I'm gonna just start

doodling art. So this is, by the way,

this is very similar to a – What else can

I do? This is so fun! This is way better

than my example. Aah! Anyway. I clicked off

of it. But you can see, this is something

that I intend to make as part of this

playlist a Chrome extension that allows

you to use p5.js to draw and make a canvas

overlay over the webpage that

you're currently browsing on. Okat. Another

Chrome extension is one called Code

Doodles. This is something you can do to – I

forgot what it's called, but to create a

webpage that appears. So right now if I

make a new tab, I don't have any

extension that replaces the default

Chrome new tab, which just shows me the

Google search bar and some recently

visited sites. But Momentum is another

one. All my students all have this one. I

should probably install it. But let's try the

Code Doodles one. So I'm going to add

this one. It says this one all I can do

is replace the page you see when opening

a new tab. Add extension. And so now, every

time I make a new tab, I get – Whoa! I get

some cool interesting Code Doodle

project. Oh! So I would have to research

this more to know credits-wise, like, who

these are coming from. I wonder if it's

still – Oh, it's loading. Wow! These are all

like super crazy WebGL 3d things, which

is kind of wild. So you can see the

range of possibilities. This is a Chrome

extension by Melanie Hoff called Deco

Delia. And I don't know if I pronounced

that right. It's a Chrome extension and

glasses set that uses basic principles

of color theory to render

your browsers content visible only with

the use of red tinted glasses. So

you can see here, I can't see what's

going on here, but if I happen to have

the red-tinted glasses – so I could

essentially, if I'm in a coffee shop and

I didn't want anybody to see what I'm

doing, I could wear my glasses and use my

computer without anyone being able to see

This is probably a nice video

summary Melanie is an alum of both the

school for a point of computation and

ITP the graduate program where I teach

So I encourage you to check out this

wonderful Chrome extension. I just want

to see if there's a right. So you can

search for some like things on your. So

this is obviously a kind of like an art

project. But it actually does work. I've

seen it. It's great. But I also want to

mention A Wordless Web, which is one of

my favorite projects. Very similar to the

Wordless Web. Sorry. By Corey Forsythe and

Gigli, which – this is a Chrome extension

that takes whatever website you're on. So

you can see this is an image of Facebook

and just gets rid of all the words and

all you're left with are just the images. This would

be interesting to think about doing one

that does the other. So I hope this

video gives you kind of a general

introduction to, the – This is the worst

diagram ever! – overview of why it is we're

here. And a range of some kind of

creative and artistic possibilities. And

what I'm gonna do in the next bunch of

videos is just really go through the

nuts and bolts of how to make these

things. And then at some point, hopefully

towards the end, I'll do a couple coding

challenges to make some quirky Chrome

extension or bookmarklet projects. Okay?

Thanks for watching and I'll see you

maybe in the next video.

[Music]

{Blank}