11.2: Bookmarklets - Programming with Text

Hello. This is a video tutorial where I'm

going to show you how to make a very

simple, basic bookmarklet. And this is

really a warm-up. My goal here in the

next video and the video after that and

the video after that is to start looking

at Chrome extensions. Chrome extensions

are a much more powerful way to affect

the browsing experience as a whole and

actually the interface elements and all

sorts of stuff

in the Chrome browser. But a bookmarklet

is a really quick and easy way to add a

button that's like a bookmark that

triggers some code that changes your

browsing experience. So let's look at how

that works.

So before I get to that, I'm gonna leave

it es5 which is – and not use some of the

fancier newer JavaScript syntax just to

sort of demonstrate the simplicity of

the idea. But I I'm sure that it will get

people watching who will help suggest

fancier ways to write the same code, and

I look forward to including that in the

supplemental materials that'll

be linked from this video's description.

So if you've ever made a function in

JavaScript, you might have done this

function. You know. Hello. Curly bracket

curly – no parentheses, parentheses, curly

bracket, curly bracket. If I want to

execute this function – I want to run that

function – I would just say hello with the

parentheses. That means execute this

function. So now you are probably aware –

I'm looking for my eraser – here it is. You

are probably aware that in JavaScript,

functions could be anonymous, meaning

they don't have to have a name. And it

can just look like this. But then how do

you execute the function? So typically,

you might write an anonymous function

because you're passing it in somewhere

as a callback, and somewhere else, it's

gonna get a reference to it, and call it

somewhere. But in the case of a

bookmarklet, what a bookmarklet actually

is it's a JavaScript function that, when

you press the button, it runs. And so a

funny thing that you can do – If this is

the entire, right, remember? If this was

named, hello, then I could execute the

function with the name and these two

parentheses. But I can actually just execute

the function by putting the two

parentheses there. So this is like an

anonymous

self-executing function. Again I think

that's right. There's some probably more

appropriate technical term for it. So

this is actually – So, what a bookmarklet

actually is – and if I just put something

like console.log or alert, maybe

alert will be a good, I think I never – I

have this like mission in life to never

ever use a JavaScript alert, and I'm

gonna, somehow I'm gonna do that. But I'm

gonna break that mission – that's it – right

now. So I could say alert("hello").

So if this were the code for my

bookmarklet, whenever the user presses

the button or goes to that quote-unquote

bookmark, this code is gonna execute. So

this begs the question – This is a very

simple idea. And now it's up

to you. Like, well what do you put in here? You

can read – This is where you can start

parsing and looking at what's on the

webpage and changing it in real time

with JavaScript. But the question is,

"Where does this code go?" So now let's look

at that. All right. So you might be aware

that if you go – so if you go to a URL – and

this, you don't really see. Chrome, by

the way, is hiding the fact that this is

http://. So I could go to the

URL by saying http [inaudible], I'm saying I

want to make a hypertext transfer

protocol get request to this URL. But I

can also, in the browser, look at things

that are like files on the computer. So I

can open up index.html, and you can

see, "Oh look! Now I'm going to the file://,

but I can actually –

there is – and there's actually like a

data path where I can do base64

encoded images. There's all sorts of

different kinds of paths that the

address bar will accept. One of them

happens to be JavaScript. Let's – Dare I

try to do this? Function – Oh, I am

remembering something that I'm also

being told in the chat. I made a little

mistake here, which is that in order for

you to execute this function the way

that I've described here, you actually

have to also enclose the entire nameless

or anonymous function in parenthesis

itself. So otherwise, it's unclear

I guess to the interpreter like what

this actually matches up with.

So this is execute the function that's

inside these parentheses. I'm pretty sure

that's required. So. Now let's come back

here. So the reason why I thought of that is because

now, I'm going to actually just type

that code in right here in the address

bar. Function – It's gonna be really hard.

Function, curly bracket, alert hello,

semicolon, close curly bracket, close

parenthesis, parenthesis, parenthesis. So

this is me saying, "I want to go to this

URL. It's JavaScript://.

Actually I don't think you need the slash

slash if I'm thinking about this. I think

it's just JavaScript:, and then this

code, which is a self-executing anonymous

function. So I'm gonna zoom back out here.

And I'm going to now hit enter as if I'm

loading this web page. And I get this

alert. The page says, "Hello."

