diff --git a/browser_extension/README.md b/browser_extension/README.md new file mode 100644 index 00000000..9737e6e8 --- /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 00000000..9e732914 --- /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 00000000..33c0c5bd 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 00000000..2c08551a 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 00000000..a18ae318 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 00000000..3f900d4b --- /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 00000000..872deef4 --- /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 00000000..dd07931c --- /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 00000000..c693abf6 --- /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 00000000..e6c615c3 --- /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 00000000..f8c254a6 --- /dev/null +++ b/browser_extension/extension/index.html @@ -0,0 +1,93 @@ + + +
+ + + +