Added download feature for Unix, Linux, and MacOS systems using native messaging.

README.md

@@ -1,5 +1,4 @@
 # Better Youtube +
-
 Better YouTube + works to improve the YouTube experience by providing quick access to features we'd all like to have from the get-go.
 <br/>
   * It allows quick thumbnail access of the video.
@@ -8,11 +7,21 @@ Better YouTube + works to improve the YouTube experience by providing quick acce
   * It allows the video to be toggled to fixed or floating with drag functionality.
   * It allows volume control through the mouse-wheel when hovering over the player.
   * It allows for quick access to the YouTube video slug.
+  * It lets Unix, Linux, and MacOS systems the ability to download the video using native app calls.
+
+# Version: 1.3.6
+* Added download feature for Unix, Linux, and MacOS systems using native messaging.
 
 # Download
 https://addons.mozilla.org/en-US/firefox/addon/better-youtube-plus/
 
-# Version: 1.3.5
+# NOTE
-* Added ranged loop feature.
+On *Nix systems download youtube-dl and use provided app in this repo to download videos.
-* Fixed finally floating video issues.
+
-* Removed non-working image onerror signals.
+##### Mac OS/Linux Setup
+To get downloading working do the following:
+
+1. Check that the [file permissions](https://en.wikipedia.org/wiki/File_system_permissions) for "youtube-dl-bridge.py" include the `execute` permission.
+2. Edit the "path" property of "web_video_dl.json" to point to the location of "youtube-dl-bridge.py" on your computer.
+3. copy "web_video_dl.json" to the correct location on your computer. See [App manifest location ](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Native_manifests#Manifest_location) to find the correct location for your OS.
+4. Install the webextension and enjoy!

app/web_video_dl.json

@@ -0,0 +1,7 @@
+{
+  "name": "web_video_dl",
+  "description": "Video downloader using youtube-dl",
+  "path": "/insert/your/path/here/to/youtube-dl-bridge.py",
+  "type": "stdio",
+  "allowed_extensions": [ "webVidDownloader@1itdominator.com", "betterYoutube@itdominator.com" ]
+}

app/youtube-dl-bridge.py

@@ -0,0 +1,23 @@
+#!/usr/bin/env python
+
+import sys
+import json
+import struct
+import subprocess
+
+# Python 2.x version (if sys.stdin.buffer is not defined)
+# Read a message from stdin and decode it.
+def getMessage():
+    rawLength = sys.stdin.read(4)
+    if len(rawLength) == 0:
+        sys.exit(0)
+    messageLength = struct.unpack('@I', rawLength)[0]
+    message = sys.stdin.read(messageLength)
+    return json.loads(message)
+
+while True:
+    receivedMessage = getMessage()
+
+    if receivedMessage:
+        command = "cd ~/Downloads && youtube-dl " + receivedMessage;
+        subprocess.Popen(command, shell=True, stdout=subprocess.PIPE)

src/manifest.json

@@ -1,18 +1,20 @@
 {
   "manifest_version": 2,
   "name": "Better Youtube +",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "Enhancements for Youtube to have a better experience.",
 
   "applications": {
     "gecko": {
-      "id": "betterYoutube@itdominator.com"
+      "id": "betterYoutube@itdominator.com",
+      "strict_min_version": "50.0"
     }
   },
 
   "permissions": [
-    "*://*.youtube.com/*",
+    "nativeMessaging",
-    "tabs"
+    "tabs",
+    "*://*.youtube.com/*"
   ],
 
   "icons": {

src/scripts/background.js

@@ -16,4 +16,11 @@ const handleUpdated = (tabId, changeInfo, tabInfo) => {
     }
 }
 
+const notify = (data) => {
+    let port = browser.runtime.connectNative("web_video_dl");
+    console.log("Downloding: " + data.url);
+    port.postMessage(data.url);
+}
+
+browser.runtime.onMessage.addListener(notify);
 browser.tabs.onUpdated.addListener(handleUpdated);

src/scripts/betterYoutube.js

@@ -12,8 +12,14 @@
                                               ytdVideoIntervalLoop;
     let loopingInterval = false;
     let count = 0;
+    let OSName = "";
 
     const preSetupProc = () => {
+        if (navigator.appVersion.indexOf("Win")!=-1) OSName = "Windows";
+        if (navigator.appVersion.indexOf("Mac")!=-1) OSName = "MacOS";
+        if (navigator.appVersion.indexOf("X11")!=-1) OSName = "UNIX";
+        if (navigator.appVersion.indexOf("Linux")!=-1) OSName ="Linux";
+
         video               = document.getElementsByTagName("video")[0];        // Video Controler
         slugInputTag        = document.createElement("INPUT");
         ytRangeEnd          = document.createElement("INPUT");
@@ -47,12 +53,14 @@
         ytThumbImgMenu    = document.createElement("DIV");
         ytEnhancerMenu    = document.createElement("DIV");
         ytThumbnailBttn   = document.createElement("IMG");
+        ytDownloadBttn    = document.createElement("IMG");
         ytLoopBttn        = document.createElement("IMG");
         ytFloatBttn       = document.createElement("IMG");
         ytMaxDefaultImg   = document.createElement("IMG");
         ytHqDefaultImg    = document.createElement("IMG");
         ytMqDefaultImg    = document.createElement("IMG");
         ytSdDefaultImg    = document.createElement("IMG");
+
         ytAMaxDefaultImg  = document.createElement("A");
         ytAHqDefaultImg   = document.createElement("A");
         ytAMedDefaultImg  = document.createElement("A");
@@ -81,6 +89,14 @@
         ytEnhancerMenu.appendChild(ytLoopBttn);
         ytEnhancerMenu.appendChild(ytRangeSection);
         ytEnhancerMenu.appendChild(ytFloatBttn);
+
+        if (OSName.includes("MacOS") || OSName.includes("UNIX") ||
+                                       OSName.includes("Linux")) {
+            console.log("System supports downloader...");
+            console.log("OS is : " + OSName);
+            ytEnhancerMenu.appendChild(ytDownloadBttn);
+        }
+
         ytRangeSection.append(ytRangeStart);
         ytRangeSection.append(ytRangeEnd);
         document.body.appendChild(poppedContainer);
@@ -100,6 +116,7 @@
         ytThumbnailBttn.addEventListener("click", showThumbImageVew);
         ytLoopBttn.addEventListener("click", setLoop);
         ytFloatBttn.addEventListener("click", toggleFloat);
+        ytDownloadBttn.addEventListener("click", downloadVideo);
         video.addEventListener("wheel", manageVolume);
 
         // Dragable window for floating video
@@ -108,6 +125,7 @@
         ytThumbnailBttn.src = browser.extension.getURL("/icons/thumbnailOff.png");
         ytLoopBttn.src      = browser.extension.getURL("/icons/loopFalse.png");
         ytFloatBttn.src     = browser.extension.getURL("/icons/floatPlayer.png");
+        ytDownloadBttn.src  = browser.extension.getURL("/icons/downloadVid.png");
 
         // Set trget of Thumbnails of video
         ytAMaxDefaultImg.target       = "_blank";
@@ -125,6 +143,7 @@
         ytThumbnailBttn.className     = "imageStyle";
         ytLoopBttn.className          = "imageStyle";
         ytFloatBttn.className         = "imageStyle";
+        ytDownloadBttn.className      = "imageStyle";
         ytEnhancerMenu.id             = "enhancerMenuIDRef";
         poppedContainer.id            = "draggable";
         ytRangeStart.id               = "rangeStartID";
@@ -140,6 +159,10 @@
     }
 
     // Functions
+    const downloadVideo = () => {
+        browser.runtime.sendMessage( { "url": video.baseURI } );
+    }
+
     const showThumbImageVew = (e) => {
         videoSlug = video.baseURI.slice(32, 32+11);  // Used for setting up thumbnails