all right so how I wanted to besides
having you watch me erase this is I want
to talk about Chrome extensions and I
guess the anatomy of a Chrome extension
I'm going to start with the most basic
kind of Chrome extension you can
possibly do so first of all again let's
think about this diagram this is the
Chrome browser maybe there is there's a
toolbar there's an address bar there's a
whole lot of elements here all of these
elements are things we can control
manipulate and and play around with as
part of making a Chrome extension but
I'm going to start with a sort of basic
idea of affecting the actual content so
for any Chrome extension that you make
the first thing that you have to have is
something called a manifest file
manifest dot JSON so this is the first
thing that you need this is a file that
has all the configuration properties and
information about your Chrome extension
so that's let's go first make a
manifesto JSON file all right so I'm
gonna go to Adam I'm gonna make a new
file I'm gonna call it manifest JSON and
so this is just a sorry I lost my train
of thought this is just a sorry this is
just a JSON file so and it's going to
have it's kind of like if you've ever
made work with nodejs you need a package
that JSON file that describes your
project so there's a couple things that
I need in here I need to say manifest
version 2 and so I think there's
different versions of like the Chrome
extension API stuff and there was an
older one maybe there's even a newer one
but two is the one that I use and it
works I could give it a name like coding
train extension I can give it like a
version which is just my made-up thing
like oh it's version 0.001
and yeah so that's let's actually just
start with that okay so let's start with
that so this is first what I need I need
to have this kind of configuration file
now there are a variety of kinds of
Chrome extensions you can make we've
mentioned this one that overrides the
new tab page the first there's there's
ones that add buttons to the interface
there's browser action space all sort of
things I'm gonna get to all that stuff
the first thing that I want to add to my
Chrome extension is something called a
Content script and a con if you watched
my previous bookmarklet video the
content script is basically exactly the
same thing that I did in the bookmarklet
it's JavaScript code that will execute
when the page loads and you can after
the whole page is loaded and finished
manipulate and draw and do things and
alter the behavior and content of the
web page work early on this is a very
powerful thing for example let's say you
want to make a Chrome extension that for
anybody browsing the New York Times it
swaps out any time the word computer
appears with the word flower so if you
wanted to do this project without a
Chrome extension how would you do it oh
maybe you'd have to create a whole fake
website that kind of looks like the New
York Times or you would load it and then
you would are you would copy you jump
through all these hoops to cry to create
that illusion the Chrome extension is a
program at least a Content script is a
program that executes that runs for any
given web page that the browser is
currently on and you can say a lot of
stuff like only for these URLs only for
this you know you can know which tab
you're on there's lots of possibilities
there so this is the first thing that I
want to add then a Content script can
have a bunch of things associated with
it but I'm going to associate with it
just one thing which is a JavaScript
file content jas so before we can start
writing that javascript code we need to
add tell the manifest.json file about
this content script so let's add that so
I think I say I might be getting some of
this stuff wrong I think I say
content scripts because there could be
more than one and then that's an array
and then I think I said you I say
JavaScript wait and it's another it's an
array of objects and I think I said no I
think I CJ s and then I could say like
content j s so for example here is this
Chrome extension now has a Content
script called that is where all the code
for this content script is in this
javascript file well I have to make that
JavaScript file now content dot J s and
all I'm gonna do is put console dot log
you know Chrome extension ready to go
whoa what did I just chrome Chrome
extension go okay so I'm just gonna put
a console log in the in the content
script now I am missing a kind of key
component here which is that by
definition the Chrome extension runs
first checks the URL that the current of
the current page and then decides
whether to run or not so one of the
things that I can add to this I believe
is matches and that's also an array and
then so I could put things in here like
you know any time I want the New York
Times and you can I don't know if you
can use a full regular expression in
here but you can definitely use
wildcards but I'm just gonna do I think
it's all URLs so this is this should be
what you put in if you want your Chrome
extension to run on all URLs so we are
by the way we're done we've actually
made our first Chrome extension the only
thing we need is the manifest.json file
that describes the Chrome extension and
we need the content j/s file which is
the we actually don't need that but if I
want to just do the basic one that is a
Content script that's what we need so
let's see now here's the question like
oh my goodness how do we get this to run
do I run a local server and I open up
the JSON file in the browser No
so this is a this is a an interesting
it's actually quite simple to do but
what I want to do is go to Chrome
oh yes oh by the way so I can go to HTTP
to look at URLs I can look at things on
the file path in my in my previous
bookmarklet videos I showed how you
could go to like a JavaScript path to
execute JavaScript code but a lot of
things for Chrome you can get to like
the version settings all that kind of
thing through the URL address bar this
is called by the way I think the omnibox
I think because there's actually you can
one of the things you could do with a
Chrome extension is you can start to
provide suggestions and make things
happen based on people type in the
omnibox I'm going to go to Chrome
extensions and you could see here so
here's here's my Chrome extensions page
I only have one Chrome extension
installed JSON format or I can enable it
or disable it one thing you can see here
is permissions so all Chrome extensions
have permission to do certain things so
it says they can read and change all of
your data on the websites you visit this
is actually the basic permissions for a
content script that's what content
scripts are allowed to do read and
change all the data on the websites you
visit so Chrome extensions are really
something you have to opt into and there
are all sorts of security and privacy
questions that come with them but we're
just experimenting playing around and
where you want to make Chrome extensions
just to run on this laptop here not to
be necessarily released to the chrome
store so how do I do that if I want to
install run the Chrome extension code
that I made I've got to go over here and
first click developer mode and what you
see now is that this miss these options
now appear load unpacked extension pack
extension the unpacked extension is just
the raw code manifest that JSON the
content is pack extension is then a
thing I could do to like package it all
into a single file to deploy it to the
chrome store but again that's kind of
beyond the scope of what I'm doing at
least in this video it's really maybe in
all the videos so i'm gonna click load
unpacked extension i'm going to navigate
to the desktop i'm gonna go to my folder
called chrome extensions i'm gonna go to
this one called basics which is where i
have those files and i'm gonna hit
select and now we might find out that i
might have made a mistake i might get
let's see so excellent I got an error
loading an extension so this is what
happens when you incorrectly format your
manifest.json file so I'm gonna have to
look I'm sure somebody in the chat is
already telling me what I got wrong but
I am going to I'm gonna try to look and
see what it is so let me go here to
manifest JSON
oh I know what it is the JavaScript
files associated with a particular
content script can be more than one
javascript file in fact you can actually
put like if I wanted to use jQuery as
part of my content script I could
actually put other library files or p5
library files in this so that needs to
be an array and actually I should have
had a clue to that because with saying
here content scripts index 0 is invalid
so this has to be an array so let's let
me hit save and then I should be able
hit retry boom we're great so we see
coding train extension version 0.1
didn't I say it was version 0.01
shouldn't that be it's version version
2.0 yeah ok so for whatever reason it
probably doesn't want let you do
anything less than one decimal place
version 1 I can check
permissions which is that yes it can
read it as a Content script so it can
read and change all of your data on the
websites you visit and it's running I
could allow it to run incognito or not
etc so it's enabled so here we go now
I'm just gonna I'm gonna open up my
console and I'm going to go to any web
page like my tutorial and hit refresh
Chrome extension goes so you can see
that Chrome extension is going no matter
what
website i go to i go to google.com
chrome extension go so that code now
with that chrome extension installed
runs for any web page that I'm on so now
I can start to change whatever I want so
let's let's do something similar to what
I did with the bookmarklet I can say
something like let paragraphs equal
document dot document get elements by
tag name you know I'm just trying
think of something simple to do I can oh
let me try using one of these new let me
try using one of these new es6 loops
why not this video randomly so I think I
could say for element like element of
paragraphs I think this is a new es6
loop which so what I'm what I'm doing
why am i covering this in the middle of
this video I'll never know why I just
decided to do this but instead of
iterating over with I I can just say
paragraphs is in it is an array and I
want to look at each element of the
array so let's see if I get this right
and I'm gonna say element dot style
background color equals you know some
color so let's see now if we now here's
the thing I'm gonna go back to this page
and I'm gonna get this is where there's
some paragraphs and I'm gonna hit
refresh nothing happened okay let me
make sure let me debug this right Chrome
extension go Chrome extension go
question mark I should see the new
message right now I'm gonna go back and
hit refresh hmm there's no question mark
there so just as Chrome extension go so
here's one of the things you it's really
hard to remember but you have to
remember when you change the code you've
got to go back here and click reload
you've got to ask Chrome extensions page
to reload the source code from that
unpack extension from that folder so I'm
gonna hit reload and then I'm going to
sorry I'm gonna go back to here and I'm
gonna do this we can see there does this
Chrome extension no matter what page I'm
on i don't know i'll go to the IMA
website for ITP right you can see it's
made all the paragraphs pink on this
page so so ah so this is pretty much
this is done at least this first video
what I wanted to show you is what are
the pieces of a Chrome extension well
one thing you can do with a Chrome
extension is alter the content of the
web page or
the behavior right javascript code now
it's really important to realize
something that I didn't mention
explicitly which i think is important to
realize is if you look at the code
there's no you know like in p5 you have
to put stuff in function setup or in you
know maybe there's like window dot
onload or in jQuery there's some kind of
like ready with a dollar sign or
something crazy like that typically you
want to execute your JavaScript code
after the web page has loaded so you
need an event the webpage is loaded
execute this code a by definition the
content script does not run until the
page is already loaded I could also have
the Chrome extension work for just a
particular webpage there's a specific
syntax to what you're allowed to put in
matches and I'm often getting it wrong
in fact there's a little edit point
there because I just had some trouble
figuring it out so me I am sue me and
the chat just gave me a good suggestion
so you can use wildcards so I think like
this would basically say like any URL
with Schiffman in it or like for example
any URL with github in it let's just be
I'm gonna be a little works but I'm
gonna just also show you like I can say
like I can say like any Schiffman net
page whether it is so one thing I could
do is like this whether it's HTTP or
HTTPS I'm pretty sure this will work so
now this content script will only
execute on those pages so I'm gonna hit
reload uh-oh there's a comma there wait
should be a comma in there
oh no there shouldn't be a comma here
that's the last element of the array so
retry there we go and now if I go to
here whoops refresh still making
everything pink but if I go to the ITP
ima website we can see nothing is now
pink so it's only it's only changing the
it's only running this content script
for those URLs and interesting enough
notice how content scripts is an array
so I can have certain content scripts
for certain URLs and certain kind of
script for other URLs all within the
same extension so this is can become a
much larger project with all sorts of
permutations but this is the very basic
idea okay so what I've shown you so far
is the basic anatomy
have a Chrome extension manifest file if
you want to have a content not all
Chrome extensions need content scripts
but it's a good place to start
content script what URLs that you want
to match what's your JavaScript code
what I haven't done is showing you
anything about how to actually think
about the browsing experience beyond
just the actual web page you're on so
for example what if I want to know when
the user is typing here or what if I
want to know when the user opens a new
tab or what if I want to add a button to
over there over there that I designed
myself that when the user presses that
button it shows them all the it shows
them every time we're the word kitten
appears on the web page by a with a
count or something like a terrible
example so this is what I'm going to do
next and the thing that I need for that
which I will do in the next video is
what's called a background script so a
Chrome extension can have a background
script content script execute for every
web web page that matches the URL after
it's loaded the background script is
actually a thing that runs as soon as
you launch Chrome and it's always there
listening for all of the events of the
things you might be doing in chrome are
you opening a new tab or are you
pressing a button on the interface you
typing in the address bar so this is
going to unlock a lot of other kinds of
possibilities and it's what I will show
you in the next video
[Music]