So that's actually what a

bookmarklet is. And I wish I had

copy-pasted that, because now, all I need to do

is I can say – I can have a paragraph and

I can say, "Hey, this is –

I could say a href = bookmarklet.

All right. So we'll take a look at this.

Now we can see this here. Now if I click

on this, nothing happens. So what can go

in a – What can be the h ref to an a tag?

It could be a URL? It could be –

It could be lots of things. One of the things that

it can be is actual JavaScript code. So for

example, that same thing that I typed,

JavaScript: function – Oh I need to

put parentheses around the function.

function a parenthesis, a curly bracket, alert

hello,

close quote, close parenthesis, close

curly bracket, close parentheses, execute.

So now let's try refreshing this page

and now whenever I click on that, it runs

that JavaScript code.

Now guess what. If I wanted to bookmark a

URL, all the whole thing, like, if I – Like

here, I have a bookmark up here to the

rainbow topics github repository. If I

click edit, all this is is a name for

this particular URL. A bookmarklet is

just a named set of JavaScript code. So I

can now say, I can now – If actually

what – I could create it. But I

can't really just drag this up here and

you can see – look at that. Now I have this

here. And every time I click on it, I

get that alert. Click. Alert. Click. Alert.

And if I go edit, we can see this is just

this – Now it's URL encoded. It did that for

me because a quote is not a valid

character in a URL. So this has

been URL encoded meaning %27. You'll

often see like % 20. That means space %

27 currently means single quote, I think.

So you can see – you can write it this way.

Now – so in a way, we're done. Yay. We made a

bookmarklet. But we haven't really done

anything yet. Like, here's the thing. Is

this really sustainable. Is this the

thing like, "Oh my goodness. And how am I

going to send – What if I want to do

something really elaborate. I want to

crawl – I want to look at all the content

on that web page and I want to find all

the paragraph elements and I want to

look anytime the word puppy is in there,

I want to change the word puppy to

kitten. So it's a bookmarklet that

changes puppies to kittens – or swap

images out, or change the background

color of every web page to a random

color. All these things are possible. But

working with kind of trying to write the

code in here is going to be so

incredibly awkward. Like, how am I gonna

really develop. Because I can't really

have line breaks or spaces very easily

here. So there is a strategy that is used

quite often. So the next step that I want

to show you is how could I write all of

my bookmarklet code in a separate

JavaScript file, and then simply point to

it from here? So in other words, what I

want to say is new file,

I'm just gonna call it bookmarklet.js.

And then what I want to do is I want to

be able to write the bookmarklet in a

way that's much easier for me to

follow and debug. So, for example,

something that I might do is I might say

console.log, bookmarklet

starting. And then I might say – and now I

don't have access to – There is a way to

gain access to JavaScript libraries, like

I could have jQuery or p5 be a part of

what I'm doing. But I'm gonna just do

stuff with native JavaScript. So I could

say, for example: let p –

paragraphs = document.get

elementsByTagName, p, and then I

could say for

let i = 0, i < paragraphs.length,

i++, and I could say

paragraphs, index i.innerHtml = ...

So this is me like kind of doing a

little version of The Deletionist,

or Wordless Web. Like, we find all the

paragraphs on the page and just set

their inner HTML to nothing. Or I could

say set their inner HTML to kitten.

So this, now, if I wanted to, I could put

all of this into that JavaScript URL, and

I could remove all of the – I could

remove all the white space and probably

make it work. But what I could do that's

a little bit easier is – and I'm gonna I'm

gonna just type this out on this in this

text document for a second.

Down here, I could actually say, all

right – So this is kind of the – and I could

write this anonymous function, and

then what I can do is one of the things

you can do in JavaScript is add elements

to the web page. And so the element that

I want to add is a script. So I'm going

to say let script = document.

createElement script.

And then what I want to do is I want to

change the source – script.source

equal to bookmarklet.js. So I want the

source to point to this other JavaScript

file, and then I want to say

document.body.appendchild script. So in

other words, this is kind of some

boilerplate code that can basically say,

"Point to a different

javascript file that's gonna have all

this other stuff and tons and tons of

code, and then just load that and execute

that code whenever the bookmarklet is

triggered. So this is actually what I

want. Did I get this right? And hopefully, I

got this right. This is what I want to go

in here. And this is going to be a little

tricky to make happen. Actually what I'm

