reimagine browser extension, simple download button

browser_extension/extension/background.js

@@ -72,23 +72,27 @@ function forwardRequest(payload) {
 
 }
 
-
 // listen for messages
 browserType.runtime.onMessage.addListener(
     function(request, sender, sendResponse) {
         console.log("responding from background.js listener");
         console.log(JSON.stringify(request));
-        if (request.download) {
-            console.log("found new download task");
+
+        if (request.youtube) {
+            browserType.storage.local.set(request, function() {
+                console.log("Stored history: " + JSON.stringify(request));
+            });
+        } else if (request.download) {
             let payload = {
                 "data": [
                     {
-                        "youtube_id": request.download["videoId"],
+                        "youtube_id": request.download["url"],
                         "status": "pending",
                     }
                 ]
             }
+            console.log(payload);
             forwardRequest(payload);
-        };
+        }
     }
 );

browser_extension/extension/index.html

@@ -20,6 +20,10 @@
             height: 1px;
             color: white;
             background-color: white;
+            margin: 10px 0;
+        }
+        #download {
+            text-align: center
         }
         .login-form {
             display: grid;
@@ -58,13 +62,14 @@
     <div class="container">
         <img src="/images/logo.svg" alt="ta-logo">
         <hr>
+        <div id="download"></div>
         <form class="login-form">
             <label for="url">Tube Archivist Url:</label>
             <input type="text" id="url" name="url">
             <label for="port">Tube Archivist Port:</label>
             <input type="text" id="port" name="port">
             <label for="api-key">API key:</label>
-            <input type="text" id="api-key" name="api-key">
+            <input type="password" id="api-key" name="api-key">
         </form>
         <div class="submit">
             <button onclick="storeLogin()" id="save-login">Save</button>

browser_extension/extension/manifest.json

@@ -11,11 +11,12 @@
         "default_popup": "index.html"
     },
     "permissions": [
-        "storage"
+        "storage",
+        "tabs"
     ],
     "content_scripts": [
         {
-            "matches": ["https://www.youtube.com/results*"],
+            "matches": ["https://www.youtube.com/*"],
             "js": ["script.js"]
         }
     ],

browser_extension/extension/popup.js

@@ -60,4 +60,34 @@ document.addEventListener("DOMContentLoaded", async () => {
         onGot(result)
     });
 
+    browserType.storage.local.get("youtube", function(result) {
+        downlodButton(result);
     })
+
+})
+
+function downlodButton(result) {
+    console.log("running build dl button");
+    let download = document.getElementById("download");
+    let title = document.createElement("p");
+    title.innerText = result.youtube.title;
+
+    let button = document.createElement("button");
+    button.innerText = "download";
+    button.id = "downloadButton";
+    button.setAttribute("data-id", result.youtube.url);
+
+    button.addEventListener("click", function () {
+        console.log("send download message");
+        let payload = {
+            "download": {
+                "url": result.youtube.url
+            }
+        };
+        browserType.runtime.sendMessage(payload);
+    });
+
+    download.appendChild(title);
+    download.appendChild(button);
+    download.appendChild(document.createElement("hr"));
+}

browser_extension/extension/script.js

@@ -8,7 +8,7 @@ let browserType = getBrowser();
 
 setTimeout(function(){
     console.log("running setimeout")
-    linkFinder();
+    sendUrl();
     return false;
 }, 2000);
 
@@ -30,43 +30,18 @@ function getBrowser() {
 }
 
 
-// event handler for download task
-function addToDownload(videoId) {
+function sendUrl() {
+    console.log("run sendUrl from script.js");
 
-    console.log(`downloading ${videoId}`);
     let payload = {
-        "download": {
-            "videoId": videoId
+        "youtube": {
+            "url": document.URL,
+            "title": document.title
         }
+    }
+    console.log(JSON.stringify(payload));
+    browserType.runtime.sendMessage(payload, function(response) {
+        console.log(response.farewell);
+    });
+
 };
-
-    browserType.runtime.sendMessage(payload);
-
-}
-
-
-// find relevant links to add a button to
-function linkFinder() {
-
-    console.log("running link finder");
-
-    var allLinks = document.links;
-    for (let i = 0; i < allLinks.length; i++) {
-        
-        const linkItem = allLinks[i];
-        const linkDest = linkItem.getAttribute("href");
-
-        if (linkDest.startsWith("/watch?v=") && linkItem.id == "video-title") {
-            var dlButton = document.createElement("button");
-            dlButton.innerText = "download";
-            var videoId = linkDest.split("=")[1];
-            dlButton.setAttribute("data-id", videoId);
-            dlButton.setAttribute("id", "ta-dl-" + videoId);
-            dlButton.onclick = function(event) {
-                var videoId = this.getAttribute("data-id");
-                addToDownload(videoId);
-            };
-            linkItem.parentElement.appendChild(dlButton);
-        }
-    }
-}