Firefox Addon

I wanted something that would let me quickly and easily download youtube videos from my browser, without using a remote conversion/downloading service. Here is what I’ve come up with so far:

Flask Server

First, I made a Flask server with an endpoint called /download_video, which accepted a querey parameter for the URL of the video I wanted to download. With that URL, I just call trusty Youtube-dl and have the library save the downloaded video to my flask server.

from flask import Flask, request
import os
app = Flask(__name__)

@app.route('/download_video', methods=['GET'])
def download_video():
    dl_url = request.args.get('v_url')
    command = 'youtube-dl {} --write-description --add-metadata -f "bestvideo+bestaudio" -o <DESTINATION>'
    os.system(command.format(dl_url))
    return "completed", 200

 if __name__ == '__main__':
     app.run(host='localhost',debug=True, port=<PORT>, use_reloader=False)

Browser Extension

I'm using Firefox, so that's what I made the extension for. I started by copying an example project from Firefox. They actually have a very useful set of examples here.

const TITLE_DOWNLOAD = "Download Video";
const TITLE = "Downloading...";
const APPLICABLE_PROTOCOLS = ["http:", "https:"];

/*
Does the thing, downloads the video
*/
function downloadVideo(tab) {
    browser.pageAction.setIcon({tabId: tab.id, path: "icons/on.svg"});
    browser.pageAction.setTitle({tabId: tab.id, title: TITLE_DOWNLOAD});
    makeRequest(tab)
}

async function makeRequest(tab) {
    console.log(tab.url)
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        console.log(this.status)
        if (this.status == 200) {
            browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
            browser.pageAction.setTitle({tabId: tab.id, title: TITLE});
        }
    };
    xmlHttp.open("GET", 'http://host/download_video?v_url=' + tab.url, true); // true for asynchronous 
    xmlHttp.send(null);
}

/*
Returns true only if the URL's protocol is in APPLICABLE_PROTOCOLS.
*/
function protocolIsApplicable(url) {
  var anchor =  document.createElement('a');
  anchor.href = url;
  return APPLICABLE_PROTOCOLS.includes(anchor.protocol) && anchor.host.indexOf('youtube.com') > 0;
}

/*
Initialize the page action: set icon and title, then show.
Only operates on tabs whose URL's protocol is applicable.
*/
function initializePageAction(tab) {
  if (protocolIsApplicable(tab.url)) {
    browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
    browser.pageAction.setTitle({tabId: tab.id, title: TITLE});
    browser.pageAction.show(tab.id);
  }
}

/*
When first loaded, initialize the page action for all tabs.
*/
var gettingAllTabs = browser.tabs.query({});
gettingAllTabs.then((tabs) => {
  for (let tab of tabs) {
    initializePageAction(tab);
  }
});

/*
Each time a tab is updated, reset the page action for that tab.
*/
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
  initializePageAction(tab);
});

/*
Download video when the page action is clicked.
*/
browser.pageAction.onClicked.addListener(downloadVideo);

The extension is pretty simple, when I'm on a Youtube page, a button appears in my toolbar. When clicked, it changes state to downloading, and then back again when the task completes on the server.

Concluding

I'm not sure if there's a better way of doing this programatically. I do think I can add some more functionality, namely: editing name and save destination, selecting download quality, showing download progress in the browser. I think most of these things would be better handled if I could somehow do all of the same actions from within the extension. Any questions and comments are welcome.