Youtils
23/10/2023
Svelte
Chrome Extension
YouTube has been recommending me very random videos lately, ranging from gaming videos in a language I don’t speak to advertisement videos from car dealerships about their new model they just got in. But they did all have one thing in common: the low view count; all the videos had under 100 views. I suspect the YouTube algorithm is trying to push smaller creators, but personally, I’m not interested. So, being a programmer and all, I decided to do something about it.
Extending
While I’ve made Chrome extensions before (very basic ones at that), I’ve never made one with a JavaScript framework, like Svelte. I’ve been liking Svelte a lot recently (this site is even made with it), so I decided to try and see if it was possible. And just for good measure, I decided to throw in Tailwind CSS as well.
First I made this function which parses a view count string as found on YouTube and returns it as a number.
function parseViewCount(viewCount: string): number {
const viewCountRegex = /([d.]+)s*([MK]*)s*view/gi;
const match = viewCountRegex.exec(viewCount);
if (match) {
const count = parseFloat(match[1]);
const match2 = match[2].toUpperCase();
const multiplier = match2 === 'M' ? 1000000 : match2 === 'K' ? 1000 : 1;
return Math.floor(count * multiplier);
}
return 0;
}
Example usage:
parseViewCount('2M views'); // 2000000
parseViewCount('427K views'); // 427000
parseViewCount('100 views'); // 100
Then we need to find all the actual video cards like this:
const videos = document.querySelectorAll('ytd-compact-video-renderer');
After that, we loop over every video and check its view count to make sure it’s over our minimum; otherwise, remove it.
const minViews = 1000;
videos.forEach((video: HTMLElement) => {
// Select the "... views" span element.
const viewCountElement = video.querySelector(
'#dismissible .details .metadata a .secondary-metadata #metadata #metadata-line span'
) as HTMLSpanElement;
if (!viewCountElement) return;
const viewCount = parseViewCount(viewCountElement.innerText);
if (viewCount < minViews) {
video.remove();
}
});
User interface
Obviously, I could hardcode the minimum views, but that wouldn’t be very user-friendly. Plus, there are cases where you’d want to turn off the minimum, so a user interface was necessary.
As stated previously, I wanted to try and use Svelte for this extension as I really enjoy it. For the initial design, I came up with this:
I also added toasts to notify the user of saves or errors.
Great! It is all working now and already very nice on YouTube. But there are a couple of other things that I dislike about YouTube, so why not handle them too?
These are the things I decided to tweak:
- Hiding YouTube shorts
- Hiding Livestreams
- Hiding Livestream recordings
Now these tweaks are very similar to the original video hiding so I won’t go into detail here.
Wrapping up
In conclusion, I successfully took control of my YouTube experience. If you’d like to view the code, or instructions on how to use it yourself, check out the GitHub repository