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.

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.