gonna do – I'm gonna do this here – is now

what I'm going to do is I'm going to

just put this all on one line. There

might be a way for it to account for

line breaks and stuff. So I'm gonna take

this now and I'm gonna put it in here

[hums a note]

Let's see – Is this is really gonna work? I

didn't close the paragraph tag. So let's

see what happens here. So I am now going

to refresh this page. I'm going to delete

this one up here. I don't know if you can see that. I

am going to – I'm just gonna like click

this. Okay. Error 404. File not Found. So

I think there's a – Okay. So there's a

little bit of an issue here, which is

that – and I'm gonna get to this. You

actually need to host your JavaScript

file somewhere, and I have one that I

already made and hosted somewhere. Let's

see if I can get the one that I – So this

won't really work in a sustainable

way. But what I can do – I wonder if it

doesn't like the whitespace either. But I

think more likely, right, what I need to

do is just say "this". Because what I want

to do – Let's just make sure this is the

right

URL for that JavaScript code. It is.

There's that JavaScript code of that URL.

So that should allow it to point to

the actual URL where that JavaScript

code is hosted. Now what I'm gonna do is

click this. Arrgh! Oops. I made a really silly

error.

I completely forgot that I need to have

this say JavaScript at the beginning.

Just miscellaneous JavaScript code in

that URL is not gonna do any good. So

this has to say JavaScript. Sorry about

that.

All right. So let's try it now. I'm gonna

click on this bookmarklet. And it made a

kitten, and we see the console log.

Perfect. So what I could do is I can now

drag this up to here. I could go to like

my tutorial page. I'm now on my tutorial

page. I'm gonna scroll to the middle

somewhere where there's a bunch of

paragraphs. I'm gonna click the

bookmarklet. And all the paragraphs now

say "kitten." Yes. So, this is the basic idea

of making a bookmarklet. What you need to

do – and it's obviously a little trickier

than I thought – and you can see,

actually, I should have just copy-pasted the code from

my tutorial. But here it is right here.

I can just – Basically, all I need to do is

have this boilerplate code that points

to a JavaScript program that's hosted

somewhere. And then, what it does is that

JavaScript program does something, parses

the web page, changes some stuff, anything

is possible there. Now there's a couple

things I want to mention about this.

Browsers love love love love

love to cache your stuff. So if I – I don't

know if this is gonna

happen, but let's see if we can make this

happen. If I change this now to say puppy,

right, and I go back to and refresh this

page and click the bookmarklet, it does

say "puppy." So, it worked. But I've

definitely been in a situation where I

changed the code and the bookmarklet

didn't actually update when I

executed it. So a way that you can

get around this, I actually have it here

in this tutorial. So I'll just –

is to add a kind of arbitrary URL argument

which is like the current date and time,

which will force – it'll make the URL

appear different to the page that's

loading the JavaScript code, and it'll

force it to reload. So I'm gonna leave

that out of adding that in. But you can –

When I publish the code for this example,

I'll include that as part of the code.

Now, what I've shown you so far, it

doesn't really do you any good.

At least what I'm going to do is I'm going

to show you this is actually a piece of

JavaScript code that's basically the

same thing that just takes all the

paragraphs and changes their background

color to some purple. So the way that you

really want to do this is you want to

host your JavaScript code somewhere

permanent, and then what you want is for

the bookmarklet

to reference, not like – referencing

localhost is no good. It's gonna work on

my computer. But you want to reference a

URL that's actually out there somewhere

in the cloud. The nice thing about this

is, as people use your bookmarklet – I mean

there's is a sort of security

question here. You can change your

bookmarklets code and they don't have to

reinstall it because the the actual code

that they have in the bookmarklet is

just pointing to another JavaScript file,

and that JavaScript file can be updated.

Ok. So maybe I'll come back and do a

coding challenge. So send

me your creative bookmarklets that change

images to kittens or puppies or

rainbows or unicorns or whatever, and

all sorts of, I'm sure, more creative

ideas than what I can think of right now,

but I'm gonna now move into Chrome

extensions. We can do – I'm gonna start by

making a Chrome extension that does

exactly the same thing, but with this

kind of code that alters your view of a

web page in a Chrome extension, there's

going to be a lot more possibilities of

what you can do beyond that, okay? So thanks

for watching this bookmarklet tutorial,

and I'll see you in the next one.