Ensuring Maximum Quality on YouTube: Crafting a Chrome Extension

If you’re anything like me, you love diving into YouTube content. But have you ever been left wondering why a video isn’t playing in its best quality, even when your internet connection is blazing fast? This led me on a journey to create a Chrome extension ensuring I always watch YouTube videos in the highest quality available.

Why I Did It

The main driver was sheer frustration. Sometimes, for reasons unbeknownst to me, YouTube decides I should watch a video in 480p or 720p, even when 1080p or 4K is available. Sure, I can manually adjust the quality, but why not automate the process?.

The Solution: A Chrome Extension

I set out to craft a Chrome extension that automatically selects the highest available quality when I watch a YouTube video. For those code enthusiasts, I’ve uploaded it on GitHub. I know there should be a lot of extensions to do this, instead i tried myself this time, i always wanted to know the process to create an extension, and luckily it’s pretty easy!.

Breaking Down the Code

At the heart of the extension is a content.js file that runs every time you visit YouTube. Here's a breakdown:

1. Event Listener for Navigation:

document.addEventListener('yt-navigate-finish', function (event) {
    if (location.pathname === '/watch') {
        runObserverIfExtensionEnabled();
    }
});

• We’re setting up an event listener for when YouTube finishes loading, using the yt-navigate-finish event. This is crucial since YouTube uses a "Single Page Application" technique.
• We then check if we’re on a video page and proceed if true.

1. Observer Configuration:

var config = {
    childList: true,
    attributes: true,
    subtree: true,
    characterData: true
};

• This configuration dictates what changes our observer should listen for on the page.

1. Initiating the Observer:

function initiateObserverAndObserve() {
    var observer = new MutationObserver(function (mutations) {
        ...
    });
    observer.observe(document.body, config);
}

• We set up a MutationObserver which waits for changes on the page, allowing us to detect when YouTube's video controls are available.

1. Selecting the Quality:

function selectPreferredQuality() {
    ...
    var settingsButton = document.getElementsByClassName('ytp-settings-button')[0];
    settingsButton.click();
    ...
    targetItem.click();
}

• Once the video controls are available, we simulate a click on the settings button and then select the first quality option, which should be the highest quality.

How to Add Extensions to Chrome from a Desktop Folder

1. Open Chrome and navigate to chrome://extensions/.
2. Enable “Developer mode” by toggling the switch at the top right.
3. Click on “Load unpacked” and select the folder containing your extension files from your desktop.
4. Your extension should now be added to Chrome and active!

Conclusion

Crafting this extension was an enlightening journey. It provided deeper insights into Chrome extensions and interacting with intricate websites like YouTube. If you’ve ever been irked by YouTube’s video quality, give this extension a whirl!

Feel free to adapt and expand upon this story as per your experiences and needs. I hope this helps you share your project with the world!