Smiski YouTube Thumbnail takeover - warm-up project devlog #1

To ease back into coding, I wanted to do something fun and kind of laid-back. I’ve always lacked motivation and creativity when it came to coding projects, so maybe if I scrolled through youtube videos of random stuff, maybe I’ll get some inspiration.

I’m a big Jschlatt fan, and in one of his older videos, one of his fans made a youtube extension where Jschlatt’s cat, Jambo, would become the thumbnail of every youtube video. I thought that was pretty cool and funny, so I took inspo from that and did that with Smiskis, funny green figures that have monotone face expressions and do random poses.

But anyway, here is what I got done today!

• Extension architecture: Set up Chrome manifest V3 in my manifest.json and configured the permissions to inject content scripts specifically into YouTube URLs. It will only work on YouTube thumbnails
• DOM Manipulation: Built a JS content script (content.js) that targets YouTube thumbnail containers (ytd-thumbnail) when the user scrolls on the YT page
• Randomized spawning logic: If the Smiskis are the same image, in the same position, and the same size, that’s lowkey boring. In this script, Smiskis are chosen randomly via a random number generator, and more random number generators are called to determine the positioning on each thumbnail and the Smiski’s size.
• Infinite scroll handling: Integrated a MutationObserver to watch the DOM and its continuous updates, ensuring new thumbnails get a Smiski when you scroll down
• Git setup: Made a git repo, cloned it into VS Code, broke it, made it again, committed and pushed any changes made

Next steps:

• I need to actually add the images into my folders; there is no known website where you can just get Smiski images with no extra text. So, scrolling through wiki pages I go!
• VS Code gave me a random error that I’m missing a comma, but I can’t find the error, so I’ll have to go hunting for that discrepancy on my next day of coding.
• I need to launch this project onto the Google Web Store
• Add a popup toggle switch so users can switch the extension off and on without having to disable the extension entirely
• Update the README; I hate making READMEs.

That’s all I got for today!! Until next time :D