Cleaned up context menu and made download button in popup work

goodies/chrome-extension/background.js

@@ -1,25 +1,58 @@
-function Queue(info) {
+function QueueDownloadByInfo(info, mode, quality) {
 
     // Select either the current page location, or the target of a href (if the user clicked on one)
-    urlToDownload = typeof(info.linkUrl) != 'undefined' ? info.linkUrl : info.pageUrl;
+    QueueDownload(
+        urlToDownload = typeof(info.linkUrl) != 'undefined' ? info.linkUrl : info.pageUrl,
+        mode,
+        quality
+    ); // <- Defined in queueDwonload.js
 
-    axios.post("http://tub.io/api", {
+    return;
-        request: "queue_download",
-        video_url: urlToDownload,
-        mode: "video",
-        quality: "best"
-      }).then(function(response){
-            console.log("Queued successfully...");
-        }).catch(function(response){
-            console.log("Something went wrong...");
-            console.log(response);
-      });
 }
 
+// Create main context menu entry
 chrome.contextMenus.create({
-    "title" : "Queue in Tubio",
+    title: "Tubio",
-    "contexts": ["all"],
+    contexts:["all"],
-    "type" : "normal",
+    id: "tubio-parent-contextmenu-entry",
-    "onclick" : Queue
 });
 
+// Automate creating a lot of entries
+function CreateContextMenuOption(optionName, callback) {
+    chrome.contextMenus.create({
+        title: optionName,
+        contexts: ["all"],
+        type: "normal",
+        parentId: "tubio-parent-contextmenu-entry",
+        onclick: callback
+    });
+}
+
+// Create all download methods
+CreateContextMenuOption("Download Video - Best", function(info) {
+    QueueDownloadByInfo(info, "video", "best");
+});
+CreateContextMenuOption("Download Video - 1440p", function(info) {
+    QueueDownloadByInfo(info, "video", "1440p");
+});
+CreateContextMenuOption("Download Video - 1080p", function(info) {
+    QueueDownloadByInfo(info, "video", "1080p");
+});
+CreateContextMenuOption("Download Video - 720p", function(info) {
+    QueueDownloadByInfo(info, "video", "720p");
+});
+CreateContextMenuOption("Download Video - 480p", function(info) {
+    QueueDownloadByInfo(info, "video", "480p");
+});
+CreateContextMenuOption("Download Video - 360p", function(info) {
+    QueueDownloadByInfo(info, "video", "360p");
+});
+CreateContextMenuOption("Download Video - 240p", function(info) {
+    QueueDownloadByInfo(info, "video", "240p");
+});
+CreateContextMenuOption("Download Video - 144p", function(info) {
+    QueueDownloadByInfo(info, "video", "144p");
+});
+CreateContextMenuOption("Download Audio", function(info) {
+    QueueDownloadByInfo(info, "audio", "best"); // <- Quality is ignored when downloading audio only 
+});

goodies/chrome-extension/manifest.json

@@ -17,6 +17,8 @@
     "background",
     "contextMenus",
     "webRequest",
+    "windows",
+    "tabs",
     "storage",
     "*://*/*"
   ],
@@ -24,22 +26,8 @@
   "background": {
     "scripts": [
       "lib/axios.js",
+      "queueDownload.js",
       "background.js"
     ]
-  },
+  }
-
-  "content_scripts": [
-    {
-      "run_at": "document_end",
-      "js": [
-        "lib/jquery-3.5.1.min.js",
-        "lib/axios.js"
-      ],
-      "css": [
-      ],
-      "matches": [
-        "*://*/*"
-      ]
-    }
-  ]
 }

goodies/chrome-extension/popup/css/button.css

@@ -17,6 +17,10 @@ button:hover {
     animation-iteration-count: infinite;
 }
 
+button.lock {
+    visibility: hidden;
+}
+
 @keyframes color-cycle {
     0%      {background-color: #ff6666; transform: scale(1.075);}
     16.67%  {background-color: #c966ff;}

goodies/chrome-extension/popup/index.html

@@ -17,18 +17,26 @@
         <div class="bgmask"></div>
 
 
-        <h1 class="text-center pt-1">Tubio</h1>
+        <h1 class="text-center pt-1" style="margin-bottom: 0;">Tubio</h1>
-        <h2 class="text-center">Companion Extension</h2>
+        <h2 class="text-center" style="margin-top: 0; padding-top: 0;">Companion Extension</h2>
 
         <div class="flex justify-content-center">
             <div class="flex flex-col align-items-center">
-                <button >Download!</button>
+                
+                <!-- Download this - button -->
+                <button id="button-download" title="Will download this pages URL as a video of highest quality.">
+                        Download!
+                </button>
                 
                 <label for="tubio-address" style="margin-top: 3em;">Where can i reach tubio?</label>
                 <input type="text" id="tubio-address" class="text-center" />
                 
             </div>
         </div>
-
+        
+        <script src="../lib/jquery-3.5.1.min.js"></script>
+        <script src="../lib/axios.js"></script>
+        <script src="../queueDownload.js"></script>
+        <script src="js/script.js"></script>
     </body>
 </html>

goodies/chrome-extension/popup/js/script.js

@@ -0,0 +1,22 @@
+$("#button-download").click(function() {
+
+    $("#button-download").addClass("lock");
+
+    // Query active tab in active window...
+    chrome.windows.getCurrent(function(w) {
+        chrome.tabs.query({
+            active: true,
+            windowId: w.id
+        }, function(foundTabs) {
+            if (foundTabs.length > 0) {
+                QueueDownload(foundTabs[0].url, "video", "best", function(){
+                    window.close();
+                });
+            } else {
+                console.log("Wtf, this should not happen. You don't have ANY open tab?...");
+            }
+        });
+    });
+
+    return;
+});

goodies/chrome-extension/queueDownload.js

@@ -0,0 +1,21 @@
+function QueueDownload(url, mode, quality, callback) {
+
+    console.log("Queuing '" + url + "'...");
+
+    axios.post("http://tub.io/api", {
+        request: "queue_download",
+        video_url: url,
+        mode: mode,
+        quality: quality
+      }).then(function(response){
+            console.log("Queued successfully...");
+            if (typeof(callback) != 'undefined') callback(true, response);
+            
+        }).catch(function(response){
+            console.log("Something went wrong...");
+            console.log(response);
+            if (typeof(callback) != 'undefined') callback(false, response);
+      });
+
+      return;
+}