Coding Challenge #82: Image Chrome Extension: The Ex-Kitten-sion!

I sorry I've I get lost in this beautiful kittens eyes so I'm gonna do a coding challenge right now and the coding challenge is the kitten eyes or chrome extension kit narrator kitten extension kitten Chrome extension chrome kitnik add up I know what to call it somebody give me a name we'll put it in the first comment I'll pin it but I'm going to make a Chrome extension that replaces any image on any website that you're on with an image of a kitten I'm gonna do it in a really simple basic way I made earlier today a bunch of tutorials about Chrome extensions I might suggest you go and watch those for more depth but I'm gonna still do this from no code at all the only thing I'm going to start with is these five kitten images and they all come from unsplash.com which is a website with free images these are the images that I have randomly picked for this coding challenge and as a challenge to you after I make this if it's successful you might think about making a version of this that pulls the images dynamically from unsplash or uses something besides kittens or tries to replace the image with the most appropriate kitten that matches what the imager usually was I don't know use your imagination but let's get started so the first thing I need for a Chrome extension is what it is a file called manifest.json okay so what do I need in the manifest.json I need to say I need to have all the configuration stuff for my Chrome extension manifest version 2 which is the version of Chrome extension whatever that I'm making someday I'm gonna look up what this means but I think it used to put one but now you have to use two maybe someday you'll put three I don't know could you imagine a world in a world where the manifest version is number seven then I'm going to X kittens John X kitten shouldn't thank you that's a good good one okay Chrome kittens okay now I'm gonna say name X extension and then X kit tension I think like that X kitten Chrome X kitten chin that's is not so great but we'll keep this for right now Bo version everybody knows what version this is right right now say it with me 1 2 3 did you say point well I'm yeah that's what I said I don't know whatever doesn't matter and I think I should put that in quotes who knows and then I'm making a Content script so what I need to do is have a Content script and it's content scripts because I could have multiple ones so I'm just gonna have one if you don't know what a Content script is you could go look at my previous tutorials which I will link to in the description and my content script this is going to be for see how do I do this this is hard to talk and think and type at the same time all URLs so I want you might someday want to make a Chrome extension that only replaces kittens on particular websites only places images with kitten but I'm gonna do it for all URLs and then I need to have a JavaScript file where I'm gonna have all my code I think I say J s and then I could have multiple JavaScript files but I'm just gonna have one I'm gonna call it content J yes although you know what no I'm not no not I'm gonna call getting getting done is okay now here's the thing let's just first make sure this works I got to deal with the images that's one thing I didn't do in my tutorials I probably got some syntax wrong here because I never get it right but I'm at least going to now make a new file which is called kitten j/s and I'm going to just in that say console dot log kittens of the world unite as one okay so I will lease now I'm gonna have a Chrome extension that when I go to any web page I will see this in the JavaScript console that's our first step and again if you want some of the details about how this is working go back and watch my I'm gonna stop saying that so now how do I install this I've got to be in Chrome at the URL chrome colon slash slash extensions I've got to have developer mode enabled and then I can say load unpacked extension I can go and find wherever that was was on my desktop under Chrome extension zero three kittens so I'm gonna select that and it didn't get any errors so if I had made it a syntax error in manifest.json stuff would show up here and then it's enabled I'm gonna just turn off this other extension that's fine I'll leave it on and now I'm gonna go to a web page like what's a good web page we want to replace all the images with kittens I'm afraid to go to a news website although it will be nice to replace everything on the news website with images of kittens let me just go to go to the ITP website for right now just to just to see okay whoa oh this is something else this has nothing to do with me and we can see that this extension is working because kittens of the world unite as one there we go so my extension is working on the next thing I need to do is I need to figure out from my content script I need to look at the content and find all of the image elements on the page now there's probably a variety of ways that you can have an image but let's actually just play with this here for a second let's use the console to kind of like mess around to understand what we want to do so if I say images equal document get elements by tag name IMG hmm Oh images right so we got a bunch there's a whole bunch of images so that's good and we can see images has a property called source I believe somewhere in your boy there's a lot of stuff yes it's an attribute source and you can see that's the source of the image some are at Tisch gift a preset dot square JPEG so what I want to do is look at all these images find that source property and replace what's in there with a URL to an image of a kitten now I'm not just any kitten the kittens that I happen to have as part of my extension of course they could be URLs to other places but I have these particular now I know I could probably load these in like an array but what I'm gonna do is let me just first let's this is gonna there's gonna be a little tedious go make yourself a cup of tea or something for a second there we go okay so now I've got the images here's the thing files inside just like in manifest.json I have to say ah I want this javascript file to be part of my content script I always also have to say I don't remember what there's somebody in the chat correct me it's something like web accessible resources is that right somebody will correct me alright just I have the file names here - thank you very much that would have been more efficient breaking news somebody I'll have that sound effect okay so I think what I can do now is just let's do something fancy I'm gonna do something fancy just for fun for no reason I'm gonna copy this into here I'm gonna do the fine I'm gonna get rid of all those slash slash space then I'm gonna do I'm gonna use a little regular expression I'll show you I'm - I'm going to do beginning of a line dot star question mark end of line this is a regular expression to find all of these things then I'm going to replace and I just want to do it I'm gonna replace it with and do I need to capture I need to capture this you don't know about regular expressions might I offer you to my regular expressions tutorial that would pop up right here except there's no way for me to do that unless some magic post-production thing happens I'm gonna replace this is really ridiculous that I'm doing this with quote dollar sign one end quote comma a place off boom now I haven't arrived now have it formatted to go into an array oh it needs to be double quotes for JSON that's fine uh so find a single quote replace it with a double quote there we go so now I have the web accessible resources and maybe somebody has told me I am being told breaking news that is correct alright so web accessible resources so now these images are available to me as part of my Chrome extension so what I want to do if somebody by the way is watching this video could find me a good just like maybe in the in the patron group in the slack channel maybe you could post some links to some websites that might be good to run this on that have nothing to upsetting or embarrassing on them it's all order I know with the internet family-friendly coding show here every so now what I want to do is I lost my train of thought I want to do this in the Chrome extension itself now remember a content script and let's say let's say file names and I can get this from that you know there's probably an automatic way of doing this but I am very prone to doing things in silly manual ways so I have an array now with all those file names and I'm going to ask for all of the image elements then then I'm going I know I'm using double quotes and single quotes in the same page don't everybody freak out all at once let's live with it let's come on we can do it double quotes and single quotes can be in the same page and everything will be okay all right now let me say my new favorite thing which is this fancy four loop thing that I learned about recently for image element of images I want to say I'm just gonna actually console.log image element SRC let's just do that so I just want to see the Chrome extension on any page that I'm on give me a list of and I'm just gonna check the shot here for a second web accessible resources should be on the top level of the manifest also put them on a folder and just do so these are great suggestions from should thank you so let's make some improvements here silly me so first of all this is not necessarily specific to the content script this is a top-level thing for the manifest thank you for that correction and there's no reason for me to do this when I can just say star dot jpg so this should be better so any images and by the way it would make more sense as I'm being told to make a folder called kittens and that way this is cleaning this up a little bit all of this goes in here then can say kittens / so how am i doing think I'm in better shape let's reload the Chrome extension and see what happens I'm going to go back to here and hit reload right anytime you make changes in your chrome X get insertion hit reload hit refresh and I could see this is some nonsense that's happening nothing to it and I can see look here are all of the images that are on this page now the question is to do the there's gonna be a sizing thing that we have to deal with at some point but I'm not gonna worry about that okay example page image J nih.gov slash Docs okay hold on let me find this I really need a good way of getting stuff from the slack chat into here can you give me a Google search Reuben to find that page okay so now what I'm going to do is I'm going to I think we're kind of so all I actually need to do is I want to say let R equal math dot random times images Oh filenames dot length math.floor so I don't have not in p5 so I've got to do this with native JavaScript I want to get a random index and I could do this all sorts of other fancier ways I'm sure but I want to get a random math dot random gives me a number between zero and one multiply it by the length of the array take off the decimal place and if I have ten images I'm getting a number randomly at zero through nine and then I want to say let source equal file names are and then I also need to do let URL so here's the thing I can't just say image alt equals image alt dot source equals source so here's the thing about a Chrome extension these files like where do they live they're part of the Chrome extension the source the source attribute of an image element on a web page has to point to a actual valid path and those chrome extension paths I live probably they're like a weird thing that we don't know it is fortunately for us the Chrome extension API so let's actually try to look up where this is Chrome extension Chrome extension Chrome what am i Chrome extension get URL image or something so I want to find it in the documentation ah extension dot get URL so this is what I want I want to say browser is this right I thought it was Chrome extension oh is this like am I in the ah well this is like a generic thing even higher level than this is just like a browser interestingly enough a lot of the stuff that's part of Chrome extensions while part of the chrome API is modeled off of this more generic somebody will know more about this than I do okay so I'm looking for this in chrome Chrome extension I just want to find the page get URL here we go this is what I'm looking for this is the API this is what I want so this is the documentation page on include some of these links in the video this is a Chrome extension this is part of the API and I won't get URL get URL gives you the URL of a path that's part of your Chrome extension so I should be able to say equals Chrome extension dot get URL source and let's call this file source is sort of the wrong thing and just because I'm curious let's actually do this to put it in a variable and then set that to URL and I just want a console.log that URL so here we go I think we're actually pretty good I think this is done we just need to find some better web pages to run this on oh I need to reload the Chrome extension I didn't work at all let's look at the console hmm Dan 9 load um what resources must be listed in the web accessible resources manifest key in order to be loaded by pages outside the extension yeah yeah web accessible resources hmm oh wait a sec oh no oh oh I know what the problem is I put everything in a kitten's folder and then in my extension I forgot to say they all have to have the kittens folder prefix okay here we go again here we go again I have to reload let's find a better web page let's let's just be bold and go to the New York Times and let's see if we can replace the image is on the New York Times with kittens kittens kittens kittens kittens all right so we can see here there's some work to be done here oops let's just let's browse the web now NASA seems like a website that I might enjoy going to look at oh look and look at this NASA website what's happening in NASA these days but actually I like the fact that when I google image search for something like puppies it's all kittens look kittens oh boy kittens puppies but that's a kitten so even if I search for unicorns it's all kittens and I could go to the unicorn Wikipedia page and it is a so interestingly enough not all images get replaced let's so New York Times for example I bet you load some images through JavaScript in a different way let's inspect this element here it is I don't know why so I'd have to investigate you know there's this looks like source it's like a thumbnail that it's actually looking at maybe over the image so there's all sorts of complexity with how different web pages work so we don't have to Wikipedia is not a good example of this let me think of one more let's just go to a Schiffman net there we go this is nice so thank you that you've got to definitely do quite a bit more to make this the robust kitten eyes or her Chrome extension that I always hoped it would be so let me give you some exercises if you want to follow along with its coding challenge think about other things that you might replace on a webpage how you might replace text how you might replace images how you might play sounds there's all sorts of possibilities there find a different set of images maybe you could actually use the unsplash API to dynamically pull different images I will post the code to this you will find a link to the github repository where this code exists in the video's description and in the next coding challenge i'ma do something very similar but instead of replacing with images may be able to leave the kitten thing here I'm gonna make a Chrome extension that I can draw over the page thank you for watching [Music] you

Channel: The Coding Train

Views: 38,125

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, image replacer, image swap

Id: 8zMMOdI5SOk

Length: 18min 59sec (1139 seconds)

Published: Thu Nov 16 2017