Bug Fixes

I fixed another bug with the stop hover effects feature that used to show the effect if you hovered over the title of the video.

Blur Slider

I added a blur slider so people can adjust the amount of thumbnail blur.

Feedback

I incorporated the better readme feedback from the first ship where many people said I should explain why each feature is added.

Sry for the camera photo I just reinstalled linux.

Custom themes fixes

I fixed some parts of the website that were not changing colors.

I should have thought of this earlier but its going to be such a pain to keep the themes feature up to date with youtubes ui hence I am going to mark it as an experimental feature until I figure out how to change the themes in a better way.

Playback speed controls without premium

I am super happy with how this feature turned out it looks exactly like youtubes ui.

Whole lotta bugs

I thought I was done with everything but I found so many bugs. The shorts blocker was broken, the blocking youtube games dint work, and there was a bug where the video you were watching just stopped playing when you went into full screen.

Shorts and game blocker

So first the shorts bug would just delete the whole fyp if it found a short. This was was quite an easy fix since I just had to change what got deleted.

Next the youtube games blocker was searching for text with “youtube games” which I changed to work the same way as the shorts blocker and then it started working properly.

Full screen bug

I fixed the full screen bug by only stopping the effects on objects we know are video tiles and nothing else.

Themes

Finally I also started working on a themes feature which looks so cool!! but its such a pain to work on. Theres so many tiny things I need to sit and edit so it looks right.

Made the final commit before shipping

Soo now the hide shorts feature works without bugs and I also finished adding the hide merch store feature. Now I just need to figure out how to publish my extension to the firefox and chrome store.
Oh I also made a readme.

View count and Publish date

I moved the view count and publish dates to be next to the like button instead of the stupid tiny text it was before. To do this I made a new file called videometa.js it uses two functions one to extract the abbreviated views/ publish date and another one to extract the full views/ publish date which shows up when you hover over the information.

Additionally I also fixed some Issues with the stop autoplay on hover and stop effects on hover functions, which I merged into one function earlier.

Finished the time tracking feature!!!

I haven’t gotten any time to update the project since my summer break ended. But I finally got some time to work on the project

