diff --git a/browser_extension/README.md b/browser_extension/README.md new file mode 100644 index 0000000..9737e6e --- /dev/null +++ b/browser_extension/README.md @@ -0,0 +1,26 @@ +# Tube Archivist Companion +A browser extension to directly add videos from YouTube to Tube Archivist. + +## MVP or better *bearly viable product* +This is a proof of concept with the following functionality: +- Add your Tube Archivist connection details in the addon popup +- Inject a download button into youtube search results page +- Clicking the button will automatically add the video to the your download queue + +## Test this extension +- Firefox + - Open `about:debugging#/runtime/this-firefox` + - Click on *Load Temporary Add-on* + - Select the *manifest.json* file to load the addon. +- Chrome / Chromium + - Open `chrome://extensions/` + - Toggle *Developer mode* on top right + - Click on *Load unpacked* + - Open the folder containing the *manifest.json* file. + +## Help needed +This is only minimally useful in this state. Join us on our Discord and please help us improve that. + +## Note: +- For mysterious reasons sometimes the download buttons will only load when refreshing the YouTube search page and not on first load... Hence: Help needed! +- For your testing environment only for now: Point the extension to the newest *unstable* build. diff --git a/browser_extension/extension/background.js b/browser_extension/extension/background.js new file mode 100644 index 0000000..9e73291 --- /dev/null +++ b/browser_extension/extension/background.js @@ -0,0 +1,94 @@ +/* +extension background script listening for events +*/ + +console.log("running background.js"); + +let browserType = getBrowser(); + + +// boilerplate to dedect browser type api +function getBrowser() { + if (typeof chrome !== "undefined") { + if (typeof browser !== "undefined") { + console.log("detected firefox"); + return browser; + } else { + console.log("detected chrome"); + return chrome; + } + } else { + console.log("failed to dedect browser"); + throw "browser detection error" + }; +} + + +// send post request to API backend +async function sendPayload(url, token, payload) { + + const rawResponse = await fetch(url, { + method: "POST", + headers: { + "Accept": "application/json", + "Content-Type": "application/json", + "Authorization": token, + "mode": "no-cors" + }, + body: JSON.stringify(payload) + }); + + const content = await rawResponse.json(); + return content; +} + + +// read access storage and send +function forwardRequest(payload) { + + console.log("running forwardRequest"); + + function onGot(item) { + console.log(item.access); + + const url = `${item.access.url}:${item.access.port}/api/download/`; + console.log(`sending to ${url}`); + const token = `Token ${item.access.apiKey}`; + + sendPayload(url, token, payload).then(content => { + console.log(content); + }) + + }; + + function onError(error) { + console.local("failed to get access details"); + console.log(`Error: ${error}`); + }; + + browserType.storage.local.get("access", function(result) { + onGot(result) + }); + +} + + +// 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"); + let payload = { + "data": [ + { + "youtube_id": request.download["videoId"], + "status": "pending", + } + ] + } + forwardRequest(payload); + }; + } +); diff --git a/browser_extension/extension/images/icon.png b/browser_extension/extension/images/icon.png new file mode 100644 index 0000000..33c0c5b Binary files /dev/null and b/browser_extension/extension/images/icon.png differ diff --git a/browser_extension/extension/images/icon128.png b/browser_extension/extension/images/icon128.png new file mode 100644 index 0000000..2c08551 Binary files /dev/null and b/browser_extension/extension/images/icon128.png differ diff --git a/browser_extension/extension/images/icon16.png b/browser_extension/extension/images/icon16.png new file mode 100644 index 0000000..a18ae31 Binary files /dev/null and b/browser_extension/extension/images/icon16.png differ diff --git a/browser_extension/extension/images/logo.svg b/browser_extension/extension/images/logo.svg new file mode 100644 index 0000000..3f900d4 --- /dev/null +++ b/browser_extension/extension/images/logo.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser_extension/extension/images/question.svg b/browser_extension/extension/images/question.svg new file mode 100644 index 0000000..872deef --- /dev/null +++ b/browser_extension/extension/images/question.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/browser_extension/extension/images/social/discord.svg b/browser_extension/extension/images/social/discord.svg new file mode 100644 index 0000000..dd07931 --- /dev/null +++ b/browser_extension/extension/images/social/discord.svg @@ -0,0 +1,24 @@ + + + + + + + + + + diff --git a/browser_extension/extension/images/social/github.svg b/browser_extension/extension/images/social/github.svg new file mode 100644 index 0000000..c693abf --- /dev/null +++ b/browser_extension/extension/images/social/github.svg @@ -0,0 +1,23 @@ + + + + + + + + diff --git a/browser_extension/extension/images/social/reddit.svg b/browser_extension/extension/images/social/reddit.svg new file mode 100644 index 0000000..e6c615c --- /dev/null +++ b/browser_extension/extension/images/social/reddit.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + diff --git a/browser_extension/extension/index.html b/browser_extension/extension/index.html new file mode 100644 index 0000000..f8c254a --- /dev/null +++ b/browser_extension/extension/index.html @@ -0,0 +1,93 @@ + + + + + + + TubeArchivist Companion + + + + +
+ ta-logo +
+
+ + + + + + +
+
+ +
+
+
+ + reddit-icon + + + discord-icon + + + github-icon + +
+
+ + question-icon + +
+
+
+ + + \ No newline at end of file diff --git a/browser_extension/extension/manifest.json b/browser_extension/extension/manifest.json new file mode 100644 index 0000000..a260861 --- /dev/null +++ b/browser_extension/extension/manifest.json @@ -0,0 +1,25 @@ +{ + "manifest_version": 2, + "name": "TubeArchivist Companion", + "description": "Interact with your selhosted TA server.", + "version": "0.0.1", + "icons": { + "128": "/images/icon128.png" + }, + "browser_action": { + "default_icon": "/images/icon.png", + "default_popup": "index.html" + }, + "permissions": [ + "storage" + ], + "content_scripts": [ + { + "matches": ["https://www.youtube.com/results*"], + "js": ["script.js"] + } + ], + "background": { + "scripts": ["background.js"] + } +} diff --git a/browser_extension/extension/popup.js b/browser_extension/extension/popup.js new file mode 100644 index 0000000..84c21da --- /dev/null +++ b/browser_extension/extension/popup.js @@ -0,0 +1,63 @@ +/* +Loaded into popup index.html +*/ + +let browserType = getBrowser(); + +// boilerplate to dedect browser type api +function getBrowser() { + if (typeof chrome !== "undefined") { + if (typeof browser !== "undefined") { + console.log("detected firefox"); + return browser; + } else { + console.log("detected chrome"); + return chrome; + } + } else { + console.log("failed to dedect browser"); + throw "browser detection error" + }; +} + +// store access details +document.getElementById("save-login").addEventListener("click", function () { + console.log("save form"); + let toStore = { + "access": { + "url": document.getElementById("url").value, + "port": document.getElementById("port").value, + "apiKey": document.getElementById("api-key").value + } + }; + console.log(toStore); + browserType.storage.local.set(toStore, function() { + console.log("Stored connection details: " + JSON.stringify(toStore)); + }); +}) + +// fill in form +document.addEventListener("DOMContentLoaded", async () => { + + console.log("executing dom loader"); + + function onGot(item) { + if (!item.access) { + console.log("no access details found"); + return + } + console.log(item.access); + document.getElementById("url").value = item.access.url; + document.getElementById("port").value = item.access.port; + document.getElementById("api-key").value = item.access.apiKey; + }; + + function onError(error) { + console.log(`Error: ${error}`); + }; + + browserType.storage.local.get("access", function(result) { + onGot(result) + }); + +}) diff --git a/browser_extension/extension/script.js b/browser_extension/extension/script.js new file mode 100644 index 0000000..803e094 --- /dev/null +++ b/browser_extension/extension/script.js @@ -0,0 +1,72 @@ +/* +content script running on youtube.com +*/ + +console.log("running script.js"); + +let browserType = getBrowser(); + +setTimeout(function(){ + console.log("running setimeout") + linkFinder(); + return false; +}, 2000); + + +// boilerplate to dedect browser type api +function getBrowser() { + if (typeof chrome !== "undefined") { + if (typeof browser !== "undefined") { + console.log("detected firefox"); + return browser; + } else { + console.log("detected chrome"); + return chrome; + } + } else { + console.log("failed to dedect browser"); + throw "browser detection error" + }; +} + + +// event handler for download task +function addToDownload(videoId) { + + console.log(`downloading ${videoId}`); + let payload = { + "download": { + "videoId": videoId + } + }; + + 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); + } + } +}