WALTER MARTIN: Hello, everyone joining us in the virtual space.
I'm Walter, and this is a seminar on Chrome extensions.
Chrome extensions are great, lightweight tools
that people use to personalize, customize their web browsing
experience, make it more efficient, make it more enjoyable.
And they are actually easier than you might think, starting out.
At their most basic level, they're a single manifest file
in JavaScript Object Notation-- a JSON file.
And there is a lot of complication that you could add here-- hold
on-- but you don't have to.
The only things that are actually required for a Chrome extension
are the Manifest Version number, a name for it, and a version number.
If that was all you had, your extension wouldn't do anything--
it wouldn't be very exciting.
But you don't have to do much more than that to get something working.
So as a very, very basic example, you've got
a piece of code here, which just has a manifest.json
with a name, a description, a version number, a manifest version number.
So note, the name, the version, and the manifest number,
are the three things that are critical.
And we have an icon-- which is what's going
to show up in the top right-hand corner-- the badge, the extension.
Crest.png is just the Harvard crest-- a picture that I found on the internet.
And there is a browser action.
I'll talk more about that in a few minutes.
But note that it has a pop up.
And that's going to be an HTML page.
They HTML page, itself, is very simple.
It's literally just some text, which means
it's not going to be very interesting, but it will serve as an example.
And if we want to see that in action, we'll need to pull Chrome back up.
And we're going to look back at our extensions page.
You'll note, I'll un-enable these, for the moment.
So these are the extensions that I currently
have installed that are non examples.
But if we want to enable this example, you'll
note that we've got one more popping up here,
with the Harvard crest, as I said.
And if we click on that, we should see that HTML page.
Note, it's not very pretty.
It's very plain.
It's not formatted well.
But you could fix that yourself with some CSS, and some more complicated
HTML.
But that's a working Chrome extension, and it was maybe
15 lines of code, at most.
Now, for more information about a manifest file,
this URL, which will also be in the slides, has a full listing of things.
And you'll notice you can click on most of these different fields
to learn more about them.
There's a lot of stuff there.
There's a lot of functionality that you could take advantage of,
but you probably don't want to, or need to.
But there will be something to accomplish just
about anything you could want, within the context of this manifest file.
So we've now got a couple of different ways
to actually implement your Chrome extension,
depending on what you wanted to do.
So the first of these is a browser action,
and that was what we saw in that other example, where we had the pop up.
Browser action-- the goal of a browser action
is to have some action available any time,
regardless of what web page you're on, anytime you say click on the badge,
up at the top, or maybe, anytime you type something specific
into the Chrome search bar.
They're going to be around all the time.
That might not be what we're looking for in a Chrome extension.
Maybe we want something that specifically interacts
with Facebook in a specific way.
And in that case, a page action makes much more sense,
because its functionality will be localized to one, or two, or three
pages.
It only needs to run when those pages are currently loaded,
which allows us to save processing resources.
It'll look slightly different.
It won't have the same badge, but it will
be able to have the same functionality in terms of when you click on it.
You'll be able to affect things the same way that you would
with a browser action, just only for specific pages.
A third idea to be aware of-- it's not in the same category as a browser
action, or a page action.
Either one of those can have a background script,
but a background script is a JavaScript file.
And remember, JavaScript, we're using primarily to affect the DOM.
It will be running all the time, in the background, as the name suggests.
So if there is some functionality, say, maybe you're
creating a Chrome extension for an email account,
and you want a notification any time an e-mail comes in,
that script is going to need to run all the time,
because an e-mail could come in at any time.
So background script would be the right choice there.
You can also create background pages.
Sometimes, in terms of structuring your application,
it might make more sense to have an HTML page where the JavaScript is being run.
But the main thing you focus on is the scripts-- the JavaScript scripts.
Additionally, event pages, and event scripts,
are similar to background scripts.
They can run all the time in the background,
but they wait until a specific event has happened, which
makes them a little bit less wasteful.
So this is what Chrome is asking people to do
these days, unless there's something that
really should be running all the time.
Now, additionally, content scripts are something else.
Certainly, if you have a background script,
you can also have a content script.
But they're sort of ideas in opposition, because they're
running very much in the foreground.
They are directly interacting with the pages
that you, as a user of the extension, are viewing-- really
changing the DOM directly.
And if you have an application that has both,
they can communicate through message passing.
This is something that Chrome has constructed.
That's a more advanced topic.
I'd suggest you check out the documentation for that.
But just know that it does exist.
And then, content scripts, we have an example of.
So remember, we said that content scripts were good at changing the DOM.
Pull that up.
That's not quite the right one.
We've got another manifest.
Same kind of deal-- name, version, description.
But we also have this content scripts tag.
And I should actually tab this over, for good style.
But we have this content scripts field, here,
which has several parts inside of it.
And note, also, that we have square brackets here.
So content scripts implies there can be more than one.
And within this single script that I'm running, it has more fields.
So matches is telling us which you URLs this content script should run on.
Here, it's just saying anything.
JavaScript-- the JS-- that's the script that's going to be run,
and we'll take a look at that in a second.
And then, "run at" is saying when these scripts should actually be run.
And here, we're choosing to run the document end, which is to say,
when the document is fully loaded.
So if we look at this content.js file, it's
not important that you understand everything that's going on here.
But essentially, we're pulling out all of the elements of the DOM.
We're iterating through each of them.
And when we see the word psychology, we replace it with applied biology.
When we see biology, we replace it with applied chemistry.
You could, if you wanted to, substitute in plenty of other words here.
It's just a simple model for how you could use a content script.
And to see that in action-- no, that's not quite what we want.
So remember, I said, psychology will be changed to applied biology.
And we're going to enable that extension, word replacer,
in this new tab.
We're going to go to the psychology page.
And you'll note, it got changed, after the page was fully loaded,
to applied biology.
And we'll see that it ended up getting changed everywhere here.
Now, we have applied applied biology.
So that's content scripts.
Page override is another cool piece of functionality that Chrome gives you.
Chrome has a few default pages-- the one that
handles your history, your bookmarks manager, and the new tab
page that comes up.
And a Chrome extension can override one of these with it's own HTML pages,
adding some functionality, or anything else you find interesting.
So I've created a simple example here, which just replaces your background--
the background of a new tab page-- with some additional nice pictures.
Again, this manifest looks awfully similar to what
we've been seeing before.
That's because you have to have the same default fields every time.
I'm using the same icon.
That could be changed.
But note the new field here-- Chrome URL overrides.
So that field is saying, we're going to have
an override page in this extension.
Which one?
New tab.
And we're going to overwrite it with menu.html.
Menu.html is a very simple file.
I've just listed some things that you could do in the new tab space,
instead of the picture that I'm including.
But then, it also loads in a CSS file.
And that CSS file will load into the body--
the background of the body-- this background.jpg, which
I've also pulled from the internet.
And then, just does a little bit of formatting
to make the text that I've put there look nicer.
So if we go back to our extension page, and enable that one, pretty pictures.
So note, again, something, we had the crest pop up here,
but I can't click on it.
I didn't have a page action, or a browser action here.
So clicking on it wouldn't do anything.
Chrome grays it out, automatically.
But if I go over and create a new tab, we
have a beautiful picture that is obviously not the default page
that we would see here.
So just another idea of things you could do.
For additional functionality-- and this is where Chrome extensions really
start to gain power.
Most of the things that I just showed don't have much substance to them.
But if you want to really start affecting the way that Chrome works,
and changing the browser, Chrome offers a vast selection of APIs
that will allow you to make these changes,
whether it's to windows, or tabs.
You can open, close, search through, manipulate those things,
or changing things in the omnibox which is the search box that Chrome provides.
Chrome storage is really useful for storing
user preferences, which can be really handy notifications,
will allow you to send users notifications, in their desktop,
from Chrome.
So there's a lot of really cool stuff in there.
We can't go through all of it, because there's just too much.
But there is a listing of this in Chrome's documentation,
under API index.
One thing to note is that, also, to do some of these things,
you're going to need to ask for which URLs users have open.
Because that's a privacy risk for Google-- and for your extension,
I suppose.
You have to get explicit permission from a user to be able to do that.
That's actually very easy, though, because, in the manifest,
there is a permissions field in which you just specify
the list of permissions that you want.
And it'll prompt users to accept those permissions
when they download the application.
So that's handled for you.
Finally, I mentioned something about a user preferences earlier.
One nice thing that Chrome offers is an already partially set up options page.
Again, you create your own HTML files here.
You can link them up to the rest of your extension with basic JavaScript.
And the options_ui, especially, will create a nice overlay
to the Extensions page, allowing you to change the options as a user.
So Chrome extensions, overall, are a very powerful tool.
I'll just go back to the start.
Very powerful, but at the same time lightweight tool.
And keep that in mind.
Now, most people, when they're looking to install a Chrome extension,
don't want another full application.
The whole idea is that it's an extension.
So while it might have a lot of functionality,
it shouldn't be a hog of memory processing time.
And maybe it shouldn't even have that much functionality.
Maybe one or two things is a good amount of stuff
to encapsulate into one Chrome extension.
And if you have more ideas, maybe make several.
Let's see.
Do we have any questions?
AUDIENCE: Can you speak to the publishing a little bit?
WALTER MARTIN: Yeah.
AUDIENCE: [INAUDIBLE]
WALTER MARTIN: So publishing is super important.
Obviously, I haven't mentioned yet how you run your own Chrome extensions.
So I'll need to pull this over again.
Right.
So you can have your files with the Chrome extensions on your own machine.
If you go to the Extensions page-- the URL
up there-- if you check the developer mode box,
you will get this load unpack extension button, which
brings up a window if I click on it.
And this is where I've stored my Chrome extensions.
So if I wanted to load one of these, you'll note,
if you look back in the video at where the manifest file was stored,
it's at the top level of each of these folders.
That's how Chrome knows that it's a Chrome extension, that it's loading in.
But I can just open one of these, hit OK,
and it will load a local copy of the extension for me.
So if you wanted to share it with a few friends, you could take those files,
turn them into a zip, send it through email, or Facebook.
And then, they could unzip it, and upload it in the same way, and use it.
So currently, I'm I've been enjoying this new tab picture functionality.
So I'm going to keep using it locally, probably.
But if you wanted people, beyond those who have communication with you,
to be able to use your extension, you're going
to need to bring it to the Chrome Web Store, which is designed to do this.
And you're going to go through the Developer Dashboard.
Of course, you'll need to have a Google account for this.
I'm not actually going to sign in right now,
but it allows you to upload extensions.
And then, after paying a fee of $5, I think,
to have your account activated for publishing to the web store,
you can upload things, and other people will be able to search for them
and download them, themselves, which is pretty powerful.
Extensions get vetted for viruses and such.
So I guess, don't try to pull anything, because Google is always watching.
But you should be able to get that published, I
think, pretty easily, once you've gotten past that first step.
I think that's all I have for now.
Thank you for watching.