11.5: Chrome Extensions: Pop-ups - Programming with Text

Hello. This is another video in my series

about Chrome extensions, which, you know,

right now, I just want to say at the

beginning of this video, I hope to

actually turn this playlist into

something that's, instead of saying

Chrome extensions, just say browser

extensions, because that is something

that is quite possible beyond simply the

browser Chrome. But I'm gonna stick with

Chrome right now as I work through all

the details. So what am I going to add in

this particular video? Well, as you can

see here in my diagram – I can't see over

there anymore. My monitor is now blocked

by something else. As you can see in my

diagram here, I have talked about content

scripts and background scripts. And what

I'm going to add today is something

called a pop-up. So a pop-up is a page

that you can launch that's essentially

like an overlay of what's in the

browser at a certain

moment. And I can launch it via a browser

action – for example, clicking a button

that I have in the top over here. I can

press that button and I can have some

sort of pop-up come up. So I could do

things like, Oh, I could have an interface

where I could change colors or make

selections or type in a word that I want

to look up. I could augment the browsing

experience through a separate pop-up

page that is that is part of my Chrome

extension. So that's what we're gonna

make

in this tutorial. Okay. So what I'm gonna

do is I'm gonna start with the code that

I had at the end of my background script

tutorial, which, if we look at – and I already

made a copy of it into a new folder,

which I'm calling pop-ups, which you can

find a link to this code for this

tutorial in the description as usual. And

what I have is that

manifest.json file. So i've already

changed it to Coding Train Extension 3.

Maybe I'll say, You know, I'll change it to The

Coding Train Pop-up. It is –

The content script is available for all URLs,

and the background script – Now

interestingly enough, I actually don't

need a background script just to have a

pop-up. Like, I might need a background

script for something else that's going

on in my extension, but I don't need it

just for the pop-up. So I think just for

simplicity in this particular tutorial,

I'm gonna take out the background script

and I'm actually going to just delete

the file that is the background script.

Actually, you know what? I'm gonna leave

it there, because eventually, one thing

that I'm gonna want to do is if you

recall, a way that I sent a message – the

way that I controlled the content script

or made an event happen in the content

script from the background script was

sending a message. And actually, what I'm

probably going to want to do now is send

a message from the pop-up to the content

script. So, the code that's in the

background script is going to become

useful for me, because I can use that

same code in the pop-up. All right. So – but –

when there's a browser action, I want

there to be something more. I want there

to be a default pop-up. No, it's not

written over there what I'm supposed to

type right here. I just looked over there

because there was something interesting

happening. I'm putting notes over there,

and I want this to be – Now can I make

that in another folder? Let's try this.

What I want to try to do is make the

pop-up an entire piece – Let's actually

first just make it an HTML page. So I'm

gonna just call it pop-up.html. And I

think I need to say – Oh, I don't need to

but I can say default title, and this

will appear in, like, the tooltips, like a

pop-up will come here. All right. So, I think

that is now some stuff that I can add to

now have a pop-up. Now, what this means is

there needs to be an HTML page called

pop-up.html. So I'm gonna make that

file – pop-up.html, and I'm just gonna

I mean, I should – I don't really know if you

need all this stuff in the HTML page, but

let's just put basically like something

really basic there right now just to say

like, "Hello." I know. Choo choo. Okay? So

this page, I want to see pop-up

when I press that button in the browser.

Okay. Here we go.

So now. What do I need to do? Remember, I

need to load the code, I need to load that

extension. 05 pop-ups. This is the

one I'm gonna select – the whole folder. I'm

gonna hit select no errors occurred in

the loading of this extension. So it

should be fine. Now I can go to any page.

I just

happen to be going to my Coding Train, I

mean, my Chrome extension tutorial page.

If l go there now, look. I should be able

to – See this button right here? This is my

button. The reason why it has that image

is because I included the default icon

to be this PNG file. And if I click there,

look at that! There's my pop-up! It can't

have a giant Choo choo right there and not

use the train whistle. All right. So, we

see that the pop-ups work. Now, let's try

to do something a little bit more

interesting with the pop-up. Let me see

if I can put an animation there or

something. Let's see if I can put a whole