because of the time constraints I used AI to write code for this feature :( Im not proud of it but at least the feature works with no dumb bugs (for now at least)

Daily limit

So I added a daily limit and a bed time cut off so people dont waste the whole day on YouTube. I also added a snooze feature that appears when the YouTube limit has been reached since I often need YouTube for school work and it would become an issue if there was no way to bypass the limit.

Time counter badge

The concept time counter I made in a previous devlog works now and changes colors based on how much of the daily limit you have used.

Stats

And finally I also added a stats feature for fun since I love looking at my stats on leech block and wanted something similar for this project.

Everything is such a mess right now

I’m working on so many features at once its getting to much too handle. And I dint even make separate branches or make commits per feature so its getting so messy .

I’m working on

1. Refactoring all the code to change the deleting
   elements code to use css instead of JS so it has better performance hopefully.
2. A time tracking feature.
3. Moving the view count and date of upload up to the like button. This feature has had so many random unexpected issues its pmo.
4. hiding the annoying red little bar below videos on the homescreen.

some good progress: I merged the stopAutoPlayOnHover and stopHoverEffects into one function and I also fixed all the bugs with the function such as it not working on pages other then the homepage.

Next time I should work on things in order AND AT LEAST MAKE BRANCHES ALSO MY COMMITS RN ARE HUGE I SHOULD MAKE THEM SMALLER; ONE FOR EACH FEATURE.

Fixed Blur Again

Instead of sitting and excluding things from the thumbnail blur I
changed the code to only blur thumbnails. This is so stupid idk how I came up with that nonsense earlier.

Stopped auto play when you hover over videos

This feature works along with the other hover feature to make you a
little more mindful while choosing a video to watch.

Time tracking

Im working on a whole new set of features to actually add something new
for once since this project has just been removing stuff till now.

The feature will track your time on youtube and allow you to set
limits so you don’t waste your whole day on youtube.
The feature will look something like the image. The current image is just a mock up.

Initial setup

For this project I choose to use Go along with bubble tea and lipgloss. For the initial setup. I did not understand a single thing about how bubble tea works so I used the official tutorial while changing aspects of it to make it suit my project.

I created the main program loop along with some variables and a text input field.

Bugs

The hide notification toggle worked visually but if you clicked in that spot the panel still opened so for now I came up with a temporary fix of using a new function to stop the button form working. Also the thumbnail blur still has issues 😭 . For some reason it blurs emojis now. I will fix that later.

New Feature

I added a feature so when you hover on video you don’t get that distracting ambient color around the thumbnail. This helps because the glow acts like a tiny visual reward before you’ve actually decided anything; it makes a thumbnail feel “chosen” the moment you hover over it. Without that glow, your judgement has to do the work the color was doing for them; so you can be a little more mindful about what you click on.

Popup ui

Added a background, added the logo, aligned all the elements, and tested out a few fonts before finally choosing Geist. I used this Article to understand css.

First time features actually work as intended!!

The blur had a lot of bugs as mentioned in the first devlog I slowly managed to fix all of them in different ways and now its complete. The hardest issue was if you scrolled too fast then you would still get a glimpse of the thumbnail. I fixed this by creating a <style> element which applies the blur before the thumbnails load. So now there’s no need of a mutation or scroll observer either.

Logo

I created the logo for this project using free form on my ipad then I used claude to make different versions of it for all the resolutions (16,32,48,128) and for the project banner.

New Features

I added two new features to hide the create button and the notifications button because who ever clicks those. At first I made to separate functions for this but that was really stupid so then I made a generic function that just removes any element.
Also I used el.style.display = hidden instead of el.remove since the element can instantly be unhidden if the user wants without needing a refresh.

Major Progress

Okay so a lot happened since the last devlog. I paused my progress on the auto play feature and instead moved on to some small changes. I also made a lot of random commits for testing small things which was kinda tedious to revert later (Image shows the graph after all the random stuff was removed).

Hide Shorts

This feature was pretty simple to implement as I just used querySelectorAll to select the elements with the youtube shorts buttons then I just checked for the text “shorts” so the function doesn’t accidentally delete something else. Finally I used element.remove() to delete the buttons. Also added a mutation observer so the button stays deleted.

Hiding unnecessary buttons

I basically just did the same thing as above to hide other buttons that clutter up the screen like the create button and the voice search button.

Branches

This is the first time I learnt how to properly use branches in git. I made two separate branches for the two features I worked on so the variable names are not an issue for now.

Improving file structure

First off I fixed the mess of files that were just dropped into the project folder; this would become an issue in the future as I kept on creating new files.

Creating the popup

I stared off by creating popup.html popup.css and popup.js
files after which I went back to the manifest.json to link the popup files but here I realized that the whole JSON file was broken because all the items were inside "action" this had not caused any issues so far but it could have led to many problems in the future. After fixing the JSON file I linked the popup files and added storage and scripting permissions to the extension which will be needed later.

Next I read a blog post of how to write HTML. Then I created a toggle switch for which I borrowed copied the css from w3schools.

Now for the toggle switch to work I had to make a few changes to youtweaks.js . Now it checks the browser storage to see if thumbnail blur is toggled on/off and also continuous checks to see if the toggle switch has been changed which accordingly turns on/off the blur.

Other changes

I started working on the next feature to stop the auto play of videos when you hover over them as the only purpose of this is to get you hooked onto a video before you even click on it. Which often results in wasted time.

While working on that feature I also managed to fix the blur so now it works everywhere on youtube but as a side effect it also blurs youtubers profile pictures which ill fix later.

Fixing the three issues:

I first implemented a mutation observer which reapplies the blur every time something on the page changes, this solved issues 1 and 3 but did so in a very sloppy way as a “mutation” was only detected when you hover the mouse on a thumbnail. To fix the problems in a more optimal way I tried a lot of things: I started learning about intersection observers, scroll observers, and started a 3 hour crash course on js to understand what in the world I was doing. I spent a lot of time tinkering and then my problem was solved with a simple search on Mozilla’s developer docs. I used a scroll event listener which fixed the scrolling issue but the other issues still remain. At this point I was so tired I started setting up the gui for the extension which involved making some changes to the manifest.json file.

So the aim of this project is to improve youtube’s usage experience through small tweaks.

This is my first time doing anything related to websites I know nothing 😭

So I started off the project by creating a manifest.json file which contains all the data required to run the extension. For this the Mozilla docs were a huge help.

Next, I started by creating the first feature of blurring thumbnails. I somehow managed to inspect element the youtube website and select the correct element id to select the thumbnails ig. But this came with three issues:

1. The blur stops working after a refresh
2. The blur only works on the home page
3. The blur stops working after scrolling a lot

To fix these Issues I first searched for the issue on w3schools but I dint understand anything I found; so after a bit more digging I came across someone facing a similar issue on stack overflow and after a very long while of trying to understand his code I managed to modify it to work for my extension. This fixed the third issue but not the other 2.