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

In this coding challenge, I create a chrome extension which replaces all image on a page with the picture of a kitten. Code: thecodingtrain...
🎥 Previous video: • Coding Challenge #81.1...
🎥 Next video: • Coding Challenge #83: ...
🎥 All videos: • Coding Challenges
References:
🔤 Programming from A to Z: shiffman.net/a2z
🐱 Kitten Song: / lostghbear-podopleloff...
🌄 Unsplash: unsplash.com/
📚 chrome.extension reference: developer.chro...
Videos:
🔣 Regular Expressions Series: • Session 2: Regular Exp...
🔌 Chrome Extensions Playlist: • Session 11: Chrome Ext...
🔴 Coding Train Live 106: • Coding Train Live 106:...
Related Coding Challenges:
🚂 #83 Chrome Extension with p5.js Sketch - Doodle Chrome Extension: • Coding Challenge #83: ...
🚂 #84 Word Definition Chrome Extension: • Coding Challenge #84: ...
Timestamps:
00:00 Introduction!
01:09 Creating manifest.json
04:00 Loading the extension in Chrome
05:06 Finding all img elements on the page
06:32 Adding all the assets to web_accessible_resources
10:17 Improving the file structure
12:02 Setting the src field to the image of a kitten
15:17 Error! Add folder prefix to file names
16:24 Final Output!
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain....
👾 Share Your Creation! thecodingtrain...
🚩 Suggest Topics: github.com/Cod...
💡 GitHub: github.com/Cod...
💬 Discord: thecodingtrain...
💖 Membership: kzbin.info...
🛒 Store: standard.tv/co...
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/Cod...
This description was auto-generated. If you see a problem, please open an issue: github.com/Cod...
#chromeextensions #bookmarklets #imageswap #javascript

[@DaveTheLesser]

This guy has the most clear ADHD I’ve seen in a coding tutorial and I am living for it cause the way he speaks is exactly how my brain works

[@RealmOfCode]

Not all images are changed, because some images are not loaded into tags. Some of them might get loaded into a div or some container that has a style attribute with the setting: background-image: url() So, you might want to change the code to something like: // I only use 1 image. Also, some sites' images // are lazy-loaded, so I'm using a timeout of a second. // (USE WHATEVER SOLUTION YOU DEEM BEST) window.setTimeout(() => { const imgTags = document.getElementsByTagName('img'); const imgContainers = document.querySelectorAll('[style*="background-image"]'); for (const img of imgTags) { img.src = chrome.extension.getURL(); } for (const container of imgContainers) { const newFilename = chrome.extension.getURL(); container.style.backgroundImage = `url(${ newFilename })`; } }, 1000); The above code has worked for me 100% of times, on every single site I've visited so far ;-)

[@milkdrom3da]

This is awesome. Thanks for sharing!

[@saahirashim3710]

Now instead of images replace the ads with kitten images. A kitten ad block.

[@oskioskioski]

Adblock used to have an option for this, and probably still does.

[@christianjastroff216]

lol

[@codycodes7527]

big brain

[@logy80]

So underrated channel but at least I told my friends about your channel

[@sean9806]

The kittenator : genesis

[@brunomello6305]

Dan, please make a coding challenge of you making a complex game, exploring all concepts about object oriented programming that you've already explained in your youtube videos it would be a little bit hard, but awesome!

[@mistressborpth3838]

This series came at just the right time for the project I'm doing for my art class! Thank you. Will you post a video on how to use the storage API(?)?

[@IvanScriptsEverything]

3:44 loved the reference 😂

[@willcubemakes]

1:39 Someone make this a movie!

[@williamhorn363]

17:05: "KITTENS!" News article: *Police search for woman caught on video abandoning 9 puppies* Him: "oh boy..." LMAO

[@kacperozieblowski3809]

This is sooo useful! Finally i can look at kittens on the internet even if i don't want to!

[@MarcGamesons]

That outro made my day. Thanks.

