Posted on November 21, 2024
This week, I wanted to look for an open-source project that I could use on a daily basis and where I could myself contributing a lot to going forward.
Lucky for me, I stumbled upon the ImprovedTube extension and found its GitHub repository, shown below:
code-charity
/
youtube
|
|
/ImprovedTube/ a powerful but lightweight extension,
/ImprovedTube/ is a strong & lightweight extension! - 80 features / the only one of a kind!
A project like this is very important to me, because it enhances the experience of something I do daily - watching videos on YouTube via my desktop. In addition, this project focuses on a topic I was interested in since I started programming: adblocking technology.
The fact that ImprovedTube offers the ability to block ads and its code is open-source, hit all of the right checkmarks for me.
So with my limited amount of web programming knowledge, I decided to take a stab at one of ImprovedTube's open issues that involved blocking ads.
I knew that there must be some great resource for me to read and learn the nitty gritty nuances of building a browser extension for different browsers (e.g., building for Chrome, Firefox, etc.) - but I wanted quickly see how I could add changes to some extension code and have those changes reflect in a browser.
To that end, I decided to follow the tutorial below from freeCodeCamp.
Long story short, this video got me to the point where I could quickly understand how I could edit ImprovedTube's code and have my changes reflect within my browser. Since I intend to work on this repository more going forward, I thought that I should dive deeper into learning the ins and outs of a browser extension, and will probably begin reading Mozilla's Guide on Building a cross-browser extension:
The introduction of the browser extensions API created a uniform landscape for the development of browser extensions. However, there are differences in the API implementations and the scope of coverage among the browsers that use the extensions API (the major ones being Chrome, Edge, Firefox, Opera, and Safari).
developer.mozilla.org
Currently, I'm waiting for some clarification with regards to the proper way of implementing the fix for the original issue. You can find the original issue and my pull request below.
The original issue logged, where I was able to at least reproduce the issue:
Hide "Includes Paid Promotion"
#2634
⚬ PROBLEM: The annoying "Includes Paid Promotion" popup that tells us there is a paid promotion in the video. I can see how that's a legal thing, but is still unwanted bloat. Most YouTube channels always have some kind of affiliate marketing nowadays anyway. We don't really need a reminder of that on every other video.
⚬ SOLUTION:
Create a new feature that gives us the ability to hide that.
⚬ RELEVANCE / SCOPE: YouTube player
My pull request:
feat: add styles to hide 'Includes Paid Promotion' elements
#2684
This pull request attempts to close #2634.
As discussed in #2634, certain videos include a clickable link on top of the video titled, Includes Paid Promotion as shown in the video below:
https://github.com/user-attachments/assets/5a67afbb-2bb1-4991-bf4f-4ad20b29ef76
With the changes made, the extension now hides the HTML elements related to the Includes Paid Promotion link:
https://github.com/user-attachments/assets/d4772053-d1cf-40d5-abe3-0e4b86c61546
Please let me know if there's anything else I should change - I'm happy to learn and fix more issues!
My goal right now as I await further clarification is to read more of Mozilla's documentation regarding building a cross browser extension, in hopes of making it easier for me to contribute to ImprovedTube going forward.
Posted on November 21, 2024
Sign up to receive the latest update from our blog.