p5 sketch there. So let's try that. So

what I want to do I'm gonna just work

with the file system for a second. Like,

let me see if I can do – I'm gonna make a

folder called sketch. And then what I'm

gonna do is I'm going to

actually delete pop-up.html. We saw

that that worked. I'm going to pause for

a second and come back in a second. And

I'm back. Now,

what I have done in that very long

amount of time – way longer than it should have

taken me – is I have grabbed one of my

previous examples from a coding

challenge that generates a maze, and I've

put all of the code for that coding

challenge in a folder called sketch. So,

now what I want is for the pop-up to

display that example. Let's just look at

that example, what that example does. I've

got that example also just running here

in the browser. Let me just quickly go to

that. So this is the example. It

generates a maze using a particular

algorithm that I used a long time ago

in a challenge. So what I want is when I

click this – the files not there anymore – I

want to see that maze. Okay. Here we go.

We're gonna make this happen.

So what do I do? What I have to do is –

Uh, this file doesn't exist anymore. I

deleted it. What I need to do is, here, the

default pop-up should be sketch/

index.html. So the question is, is that

enough? If I just point to that page

that's in the sketch folder, will it work,

or do I need to do something more to

reference the different JavaScript files

and libraries and things that I'm using?

Let's find out. And then I'm going to

change. Oh, let me just show you that here.

We should see – We should say, "generate a

maze. That's going to be the message,

the little tooltip message when you hover

over the button. So I need to go and

reload the Chrome extension. And it

doesn't actually really matter what page

I'm on, but I'm gonna stick on this page. If I

hover over here, you should see right? I'm

getting that generate a maze message. And

then – It worked! So that was actually quite

easy. So you can see here I have the maze

generating in the pop-up, and

interestingly enough, let me press that

button. It goes away.

Is it gonna pause and continue from

where it was before?

Is it gonna start over? Had it already

been running for a while when I first

clicked it? I didn't even notice. Let's look

again. Let's see. This is interesting. It

started over. So notice this is very

important. This is a page that's being

loaded fresh each time every time you

click. It's not a page that's running and

being hidden and then revealed. It's

actually a new page that's being loaded.

Which brings up another question. How do

I debug something that's happening on

the pop-up? Is there something here? Nope.

Whoops. So let's add a console.log

into the pop-up. This is actually all of

that code. And I'm just going to say

console.log frame count. So this is

what I would log typically in a p5

sketch if I wanted to just see that it

was running. It should say 0 1 2 3 4 5,

counting every single frame. So now I'm

gonna reload the extension. I'm going to

refresh over here, and I'm going to click

the button. So where is it logging that?

Well, let's look in the JavaScript

console. Let's try clicking the button

again. It's

over my console. Let me try again. No. So,

notice how this is not where the – Only

the content script is playing a role in

the actual content page. This pop-up is

just information. So this video is about

to end because I'm kind of at the end

of it. But I need to do something. What I

want to show is how you can have the

content script send a message – I'm sorry –

the pop-up send a message because

ultimately, maybe I want to build an

interface there where I, you know, I made

a Chrome extension where I doodle on

the page. So maybe I can like pick a

color or change the line thickness, that

type of thing. So I'm gonna get to that

in the next video. But I at least want to

figure out where I can debug this stuff.

If I look, here this is where I would

have a console.log for a background

script. But I don't have a background

script. This is a pop-up. I don't see it

there. Where is it? So actually – Thank you

to the chat who clued me in on this. I'm

going to press this button here, and I'm

going to right click. And if I right

click, I now see I have this option

called inspect. And I can select that, and

it's going to bring up another window. I

can go over to console. So this is the

JavaScript console for the pop-up.

There's a JavaScript console for the

page – content page – there's a JavaScript

console for the background script, and

now, there's a JavaScript console for

this particular pop-up. Okay. So I've

shown you how to add a pop-up. You can do

this –

anything that you can put on a web page

can be in a pop-up. You could start

querying API's and drawing maps and

doing anything in that pop-up. So what I

want to do in the next video is show you

how to send a message from the pop-up to

the content script and change something

in the interface by what you're doing in

the pop-up. And I kind of have – I have an

idea for that.