Smiski YouTube Thumbnail Takeover — Warmup Project Devlog #3

Overview

Smisk-tube is finished! What started as a simple idea to put random Smiskis on YouTube thumbnails turned into a surprisingly challenging project. I learned a lot about Chrome extensions, JavaScript, DOM manipulation, and debugging dynamic websites.

What I accomplished

Thumbnail Detection: Updated the extension to work with YouTube’s newer thumbnail structure.
Smiski Overlays: Added randomized Smiskis with different sizes and positions.
Dynamic Loading: Made Smiskis appear on newly loaded thumbnails while scrolling.
Popup Controls: Finished the enable/disable button and persistent settings.
Debugging: Spent a lot of time figuring out why the thumbnails weren’t being detected and finally got the extension working.
Chrome Web Store: Completed the store listing, permissions, privacy information, and submitted Smisk-tube for review! 🚀

Final Thoughts

This project was definitely more difficult than I expected for something so simple, but it was a really fun introduction to building something that other people can actually install and use.
Now all that’s left is to wait for Google to review it and then I can ship this!
Project: COMPLETE
Chrome Web Store: Submitted

Until next time :D

Smiski YouTube Thumbnail Takeover — Warmup Project Devlog #2

Overview

I continued working on this small project. Although it looks small, the schematics behind it feel very big for me. There were a lot of ups and downs in this hour, but I think I did what I wanted to accomplish today.

What I accomplished today

• Asset Sourcing & Processing: Downloaded new Smiski images to expand the overlay library. Renamed all source assets following the standardized s_1.png, s_2.png, s_3.png naming convention for easy script referencing.
• Popup UI: Made three new files, popup in .html, .css, .js. Essentially, it makes the popup window for the extension when the user wants to turn the smiskis off or on.
• Storage Integration: Connected the popup button to chrome.storage.local to persist the extension’s enabled/disabled state across browser sessions.
• Real-time Event Handling: Implemented chrome.storage.onChanged inside content.js so YouTube updates dynamically when settings change.
• Local testing: I got to “unpack” what I developed locally on my Chrome browser. When I click on my Smiski icon, I have my popup show up, yay!

Current bugs and frustrations

• Although I have the images named the way I want them to be named, their backgrounds won’t be removed, which is very frustrating. I might have to resort to Pinterest, download their images, and get their backgrounds removed one by one instead of having it in bulk. As of right now tho, those images are uploaded and committed to GitHub as a backup. If anyone knows a way to remove the backgrounds from multiple images at the same time, a comment would help!
• The button text in the popup window won’t change words.
• The smiskis don’t show up on the youtube thumbnails. Maybe I’ll get to that later today.

Next steps!

• Get better photos, I guess.
• Debug popup.js event listeners
• Hopefully finish coding and debugging by tomorrow, getting it on the chrome web store, and shipping it!

Until next time :D

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