Start Invidious handling [#92]

Start by adding support for specifying instances

Author: cpiber

rollup.config.mjs

@@ -40,6 +40,7 @@ const question = q => new Promise(resolve => readline.question(q, answer => reso
  * JS BUILD
  */
 const jsreplace = (dev = !process.env.BUILD, v3 = false) => ({
+  '__VERSION__': JSON.stringify(process.env.npm_package_version),
   '__YT_API_KEY__': JSON.stringify(process.env.YT_API_KEY),
   '__DEV__': JSON.stringify(dev),
   '__MV3__': JSON.stringify(v3),

src/_locales/de/messages.json

@@ -31,6 +31,10 @@
     "message": "Aktivieren",
     "description": "Text neben Checkbox zum aktivieren eines Features."
   },
+  "optionsNone": {
+    "message": "Keine",
+    "description": "Text zur Information, dass keine Einträge konfiguriert sind."
+  },
   "optionsPlaybackChangeRateTitle": {
     "message": "Geschwindigkeits-Änderungsrate",
     "description": "Beschriftung für Änderungsrate der Abspielgeschwindigkeit der Optionen Seite."
@@ -219,6 +223,14 @@
     "message": "Nebula Videolink laden",
     "description": "Beschriftung für LoadNebula der Optionen Seite."
   },
+  "optionsEnableYoutube": {
+    "message": "Aktiviere bei YouTube",
+    "description": "Beschriftung für LoadNebula der Optionen Seite."
+  },
+  "optionsEnableInvidious": {
+    "message": "Aktiviere bei Invidious",
+    "description": "Beschriftung für LoadNebula der Optionen Seite."
+  },
   "optionsYtOpenTab": {
     "message": "Link automatisch öffnen",
     "description": "Option zum automatischen Öffnen des gefundenen Links."
@@ -231,10 +243,26 @@
     "message": "Tab wiederverwenden",
     "description": "Option um youtube Tab weiterzuverwenden anstatt eines neuen Tabs"
   },
+  "optionsInvidiousAdd": {
+    "message": "Instanz hinzufügen",
+    "description": "Beschriftung für LoadNebula Invidious Instance der Optionen Seite."
+  },
   "optionsLoadNebulaHint": {
-    "message": "Ob automatisch versucht werden soll, das Nebula Video zu finden.",
+    "message": "Ob automatisch versucht werden soll, das Nebula Video von YouTube zu finden.",
     "description": "Hilfstext für LoadNebula der Optionen Seite."
   },
+  "optionsInvidiousAddTitle": {
+    "message": "Invidious Instanz hinzufügen",
+    "description": "Titel für LoadNebula Invidious Instance Modal der Optionen Seite."
+  },
+  "optionsInvidiousAddDescription": {
+    "message": "Um das passende Video von Nebula auf Invidious zu laden, muss die Erweiterung wissen, auf welchem Invidious Instanz(en) sie dies unterstützen soll. Hier kann die URL einer Invidious Instanz hinzugefügt werden, um diese Funktion zu aktivieren, und Links zu Nebula bei bekannten Kanälen finden.",
+    "description": "Beschriftung für LoadNebula Invidious Instance Modal der Optionen Seite."
+  },
+  "optionsInvidiousAddLabel": {
+    "message": "Instanz URL",
+    "description": "Beschriftung für LoadNebula Invidious Instance der Optionen Seite."
+  },
   "optionsLoadRSSTitle": {
     "message": "RSS/Atom Feed laden",
     "description": "Beschriftung für LoadRSS der Optionen Seite."

src/_locales/en/messages.json

@@ -31,6 +31,10 @@
     "message": "Enable",
     "description": "Text next to enable/disable feature textbox."
   },
+  "optionsNone": {
+    "message": "None",
+    "description": "Text to indicate no items configured."
+  },
   "optionsPlaybackChangeRateTitle": {
     "message": "Playback speed change rate",
     "description": "Title for speed change rate of options page."
@@ -219,6 +223,14 @@
     "message": "Load Nebula link",
     "description": "Label for LoadNebula of options page."
   },
+  "optionsEnableYoutube": {
+    "message": "Enable on YouTube",
+    "description": "Label for LoadNebula of options page."
+  },
+  "optionsEnableInvidious": {
+    "message": "Enable on Invidious",
+    "description": "Label for LoadNebula of options page."
+  },
   "optionsYtOpenTab": {
     "message": "Automatically open link",
     "description": "Option to automatically open found link."
@@ -231,10 +243,26 @@
     "message": "Re-use tab",
     "description": "Option to re-use the youtube tab for nebula instead of a new tab"
   },
+  "optionsInvidiousAdd": {
+    "message": "Add instance",
+    "description": "Label for LoadNebula Invidious Instance of options page."
+  },
   "optionsLoadNebulaHint": {
-    "message": "Whether to automatically try and find the matching Nebula video or not.",
+    "message": "Whether to automatically try and find the matching Nebula video on YouTube or not.",
     "description": "Hint for LoadNebula of options page."
   },
+  "optionsInvidiousAddTitle": {
+    "message": "Add Invidious instance",
+    "description": "Title for LoadNebula Invidious Instance modal of options page."
+  },
+  "optionsInvidiousAddDescription": {
+    "message": "To load the matching video from Nebula on Indidious, the extension needs to know on which Invidious instance(s) to support this. Here you can add the URL of an Invidious instance to enable this feature, and find links to Nebula on known creators.",
+    "description": "Description for LoadNebula Invidious Instance modal of options page."
+  },
+  "optionsInvidiousAddLabel": {
+    "message": "Instance URL",
+    "description": "Label for LoadNebula Invidious Instance of options page."
+  },
   "optionsLoadRSSTitle": {
     "message": "Add RSS/Atom Feed",
     "description": "Label for LoadRSS of options page."

src/manifest.ts

@@ -45,6 +45,7 @@ const manifest: browser._manifest.WebExtensionManifest = {
   ],
   optional_permissions: [
     '*://*.googleapis.com/*',
+    '<all_urls>',
   ],
   browser_action: {
     default_icon: {

src/manifest_v3.ts

@@ -47,6 +47,11 @@ const manifest: browser._manifest.WebExtensionManifest = {
     '*://content.api.nebula.app/*',
     '*://*.nebula.tv/*',
   ],
+  // @ts-expect-error optional_host_permissions is not yet supported in the type definitions
+  optional_host_permissions: [
+    '*://*.googleapis.com/*',
+    '<all_urls>',
+  ],
   action: {
     default_icon: {
       128: 'icons/icon_128.png',

src/options.html

@@ -139,8 +139,12 @@ <h3 class="enhancer-field-title i18n">__MSG_optionsLoadNebulaTitle__</h3>
 
             <label for="watchnebula" class="enhancer-checkbox">
               <input type="checkbox" name="watchnebula" id="watchnebula" data-default="" />
-              <span class="i18n">__MSG_optionsEnable__</span>
+              <span class="i18n">__MSG_optionsEnableYoutube__</span>
             </label>
+
+            <p class="hint i18n">__MSG_optionsLoadNebulaHint__</p>
+            <p></p>
+
             <label for="ytOpenTab" class="enhancer-checkbox">
               <input type="checkbox" name="ytOpenTab" id="ytOpenTab" data-default="" />
               <span class="i18n">__MSG_optionsYtOpenTab__</span>
@@ -154,7 +158,12 @@ <h3 class="enhancer-field-title i18n">__MSG_optionsLoadNebulaTitle__</h3>
               <span class="i18n">__MSG_optionsYtReplaceTab__</span>
             </label>
 
-            <p class="hint i18n">__MSG_optionsLoadNebulaHint__</p>
+            <p></p>
+
+            <label>
+              <span class="i18n">__MSG_optionsEnableInvidious__</span>: <i class="i18n" id="watchnebulainv">__MSG_optionsNone__</i><br/>
+              <button type="button" class="i18n enhancer-button" id="watchnebulainvadd">__MSG_optionsInvidiousAdd__</button>
+            </label>
           </div>
 
           <div class="enhancer-field">

src/scripts/options.ts

@@ -1,10 +1,12 @@
 import { marked } from 'marked';
+import manifest from '../manifest';
 import { loadCreators } from './background';
 import { purgeCache } from './background/ext';
 import { getChannels } from './helpers/api';
 import { buildModal } from './helpers/modal';
 import { BrowserMessage, QualityType, getBrowserInstance, getFromStorage, notification, setToStorage } from './helpers/sharedExt';
 import { load, saveDirect } from './options/form';
+import { showAddInstance } from './options/invidious';
 import { showLogs } from './options/logs';
 import { showManageCreators } from './options/managecreators';
 import { showConfigurePlayers } from './options/player';
@@ -20,21 +22,57 @@ if (__MV3__)
 
 const els = Settings.get();
 const purgeField = document.querySelector('#purgeCacheField');
+const youtubePerms = '*://*.googleapis.com/*';
+const ownPermissions = [...manifest.permissions, ...manifest.content_scripts.flatMap(c => c.matches)];
+let invidiousPerms: string[] = [];
 
 // permissions for youtube comments
 const { permissions } = getBrowserInstance();
 els.youtube.addEventListener('change', async () => {
   const y = els.youtube;
   const perms: browser.permissions.Permissions = {
     origins: [
-      '*://*.googleapis.com/*',
+      youtubePerms,
     ],
   };
   const success = await (y.checked ? permissions.request : permissions.remove)(perms);
   if (!success) y.checked = !y.checked; // revert
   if (y.checked && success) getBrowserInstance().runtime.sendMessage(BrowserMessage.LOAD_CREATORS);
 });
-permissions.onRemoved.addListener(p => p.origins?.length && (els.youtube.checked = false));
+const rebuildInvidiousList = () => {
+  const el = document.getElementById('watchnebulainv');
+  if (!el) return;
+  if (invidiousPerms.length === 0) {
+    el.textContent = msg('optionsNone');
+    return;
+  }
+  while (el.firstChild) el.removeChild(el.firstChild);
+  for (const perm of invidiousPerms) {
+    const node = document.createTextNode(perm.replace(/^\*:\/\/(?:\*\.)?(.*?)\/.*$/, '$1'));
+    el.appendChild(node);
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.innerHTML = '×';
+    btn.className = 'i18n enhancer-button remove';
+    btn.addEventListener('click', async () => {
+      const success = await permissions.remove({ origins: [perm] });
+      if (success) invidiousPerms = invidiousPerms.filter(p => p !== perm);
+      rebuildInvidiousList();
+    });
+    el.appendChild(btn);
+    el.append(', ');
+  }
+  el.removeChild(el.lastChild); // remove last comma
+};
+const permissionUpdate = async () => {
+  const p = await permissions.getAll();
+  if (!p.origins) return;
+  els.youtube.checked = p.origins.indexOf(youtubePerms) >= 0;
+  invidiousPerms = p.origins.filter(o => o != youtubePerms && ownPermissions.indexOf(o) < 0);
+  rebuildInvidiousList();
+};
+permissions.onAdded.addListener(permissionUpdate);
+permissions.onRemoved.addListener(permissionUpdate);
 
 const aChange = () => {
   els.autoplayQueue.disabled = els.autoplay.checked;
@@ -82,6 +120,7 @@ document.querySelector('#purgeCacheNow').addEventListener('click', async () => {
 document.querySelector('#showChangelogsNow').addEventListener('click', () => showLogs(getBrowserInstance().runtime.getManifest().version));
 document.querySelector('#manageHiddenCreators').addEventListener('click', showManageCreators);
 document.querySelector('#configurePlayer').addEventListener('click', showConfigurePlayers);
+document.querySelector('#watchnebulainvadd').addEventListener('click', showAddInstance);
 
 // load initial values from storage
 load(true)
@@ -91,7 +130,8 @@ load(true)
   .then(nChange)
   .then(nTabChange)
   .then(hChange)
-  .then(vidChange);
+  .then(vidChange)
+  .then(permissionUpdate);
 
 document.querySelector('[href="#save"]').addEventListener('click', async e => {
   e.preventDefault();
@@ -186,4 +226,5 @@ if (__DEV__) {
       console.warn('Creator', channel.slug, '(', channel.title, ') has no entry in creators list');
     }
   };
+  console.log(ownPermissions);
 }

src/scripts/options/invidious.ts

@@ -0,0 +1,49 @@
+import { getBrowserInstance, notification } from '../helpers/sharedExt';
+import { buildModal } from './modal';
+
+const msg = getBrowserInstance().i18n.getMessage;
+
+const inputModalBody = () => {
+  const div = document.createElement('form');
+  div.className = 'enhancer-field';
+  div.style.padding = '0';
+  const control = div.appendChild(document.createElement('div'));
+  control.className = 'enhancer-control';
+  const input = control.appendChild(document.createElement('input'));
+  input.className = 'enhancer-text-input';
+  input.type = 'text';
+  input.placeholder = 'https://invidious.example.com';
+  input.id = 'invidiousInstanceInput';
+  const label = control.appendChild(document.createElement('label'));
+  label.textContent = msg('optionsInvidiousAddLabel');
+  label.htmlFor = 'invidiousInstanceInput';
+
+  const buttonControl = div.appendChild(document.createElement('div'));
+  buttonControl.className = 'enhancer-control';
+  const addButton = buttonControl.appendChild(document.createElement('button'));
+  addButton.type = 'submit';
+  addButton.className = 'i18n enhancer-button';
+  addButton.textContent = msg('optionsInvidiousAdd');
+  div.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const url = input.value.trim();
+    if (!url) return;
+    let perm: string;
+    try {
+      const u = new URL(url);
+      if (!u.protocol.startsWith('http')) throw new Error('Invalid protocol');
+      perm = `*://${u.host}/*`;
+    } catch (e) {
+      notification(e.message || e);
+      return;
+    }
+    getBrowserInstance().permissions.request({ origins: [perm] }).then(success => {
+      if (success) {
+        input.value = '';
+      }
+    });
+  });
+  return div;
+};
+
+export const showAddInstance = () => buildModal(msg('optionsInvidiousAddTitle'), msg('optionsInvidiousAddDescription'), undefined, inputModalBody());

src/styles/helpers/shared.scss

@@ -195,6 +195,14 @@
   &:focus {
     box-shadow: variables.$blueish_transparent 0 0 10px;
   }
+
+  &.remove {
+    padding: 2px 4px;
+    color: variables.$error;
+    border-color: variables.$error;
+    margin-left: .3em;
+    font-size: 80%;
+  }
 }
 
 .notification {

src/styles/helpers/variables.scss

@@ -19,6 +19,7 @@ $blueish_dark: rgb(65 131 196);
 $blueish_light: rgb(135 200 234);
 $gray: rgb(159 158 156);
 $gray_transparent: rgb(85 85 85 / 0.1);
+$error: #ba000d;
 
 // misc
 $disabled_alpha: 0.35;