[@ankitsharma1072]

maybe I should thank my friends, every day, for suggesting this channel...thank you too!!

[@badfitz66]

17:04 "16 Dogs and Puppies Were Brutally Beaten and Buried Alive - Demand Justice Now!" :(((

[@rranon8489]

Excellent tutorial!! Though I wish you used the 'browser' namespace instead of the 'chrome' namespace. 'browser' seems the better choice since you will not be, and should not be, writing an extension that shows support for Chromium-based browsers only.

[@disko.kommando]

You da man! It so nice to see someone that geeks out and gets so excited when code should work like me. It's so exciting for me as well!

[@Deebofreebo]

“Most appropriate kitten” is a pretty awesome title to hold.

[@thomas3754]

Just one thing about your new fancy for loop. I think it doesn't allow you to remove stuff from an array while iterating. It's just for monitoring an array

[@saityavuz76]

1:36 Foreshadowing.

[@Christopher_126]

Small tip for when the code you have isn't working on some pages: Theres another image element called "srcset" that sometimes interferes. Adding a line of "imgElt.srcset = ' ' '' fixes that! :-)

[@samarpandas9519]

You are too good Sir !!

[@rushikeshdarge6115]

Can we reduce or neglect that delay 🔥 image is displayed then replace by our extension, we can see that replacement instead of that simply wherever img src replace before it shown on page can we do? how? Thank you!!!🔥

[@rajeshm1988]

Hi can u please tell me how to make it faster for scrolling because it is changing image to kitten only few starting pics, on scrolling it is not working

[@juschu85]

13:56 This generic stuff is called WebExtensions. And actually, even if your primary target is Chrome, the MDN documentation is a good place to get your information, since it has a browser compatibility chart at the bottom of the page for Chrome, Firefox, Firefox for Android, Edge and Opera.

[@TheCodingTrain]

Yes, thank you! I address this in a future video.

[@juschu85]

Mozilla made a script that gives you basic compatibility between Chrome and Firefox extensions. As I mentioned under another of your videos, Chrome uses the "chrome" namespace and Firefox the "browser" namespace for its API. Also, asynchronous functions in Firefox are returning a promise and in Chrome you have to pass callbacks. With Mozillas script you can code in the way you would do in a Firefox extension and it will still work in Chrome. github.com/mozilla/webextension-polyfill

[@morphman86]

A buddy made a troll extension similar to this a few months back. Instead of specific images, he used Unsplash's random picture function, so that you didn't really know that the image had been replaced. You were just generally confused about the choice of images people had. The extension didn't mention this, it was just some random extension to help out with keeping notes. Important lessons about installing extensions from untrusted sources (i.e. "friends") were learned on that day.

[@moonblazeofriverclan4840]

Where can I get it?

[@morphman86]

@@moonblazeofriverclan4840 you can't

[@phatpropk]

Thank you for the helpful video playlist. I like it

[@thomas3754]

The great and unbeaten handsome picture changer

[@Lelouch0x]

Hello all, I'm here 4 years later. I'm doing manifest version 3 now Funny that this is mentioned in the video saying "someday I'm gonna look up and see version 3.0" 01:33

[@benlawrencemiller1423]

Bring back the circle-packed kittens!

[@chrwahl]

For a HTMLCollection of images -> document.images

[@DanielMuvdi]

Coding source please :) github.com/CodingTrain/Rainbow-Code/tree/master/CodingChallenges

[@rushikeshdarge6115]

After we scroll new images are loaded 🔥 but they are not replace by our extension How to fix that? Thank you!!!!

[@jmjl2]

Put srcset as the url to get all images converted

[@Ikpoppy]

Cool at 0:27

[@emilemil1]

The random expression should use Math.round, not Math.floor, or the last image in the set will only be chosen if Math.random returns exactly 1.

[@emilemil1]

Was too sleepy when I watched this, clearly o.O For some reason I was under the delusion that array.length gave the maximum index.

[@superdepressif6047]

What's better ? for(element of elements) or elements.forEach or for(let i=0;i

[@Naej7]

1/ elements.forEach(element => {}) 2/ for (const element of elements) {} 3/ for (let i=0; i

[@xerotoninz]

you need to replace the css background image

[@100freemoney]

Hello Man ; Thanks for your awesome videos, In fact I need help I want to inject some content to my blog automatically, using chrome extention , but the injected text could not be stored in chrome browser , Could you help me with this please?

[@numero7mojeangering]

If the manifest_version is 7!! i will cry! no really all the time that i see SEVEN all over the place im born in 7 November! and my pseudo is Numero7 x) (it mean Number7, it's in french)

[@neilbae]

version 3 is here :)

[@milkdrom3da]

*is on 3 right now*

[@Slada1]

Is it possible to edit javascript on website using Chrome extension?

[@olfmombach260]

I will actually just take the idea of this and try this Obamaself :proud:

[@beyondcatastrophe_]

I don't think this was supposed to be released... it's still unlisted

[@levinner777]

great tutorial thanks, getting error => *' kitten.js:17 Uncaught TypeError: chrome.extension.getUrl is not a function at kitten.js:17'* ** edit: problem solved by replacing extension to runtime like *chrome.runtime.getUrl*

[@basil_b_vegan]

since version 2 is deprecated, here is what i found works for version 3 { "manifest_version": 3, "name": "", "description": "", "version": "1.0", "web_accessible_resources": [ { "resources": ["images/*.jpeg"], "matches": [""] } ], "content_scripts": [ { "matches": [ "" ], "js": ["content.js"] } ] }

[@emmanuelodih7659]

You are super good, ever since I found out your channel, have been checking in and out, and I love the way you teach it makes me want to learn more, I will be the happiest man on Earth if I can get you email or any social media username, thanks

[@TheCodingTrain]

@shiffman on twitter

[@emmanuelodih7659]

The Coding Train thank you so much

[@Alkalin0]

that woud make a great prank

[@BenJamminKraftbc]

Can someone help me? I am using sublime text 3 and im trying to figure out how to run my code in a broswer. When I currently do so it just displays the code as code not a web application.

[@Amrhossam96]

Ben Jammin Kraft make the file extension .html so it appears as a webpage not a text :)

[@BenJamminKraftbc]

Oh you rock :D One other question though, what if I have several files from github for example and want to test out changes I made to a game... Do I just add .html to the end of the actual folder itself?

[@Amrhossam96]

Ben Jammin Kraft no bro a folder is a folder has no functionality except for being a folder 😂

[@BenJamminKraftbc]

Oh man, im still not able to make it work :(

[@milkyroad9593]

Ben Jammin Kraft Hey, I guess you have a folder from GitHub containing at least .html and .js (javascript) files. Simply try to open the html file in a browser. If it still not works, maybe you can share the link to the content that someone can check the folder structure?

[@thomas3754]

Kittinator

[@angry4rtichoke646]

The KittenExtender!

[@animalaj6419]

someone can help me how to install p5.js in windows

[@AsifMehedi]

There's nothing to install. Dan has other videos where he explains in detail how to set up everything. Please look them up.

[@crisrampante647]

Install? haha

[@Dhakshith1189]

p5js.org/download/ Download, Not Install

[@jonsnowknowsnothing6525]

Which editor do you use?

[@eduardt7253]

He is using Atom

[@ajfilming1978]

Atom

[@thomas3754]

Kittifyer

[@kamilbolka]

Hi, Can you use Atom TeleType on your next steam?

[@TheCodingTrain]

oh, good idea!

[@rajeshm1988]

guys anyone help me out

[@jayanthpsy]

Hello people of the past, I'm from the time where we use manifest_version 77. Chrome extensions now allow to alter the experience of reality. I made a chrome extension similar to that in the video and now all the people I meet are kittens. :)