Diving into userscripts

Userscripts are something I never really investigated but always intrigued me. Last weekend I decided to finally check out how to make them.

The trigger was the following page:

This nag page has been showing up lately whenever I click on a web link from a YouTube description or comment. Yes YouTube, of course I want to leave the website! It’s the world wide web and I clicked on a link!*

It kind of annoyed me, so I wanted to see if I can get rid of it by writing a user script. Turns out it was pretty easy by checking what existing scripts did and turning it into my own thing. I published my script on Greasy Fork, a website for sharing userscripts. Click here to view my script page.

Installing a user script is as easy as installing the Tamper Monkey extension and then going to Greasy Fork and clicking “install” on a user script. Be sure to check the content of the script first though, as a malicious script could impersonate your session and do bad things on your behalf. Luckily most user scripts are very small and easy to audit manually (that’s rare in software!)

Since it’s easy to include here as well, here’s the full content of the “YouTube outgoing links fix” script as I have it working now:

// ==UserScript==
// @name         YouTube outgoing links fix
// @version      1.0.2
// @description  Replaces outgoing links to avoid the YouTube "are you sure you want to leave" page
// @author       Thomas van der Berg
// @namespace    tmsbrg
// @match        https://www.youtube.com/*
// @grant        none
// @license      GPLv3+
// ==/UserScript==

(function() {
  'use strict';

  // from https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep
  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  async function replaceLinks() {
    await sleep(2000); // bit of a hack: seems we need to wait for YouTube to do its stuff before we act
    let outgoing_links = document.querySelectorAll('a[href^="https://www.youtube.com/redirect"]');
    for (let i = 0; i < outgoing_links.length; i++) {
        let original_destination = outgoing_links[i].href;
        let new_destination = decodeURIComponent(original_destination.split("&").filter(arg => arg.startsWith("q="))[0].substring(2));
        outgoing_links[i].href = new_destination;
        outgoing_links[i].data = null; // remove some YouTube specific stuff that tries to open youtube.com/redirect on click
    }
  }

  window.addEventListener('yt-navigate-finish', replaceLinks );

})();

The trickiest thing for me was figuring how to trigger my code whenever you open a new video, as YouTube doesn’t have a page reload when you click a video. I found in other peoples’ scripts that you can hook into the yt-navigate-finish event, so that’s what I did. Another tip: Since you’re just adding JavaScript to the page, you can test every step using the web console easily to see if it’s working as expected.

The script just goes through every link where the target starts with https://www.youtube.com/redirect, and then replaces it with a direct link to where you want to go. I had some fun checking out some JavaScript programming to build it, as it’s been a while.

I hope the script is useful for some others as well who are annoyed by the new YouTube redirect page. And I encourage you if you’re read up to here: The next time a website you’re using has an annoying feature or you’re missing something, see if you can write a simple userscript to make your life better and publish it. Let’s keep users in control of the web ☺

* Oddly enough, while testing out the page on Chromium for this blog, I couldn’t trigger it. It seems this nag page is only triggering for me on my Firefox. Maybe it’s my settings, but maybe it’s also another way for Google to annoy users to force Chrome on them.