11.3: Chrome Extensions: Content Scripts - Programming with Text

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]

Channel: The Coding Train

Views: 155,363

Rating: 4.9291205 out of 5

Keywords: JavaScript (Programming Language), live, programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, live stream, itp nyu, class, chrome extensions, chrome add-ons, create chrome extensions, how-to chrome extensions, bookmarklets, chrome bookmarklets, chrome script, chrome google play, cool chrome extensions, google chrome, extension, extensions, chrome, browser, add-ons, addons, how to make a chrome extension

Id: 9Tl3OmwrSaM

Length: 16min 55sec (1015 seconds)

Published: Tue Nov 14 2017

Reddit Comments

[u/SlaynShadow]

As someone who mainly programs in python what do you think I need to look up before getting into this? It looks like I'll need some html, css, js, and json (pretty similar to python) so far. Can you recommend some tutorials that might give me an overview of the languages before I go from developing reddit bots to chrome extensions?

Thanks in advance. :)