commit beccfd47a75342453be89fc4af5bacfe258dcd35 Author: simon Date: Fri Apr 1 08:40:39 2022 +0700 initial commit, extension in dedicated repo diff --git a/README.md b/README.md new file mode 100644 index 0000000..66c32a3 --- /dev/null +++ b/README.md @@ -0,0 +1,24 @@ +# 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 +- Add a download button to the pop up for youtube links + +## 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 your testing environment only for now: Point the extension to the newest *unstable* build. diff --git a/extension/background.js b/extension/background.js new file mode 100644 index 0000000..b0bbf6d --- /dev/null +++ b/extension/background.js @@ -0,0 +1,98 @@ +/* +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.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["url"], + "status": "pending", + } + ] + } + console.log(payload); + forwardRequest(payload); + } + } +); diff --git a/extension/images/icon.png b/extension/images/icon.png new file mode 100644 index 0000000..33c0c5b Binary files /dev/null and b/extension/images/icon.png differ diff --git a/extension/images/icon128.png b/extension/images/icon128.png new file mode 100644 index 0000000..2c08551 Binary files /dev/null and b/extension/images/icon128.png differ diff --git a/extension/images/icon16.png b/extension/images/icon16.png new file mode 100644 index 0000000..a18ae31 Binary files /dev/null and b/extension/images/icon16.png differ diff --git a/extension/images/logo.svg b/extension/images/logo.svg new file mode 100644 index 0000000..3f900d4 --- /dev/null +++ b/extension/images/logo.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/extension/images/question.svg b/extension/images/question.svg new file mode 100644 index 0000000..872deef --- /dev/null +++ b/extension/images/question.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/extension/images/social/discord.svg b/extension/images/social/discord.svg new file mode 100644 index 0000000..dd07931 --- /dev/null +++ b/extension/images/social/discord.svg @@ -0,0 +1,24 @@ + + + + + + + + + + diff --git a/extension/images/social/github.svg b/extension/images/social/github.svg new file mode 100644 index 0000000..c693abf --- /dev/null +++ b/extension/images/social/github.svg @@ -0,0 +1,23 @@ + + + + + + + + diff --git a/extension/images/social/reddit.svg b/extension/images/social/reddit.svg new file mode 100644 index 0000000..e6c615c --- /dev/null +++ b/extension/images/social/reddit.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + diff --git a/extension/index.html b/extension/index.html new file mode 100644 index 0000000..1d35d91 --- /dev/null +++ b/extension/index.html @@ -0,0 +1,98 @@ + + + + + + + TubeArchivist Companion + + + + +
+ ta-logo +
+
+ +
+ +
+
+
+ + reddit-icon + + + discord-icon + + + github-icon + +
+
+ + question-icon + +
+
+
+ + + \ No newline at end of file diff --git a/extension/manifest.json b/extension/manifest.json new file mode 100644 index 0000000..11e3b89 --- /dev/null +++ b/extension/manifest.json @@ -0,0 +1,26 @@ +{ + "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", + "tabs" + ], + "content_scripts": [ + { + "matches": ["https://www.youtube.com/*"], + "js": ["script.js"] + } + ], + "background": { + "scripts": ["background.js"] + } +} diff --git a/extension/popup.js b/extension/popup.js new file mode 100644 index 0000000..ba19561 --- /dev/null +++ b/extension/popup.js @@ -0,0 +1,93 @@ +/* +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) + }); + + 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")); +} diff --git a/extension/script.js b/extension/script.js new file mode 100644 index 0000000..8c72f2c --- /dev/null +++ b/extension/script.js @@ -0,0 +1,47 @@ +/* +content script running on youtube.com +*/ + +console.log("running script.js"); + +let browserType = getBrowser(); + +setTimeout(function(){ + console.log("running setimeout") + sendUrl(); + 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" + }; +} + + +function sendUrl() { + console.log("run sendUrl from script.js"); + + let payload = { + "youtube": { + "url": document.URL, + "title": document.title + } + } + console.log(JSON.stringify(payload)); + browserType.runtime.sendMessage(payload, function(response) { + console.log(response.farewell); + }); + +};