HTML Injection - button for "Zen"

[shakeelmohamed]

Add something that injects an image link to the current video's zen audio player link, ie: https://youtube.com/watch?v=123 -> https://zen-audio-player.github.io?v=123

We can do this both on individual video pages, in playlist views - then search results afterwards

[shakeelmohamed]

Work in progress, the following button "should" work since the JavaScript works in the console but it doesn't seem to fire onClick - YouTube may be blocking it somehow...

<button id="zap" onclick="function getParameterByName(url, name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'),
        results = regex.exec(url);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
function parseYoutubeVideoID(url) {
    var videoID;

    var shortUrlDomain = 'youtu.be';
    var longUrlDomain = 'youtube.com';

    if (url && url.length > 0) {
        // youtube.com format
        if (url.indexOf(longUrlDomain) !== -1) {
            videoID = getParameterByName(url, 'v');
            // If the URL had 2 v parameters, try parsing the second (usually when ?v=someurl&v=xyz)
            if (videoID === '') {
                videoID = getParameterByName(window.location.href.substring(window.location.href.indexOf(url)), 'v');
            }
        }
        // youtu.be format
        else if (url.indexOf(shortUrlDomain) !== -1) {
            var endPosition = url.indexOf('?') === -1 ? url.length : url.indexOf('?');
            var offset = url.indexOf(shortUrlDomain) + shortUrlDomain.length + 1; // Skip over the slash also
            videoID = url.substring(offset, endPosition);
        }
        // Assume YouTube video ID string
        else {
            videoID = url;
        }

        var slashPos = videoID.indexOf('/');
        // We found a slash in the video ID (ex: real id is ABC123, but saw ABC123/zen)
        // So, only keep what's before the slash
        // if (slashPos !== -1) {
        //     videoID = videoID.substring(0, slashPos);
        // }

        currentVideoID = videoID;

        return videoID;
    }
    errorMessage.show('Failed to parse the video ID.');
}
function getCurrentVideoID() {
    var v = getParameterByName(window.location.search, 'v');
    if (v.length > 0) {
        return parseYoutubeVideoID(v);
    }
    console.log(v);
    return v;
}
getCurrentVideoID();">ZAP</button>

[shakeelmohamed]

The following works! Now, how can we inject this on YouTube URLs? content scripts might be the answer

<input id="zap" onclick="window.location.href = 'https://zenplayer.audio/?v=' + window.location.href;" type="button" value="Listen on Zen Audio Player">