Browser Extension for Tube Archivist
4 |
5 | 
6 | 
7 |
8 |
9 | ## Core Functionality
10 | This is a browser extension to bridge YouTube with [Tube Archivist](https://github.com/tubearchivist/tubearchivist), your self hosted YouTube media server.
11 | - Add your Tube Archivist connection details in the addon popup.
12 | - On YouTube video pages, inject a download button to download that video and a subscribe button to subscribe to that channel.
13 | - On YouTube channel pages, inject a button to subscribe to the channel or download the complete channel. Regarding the channel subpages, this follows the same rules as adding to the queue over the form.
14 | - Throughout most places, hover over the video title to reveal a download button for that video.
15 | - Sync your cookies for yt-dlp.
16 |
17 | ## Screenshots
18 | 
19 | Popup to enter your connection details.
20 |
6 |
7 | 21 | 22 |  23 | Button injected on video page to download the video or subscribe to the channel. 24 |
25 | 26 |  27 | Download button injected showing when hovering over the video title. 28 |
29 | 30 |  31 | Channel button injected to subscribe or download whole channel, video download button showing when hovering over the video title. 32 |
33 | 34 | ## Install 35 | - Firefox: The addon is available on the [Extension store](https://addons.mozilla.org/addon/tubearchivist-companion/). 36 | - Chrome: The addon is available on the [Chrome Web Store](https://chrome.google.com/webstore/detail/tubearchivist-companion/jjnkmicfnfojkkgobdfeieblocadmcie). 37 | 38 | ## Update 39 | After a new release here on GitHub, you'll get updates automatically in your browser. Due to the verification process, for Firefox this usually takes 1-2 hours, for Chrome 2-3 days. 40 | 41 | ## Permissions 42 | - **Access your data for www.youtube.com**: Needed to inject download and subscribe buttons directly into the page. 43 | - **Storage**: Needed to store your connection details. 44 | - **Cookie**: Needed to read your cookies for youtube.com to access restricted videos. 45 | 46 | ## Setup 47 | - **URL**: This is where your Tube Archivist instance is located. Can be a host name or an IP address. Add the port if needed at the end, e.g. `:8000`. 48 | - **API key**: You can find your API key on the settings page (Settings -> Application -> Integrations section -> API token) of your Tube Archivist instance. 49 | 50 | A green checkmark will appear next to the *Save* button if your connection is working. 51 | 52 | ## Options 53 | - **Continuous Cookie Sync**: Automatically and continuously update the cookie on change. 54 | - **Copy Now**: Copy the cookie now to TA. 55 | - **Show Cookie**: Show the cookie on click, for copy paste. 56 | - **Autostart**: Autostart and prioritize videos send from this extension. 57 | 58 | ## Test this extension 59 | Before continuing loading the temporary extension here, make sure to deactivate/delete the main extension first. 60 | 61 | Symlink/copy the correct manifest file for your browser to the expected location, e.g. `ln -s manifest-firefox.json manifest.json`. 62 | 63 | - Firefox 64 | - Open `about:debugging#/runtime/this-firefox` 65 | - Click on *Load Temporary Add-on* 66 | - Select the *manifest.json* file to load the addon. 67 | - You can *inspect* background.js by lunching the debug tools from there. 68 | - Chrome / Chromium 69 | - Open `chrome://extensions/` 70 | - Toggle *Developer mode* on top right 71 | - Click on *Load unpacked* 72 | - Open the folder containing the *manifest.json* file. 73 | - Click on *Service Worker* to open the dev tools at background.js. 74 | 75 | Note: 76 | - If you are running your TA dev setup outside of the container, you need to point the URL to the backend and _not_ the frontend. E.g. localhost:8000 and not localhost:3000. 77 | 78 | ## Compatibility 79 | - Verify that you are running the [latest version](https://github.com/tubearchivist/tubearchivist/releases/latest) of Tube Archivist as the API is under development and will change. 80 | - For testing this extension between releases, use the *unstable* builds of Tube Archivist, only for your testing environment. 81 | 82 | ## Roadmap 83 | Join us on [Discord](https://www.tubearchivist.com/discord) and help us improve and extend this project. This is a list of planned features, in no particular order: 84 | - [ ] Implement download/subscribe button for playlists 85 | - [ ] Add download buttons to the `/shorts/` pages 86 | - [X] Get download and subscribe status from TA to show on the injected buttons 87 | - [X] Implement download button for videos on the YouTube homepage over inline preview 88 | - [X] Implement download button for videos on playlist 89 | - [X] Error handling for connection errors 90 | - [X] Dynamically inject buttons with mutation observer 91 | 92 | ## Making changes to the JavaScript 93 | The JavaScript does not require any build step; you just edit the files directly. However, there is config for eslint and prettier (a linter and formatter respectively); their use is recommended but not required. To use them, install `node`, run `npm i` from the root directory of this repository to install dependencies, then run `npm run lint` and `npm run format` to run eslint and prettier respectively. 94 | 95 | ## Updating Artwork 96 | Google listing is *very* picky. Screenshots need to be exactly **1280x800** in resolution and need to be in *jpg* or *png* without alpha canal. 97 | -------------------------------------------------------------------------------- /assets/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tubearchivist/browser-extension/017b789fe205849f152f5862498f520e118763db/assets/icon-128x128.png -------------------------------------------------------------------------------- /assets/screenshot-video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tubearchivist/browser-extension/017b789fe205849f152f5862498f520e118763db/assets/screenshot-video.png -------------------------------------------------------------------------------- /assets/social-preview-1400x560.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tubearchivist/browser-extension/017b789fe205849f152f5862498f520e118763db/assets/social-preview-1400x560.png -------------------------------------------------------------------------------- /assets/social-preview-440x280.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tubearchivist/browser-extension/017b789fe205849f152f5862498f520e118763db/assets/social-preview-440x280.png -------------------------------------------------------------------------------- /assets/social-preview-920x680.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tubearchivist/browser-extension/017b789fe205849f152f5862498f520e118763db/assets/social-preview-920x680.png -------------------------------------------------------------------------------- /assets/social-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tubearchivist/browser-extension/017b789fe205849f152f5862498f520e118763db/assets/social-preview.png -------------------------------------------------------------------------------- /assets/tac-screenshot-channel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tubearchivist/browser-extension/017b789fe205849f152f5862498f520e118763db/assets/tac-screenshot-channel.jpg -------------------------------------------------------------------------------- /assets/tac-screenshot-search.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tubearchivist/browser-extension/017b789fe205849f152f5862498f520e118763db/assets/tac-screenshot-search.jpg -------------------------------------------------------------------------------- /assets/tac-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tubearchivist/browser-extension/017b789fe205849f152f5862498f520e118763db/assets/tac-screenshot.png -------------------------------------------------------------------------------- /assets/tube-archivist-companion-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tubearchivist/browser-extension/017b789fe205849f152f5862498f520e118763db/assets/tube-archivist-companion-banner.png -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | # build package 3 | 4 | set -e 5 | 6 | if [[ $(basename "$(pwd)") != 'browser-extension' ]]; then 7 | echo 'not in browser-extension folder' 8 | exit 1 9 | fi 10 | 11 | echo "latest tags:" 12 | git tag | tail -n 5 | sort -r 13 | 14 | printf "\ncreate new version:\n" 15 | read -r VERSION 16 | 17 | 18 | # build release zip files 19 | function create_zip { 20 | cd extension 21 | 22 | # firefox 23 | rm manifest.json 24 | cp manifest-firefox.json manifest.json 25 | zip -rq ../release/ta-companion-"$VERSION"-firefox.zip . \ 26 | -x manifest-chrome.json -x manifest-firefox.json 27 | 28 | # chrome 29 | rm manifest.json 30 | cp manifest-chrome.json manifest.json 31 | zip -rq ../release/ta-companion-"$VERSION"-chrome.zip . \ 32 | -x manifest-chrome.json -x manifest-firefox.json 33 | 34 | rm manifest.json 35 | cd .. 36 | 37 | } 38 | 39 | 40 | # create release tag 41 | function create_release { 42 | 43 | git tag -a "$VERSION" -m "new release version $VERSION" 44 | git push origin "$VERSION" 45 | 46 | } 47 | 48 | 49 | create_zip 50 | create_release 51 | 52 | 53 | ## 54 | exit 0 55 | -------------------------------------------------------------------------------- /extension/background.js: -------------------------------------------------------------------------------- 1 | /* 2 | extension background script listening for events 3 | */ 4 | 5 | 'use strict'; 6 | 7 | console.log('running background.js'); 8 | 9 | let browserType = getBrowser(); 10 | 11 | // boilerplate to dedect browser type api 12 | function getBrowser() { 13 | if (typeof chrome !== 'undefined') { 14 | if (typeof browser !== 'undefined') { 15 | return browser; 16 | } else { 17 | return chrome; 18 | } 19 | } else { 20 | console.log('failed to detect browser'); 21 | throw 'browser detection error'; 22 | } 23 | } 24 | 25 | // send get request to API backend 26 | async function sendGet(path) { 27 | let access = await getAccess(); 28 | const url = `${access.url}:${access.port}/${path}`; 29 | console.log('GET: ' + url); 30 | 31 | const rawResponse = await fetch(url, { 32 | method: 'GET', 33 | headers: { 34 | Accept: 'application/json', 35 | 'Content-Type': 'application/json', 36 | Authorization: 'Token ' + access.apiKey, 37 | mode: 'no-cors', 38 | }, 39 | }); 40 | 41 | const content = await rawResponse.json(); 42 | return content; 43 | } 44 | 45 | // send post/put request to API backend 46 | async function sendData(path, payload, method) { 47 | let access = await getAccess(); 48 | const url = `${access.url}:${access.port}/${path}`; 49 | console.log(`${method}: ${url}`); 50 | if (!path.endsWith('cookie/')) console.log(`${method}: ${JSON.stringify(payload)}`); 51 | 52 | try { 53 | const rawResponse = await fetch(url, { 54 | method: method, 55 | headers: { 56 | Accept: 'application/json', 57 | 'Content-Type': 'application/json', 58 | Authorization: 'Token ' + access.apiKey, 59 | mode: 'no-cors', 60 | }, 61 | body: JSON.stringify(payload), 62 | }); 63 | const content = await rawResponse.json(); 64 | return content; 65 | } catch (e) { 66 | console.error(e); 67 | return null; 68 | } 69 | } 70 | 71 | // read access details from storage.local 72 | async function getAccess() { 73 | let storage = await browserType.storage.local.get('access'); 74 | 75 | return storage.access; 76 | } 77 | 78 | // check if cookie is valid 79 | async function getCookieState() { 80 | const path = 'api/appsettings/cookie/'; 81 | let response = await sendGet(path); 82 | console.log('cookie state: ' + JSON.stringify(response)); 83 | 84 | return response; 85 | } 86 | 87 | // send ping to server 88 | async function verifyConnection() { 89 | const path = 'api/ping/'; 90 | let message = await sendGet(path); 91 | console.log('verify connection: ' + JSON.stringify(message)); 92 | 93 | if (message?.response === 'pong') { 94 | return true; 95 | } else if (message?.detail) { 96 | throw new Error(message.detail); 97 | } else { 98 | throw new Error(`got unknown message ${JSON.stringify(message)}`); 99 | } 100 | } 101 | 102 | // send youtube link from injected buttons 103 | async function download(url) { 104 | let apiURL = 'api/download/'; 105 | let autostart = await browserType.storage.local.get('autostart'); 106 | if (Object.keys(autostart).length > 0 && autostart.autostart.checked) { 107 | apiURL += '?autostart=true'; 108 | } 109 | return await sendData( 110 | apiURL, 111 | { 112 | data: [ 113 | { 114 | youtube_id: url, 115 | status: 'pending', 116 | }, 117 | ], 118 | }, 119 | 'POST' 120 | ); 121 | } 122 | 123 | async function subscribe(url, subscribed) { 124 | return await sendData( 125 | 'api/channel/', 126 | { 127 | data: [ 128 | { 129 | channel_id: url, 130 | channel_subscribed: subscribed, 131 | }, 132 | ], 133 | }, 134 | 'POST' 135 | ); 136 | } 137 | 138 | async function videoExists(id) { 139 | const path = `api/video/${id}/`; 140 | let response = await sendGet(path); 141 | if (response?.error) return false; 142 | let access = await getAccess(); 143 | return new URL(`video/${id}/`, `${access.url}:${access.port}/`).href; 144 | } 145 | 146 | async function getChannel(channelHandle) { 147 | const path = `api/channel/search/?q=${channelHandle}`; 148 | try { 149 | return await sendGet(path); 150 | } catch { 151 | return false; 152 | } 153 | } 154 | 155 | async function cookieStr(cookieLines) { 156 | const path = 'api/appsettings/cookie/'; 157 | let payload = { 158 | cookie: cookieLines.join('\n'), 159 | }; 160 | let response = await sendData(path, payload, 'PUT'); 161 | 162 | return response; 163 | } 164 | 165 | function buildCookieLine(cookie) { 166 | // 2nd argument controls subdomains, and must match leading dot in domain 167 | let includeSubdomains = cookie.domain.startsWith('.') ? 'TRUE' : 'FALSE'; 168 | 169 | return [ 170 | cookie.domain, 171 | includeSubdomains, 172 | cookie.path, 173 | cookie.httpOnly.toString().toUpperCase(), 174 | Math.trunc(cookie.expirationDate) || 0, 175 | cookie.name, 176 | cookie.value, 177 | ].join('\t'); 178 | } 179 | 180 | async function getCookieLines() { 181 | const acceptableDomains = ['.youtube.com', 'youtube.com', 'www.youtube.com']; 182 | let cookieStores = await browserType.cookies.getAllCookieStores(); 183 | let cookieLines = [ 184 | '# Netscape HTTP Cookie File', 185 | '# https://curl.haxx.se/rfc/cookie_spec.html', 186 | '# This is a generated file! Do not edit.\n', 187 | ]; 188 | for (let i = 0; i < cookieStores.length; i++) { 189 | const cookieStore = cookieStores[i]; 190 | let allCookiesStore = await browserType.cookies.getAll({ 191 | domain: '.youtube.com', 192 | storeId: cookieStore['id'], 193 | }); 194 | for (let j = 0; j < allCookiesStore.length; j++) { 195 | const cookie = allCookiesStore[j]; 196 | if (acceptableDomains.includes(cookie.domain)) { 197 | cookieLines.push(buildCookieLine(cookie)); 198 | } 199 | } 200 | } 201 | return cookieLines; 202 | } 203 | 204 | async function sendCookies() { 205 | console.log('function sendCookies'); 206 | let cookieLines = await getCookieLines(); 207 | let response = cookieStr(cookieLines); 208 | 209 | return response; 210 | } 211 | 212 | let listenerEnabled = false; 213 | let isThrottled = false; 214 | 215 | async function handleContinuousCookie(checked) { 216 | if (checked === true) { 217 | browserType.cookies.onChanged.addListener(onCookieChange); 218 | listenerEnabled = true; 219 | console.log('Cookie listener enabled'); 220 | } else { 221 | browserType.cookies.onChanged.removeListener(onCookieChange); 222 | listenerEnabled = false; 223 | console.log('Cookie listener disabled'); 224 | } 225 | } 226 | 227 | function onCookieChange(changeInfo) { 228 | if (!isThrottled) { 229 | isThrottled = true; 230 | 231 | console.log('Cookie event detected:', changeInfo); 232 | 233 | sendCookies(); 234 | 235 | setTimeout(() => { 236 | isThrottled = false; 237 | }, 10000); 238 | } 239 | } 240 | 241 | /* 242 | process and return message if needed 243 | the following messages are supported: 244 | type Message = 245 | | { type: 'verify' } 246 | | { type: 'cookieState' } 247 | | { type: 'sendCookie' } 248 | | { type: 'getCookieLines' } 249 | | { type: 'continuousSync', checked: boolean } 250 | | { type: 'download', url: string } 251 | | { type: 'subscribe', url: string } 252 | | { type: 'unsubscribe', url: string } 253 | | { type: 'videoExists', id: string } 254 | | { type: 'getChannel', url: string } 255 | */ 256 | function handleMessage(request, sender, sendResponse) { 257 | console.log('message background.js listener got message', request); 258 | 259 | // this function must return the value `true` in chrome to signal the response will be async; 260 | // it cannot return a promise 261 | // so in order to use async/await, we need a wrapper 262 | (async () => { 263 | switch (request.type) { 264 | case 'verify': { 265 | return await verifyConnection(); 266 | } 267 | case 'cookieState': { 268 | return await getCookieState(); 269 | } 270 | case 'sendCookie': { 271 | return await sendCookies(); 272 | } 273 | case 'getCookieLines': { 274 | return await getCookieLines(); 275 | } 276 | case 'continuousSync': { 277 | return await handleContinuousCookie(request.checked); 278 | } 279 | case 'download': { 280 | return await download(request.url); 281 | } 282 | case 'subscribe': { 283 | return await subscribe(request.url, true); 284 | } 285 | case 'unsubscribe': { 286 | let channel = await getChannel(request.url); 287 | return await subscribe(channel.channel_id, false); 288 | } 289 | case 'videoExists': { 290 | return await videoExists(request.videoId); 291 | } 292 | case 'getChannel': { 293 | return await getChannel(request.channelHandle); 294 | } 295 | default: { 296 | let err = new Error(`unknown message type ${JSON.stringify(request.type)}`); 297 | console.log(err); 298 | throw err; 299 | } 300 | } 301 | })() 302 | .then(value => sendResponse({ success: true, value })) 303 | .catch(e => { 304 | console.log(e); 305 | let message = e?.message ?? e; 306 | if (message === 'Failed to fetch') { 307 | // chrome's error message for failed `fetch` is not very user-friendly 308 | message = 'Could not connect to server'; 309 | } 310 | sendResponse({ success: false, value: message }); 311 | }); 312 | return true; 313 | } 314 | 315 | browserType.runtime.onMessage.addListener(handleMessage); 316 | 317 | browserType.runtime.onStartup.addListener(() => { 318 | browserType.storage.local.get('continuousSync', data => { 319 | handleContinuousCookie(data?.continuousSync?.checked || false); 320 | }); 321 | }); 322 | -------------------------------------------------------------------------------- /extension/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tubearchivist/browser-extension/017b789fe205849f152f5862498f520e118763db/extension/images/icon.png -------------------------------------------------------------------------------- /extension/images/icon128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tubearchivist/browser-extension/017b789fe205849f152f5862498f520e118763db/extension/images/icon128.png -------------------------------------------------------------------------------- /extension/images/icon16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tubearchivist/browser-extension/017b789fe205849f152f5862498f520e118763db/extension/images/icon16.png -------------------------------------------------------------------------------- /extension/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tubearchivist/browser-extension/017b789fe205849f152f5862498f520e118763db/extension/images/logo.png -------------------------------------------------------------------------------- /extension/images/question.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 17 | -------------------------------------------------------------------------------- /extension/images/social/discord.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 25 | -------------------------------------------------------------------------------- /extension/images/social/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 24 | -------------------------------------------------------------------------------- /extension/images/social/reddit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 36 | -------------------------------------------------------------------------------- /extension/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
16 | 
60 | 
65 |