Рет қаралды 48,443
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