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.