1 files changed, 180 insertions, 114 deletions

diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 8da45864b..a45c34002 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -1,11 +1,9 @@
 /* eslint-disable import/first */
-import { ipcRenderer } from 'electron';
-import { getCurrentWebContents } from '@electron/remote';
-import path from 'path';
+import { contextBridge, ipcRenderer } from 'electron';
+import { join } from 'path';
 import { autorun, computed, observable } from 'mobx';
-import fs from 'fs-extra';
+import { pathExistsSync, readFileSync } from 'fs-extra';
 import { debounce } from 'lodash';
-import { FindInPage } from 'electron-find';
 
 // For some services darkreader tries to use the chrome extension message API
 // This will cause the service to fail loading
@@ -23,16 +21,99 @@ import customDarkModeCss from './darkmode/custom';
 import RecipeWebview from './lib/RecipeWebview';
 import Userscript from './lib/Userscript';
 
-import { switchDict, getSpellcheckerLocaleByFuzzyIdentifier } from './spellchecker';
-import { injectDarkModeStyle, isDarkModeStyleInjected, removeDarkModeStyle } from './darkmode';
+import { BadgeHandler } from './badge';
 import contextMenu from './contextMenu';
-import './notifications';
-import { screenShareCss } from './screenshare';
+import {
+  injectDarkModeStyle,
+  isDarkModeStyleInjected,
+  removeDarkModeStyle,
+} from './darkmode';
+import FindInPage from './find';
+import {
+  NotificationsHandler,
+  notificationsClassDefinition,
+} from './notifications';
+import {
+  getDisplayMediaSelector,
+  screenShareCss,
+  screenShareJs,
+} from './screenshare';
+import {
+  switchDict,
+  getSpellcheckerLocaleByFuzzyIdentifier,
+} from './spellchecker';
 
-import { DEFAULT_APP_SETTINGS, isDevMode } from '../environment';
+import { DEFAULT_APP_SETTINGS } from '../environment';
 
 const debug = require('debug')('Ferdi:Plugin');
 
+const badgeHandler = new BadgeHandler();
+
+const notificationsHandler = new NotificationsHandler();
+
+// Patching window.open
+const originalWindowOpen = window.open;
+
+window.open = (url, frameName, features) => {
+  debug('window.open', url, frameName, features);
+  if (!url) {
+    // The service hasn't yet supplied a URL (as used in Skype).
+    // Return a new dummy window object and wait for the service to change the properties
+    const newWindow = {
+      location: {
+        href: '',
+      },
+    };
+
+    const checkInterval = setInterval(() => {
+      // Has the service changed the URL yet?
+      if (newWindow.location.href !== '') {
+        if (features) {
+          originalWindowOpen(newWindow.location.href, frameName, features);
+        } else {
+          // Open the new URL
+          ipcRenderer.sendToHost('new-window', newWindow.location.href);
+        }
+        clearInterval(checkInterval);
+      }
+    }, 0);
+
+    setTimeout(() => {
+      // Stop checking for location changes after 1 second
+      clearInterval(checkInterval);
+    }, 1000);
+
+    return newWindow;
+  }
+
+  // We need to differentiate if the link should be opened in a popup or in the systems default browser
+  if (!frameName && !features && typeof features !== 'string') {
+    return ipcRenderer.sendToHost('new-window', url);
+  }
+
+  if (url) {
+    return originalWindowOpen(url, frameName, features);
+  }
+};
+
+// We can't override APIs here, so we first expose functions via window.ferdi,
+// then overwrite the corresponding field of the window object by injected JS.
+contextBridge.exposeInMainWorld('ferdi', {
+  open: window.open,
+  setBadge: (direct, indirect) =>
+    badgeHandler.setBadge(direct || 0, indirect || 0),
+  displayNotification: (title, options) =>
+    notificationsHandler.displayNotification(title, options),
+  getDisplayMediaSelector,
+});
+
+ipcRenderer.sendToHost(
+  'inject-js-unsafe',
+  'window.open = window.ferdi.open;',
+  notificationsClassDefinition,
+  screenShareJs,
+);
+
 class RecipeController {
   @observable settings = {
     overrideSpellcheckerLanguage: false,
@@ -66,7 +147,9 @@ class RecipeController {
   }
 
   @computed get spellcheckerLanguage() {
-    const selected = this.settings.service.spellcheckerLanguage || this.settings.app.spellcheckerLanguage;
+    const selected =
+      this.settings.service.spellcheckerLanguage ||
+      this.settings.app.spellcheckerLanguage;
     return selected;
   }
 
@@ -75,7 +158,7 @@ class RecipeController {
   findInPage = null;
 
   async initialize() {
-    Object.keys(this.ipcEvents).forEach((channel) => {
+    Object.keys(this.ipcEvents).forEach(channel => {
       ipcRenderer.on(channel, (...args) => {
         debug('Received IPC event for channel', channel, 'with', ...args);
         this[this.ipcEvents[channel]](...args);
@@ -97,7 +180,7 @@ class RecipeController {
     autorun(() => this.update());
 
     document.addEventListener('DOMContentLoaded', () => {
-      this.findInPage = new FindInPage(getCurrentWebContents(), {
+      this.findInPage = new FindInPage({
         inputFocusColor: '#CE9FFC',
         textColor: '#212121',
       });
@@ -106,14 +189,14 @@ class RecipeController {
 
   loadRecipeModule(event, config, recipe) {
     debug('loadRecipeModule');
-    const modulePath = path.join(recipe.path, 'webview.js');
+    const modulePath = join(recipe.path, 'webview.js');
     debug('module path', modulePath);
     // Delete module from cache
     delete require.cache[require.resolve(modulePath)];
     try {
-      this.recipe = new RecipeWebview();
+      this.recipe = new RecipeWebview(badgeHandler, notificationsHandler);
       // eslint-disable-next-line
-      require(modulePath)(this.recipe, {...config, recipe,});
+      require(modulePath)(this.recipe, { ...config, recipe });
       debug('Initialize Recipe', config, recipe);
 
       this.settings.service = Object.assign(config, { recipe });
@@ -131,15 +214,15 @@ class RecipeController {
     const styles = document.createElement('style');
     styles.innerHTML = screenShareCss;
 
-    const userCss = path.join(recipe.path, 'user.css');
-    if (await fs.exists(userCss)) {
-      const data = await fs.readFile(userCss);
+    const userCss = join(recipe.path, 'user.css');
+    if (pathExistsSync(userCss)) {
+      const data = readFileSync(userCss);
       styles.innerHTML += data.toString();
     }
     document.querySelector('head').appendChild(styles);
 
-    const userJs = path.join(recipe.path, 'user.js');
-    if (await fs.exists(userJs)) {
+    const userJs = join(recipe.path, 'user.js');
+    if (pathExistsSync(userJs)) {
       const loadUserJs = () => {
         // eslint-disable-next-line
         const userJsModule = require(userJs);
@@ -167,8 +250,14 @@ class RecipeController {
   update() {
     debug('enableSpellchecking', this.settings.app.enableSpellchecking);
     debug('isDarkModeEnabled', this.settings.service.isDarkModeEnabled);
-    debug('System spellcheckerLanguage', this.settings.app.spellcheckerLanguage);
-    debug('Service spellcheckerLanguage', this.settings.service.spellcheckerLanguage);
+    debug(
+      'System spellcheckerLanguage',
+      this.settings.app.spellcheckerLanguage,
+    );
+    debug(
+      'Service spellcheckerLanguage',
+      this.settings.service.spellcheckerLanguage,
+    );
     debug('darkReaderSettigs', this.settings.service.darkReaderSettings);
     debug('searchEngine', this.settings.app.searchEngine);
 
@@ -181,7 +270,10 @@ class RecipeController {
       let { spellcheckerLanguage } = this;
       if (spellcheckerLanguage.includes('automatic')) {
         this.automaticLanguageDetection();
-        debug('Found `automatic` locale, falling back to user locale until detected', this.settings.app.locale);
+        debug(
+          'Found `automatic` locale, falling back to user locale until detected',
+          this.settings.app.locale,
+        );
         spellcheckerLanguage = this.settings.app.locale;
       }
       switchDict(spellcheckerLanguage);
@@ -193,7 +285,7 @@ class RecipeController {
       this.hasUpdatedBeforeRecipeLoaded = true;
     }
 
-    console.log(
+    debug(
       'Darkmode enabled?',
       this.settings.service.isDarkModeEnabled,
       'Dark theme active?',
@@ -204,22 +296,29 @@ class RecipeController {
       removeDarkModeStyle,
       disableDarkMode,
       enableDarkMode,
-      injectDarkModeStyle: () => injectDarkModeStyle(this.settings.service.recipe.path),
+      injectDarkModeStyle: () =>
+        injectDarkModeStyle(this.settings.service.recipe.path),
       isDarkModeStyleInjected,
     };
 
-    if (this.settings.service.isDarkModeEnabled && this.settings.app.isDarkThemeActive !== false) {
+    if (
+      this.settings.service.isDarkModeEnabled &&
+      this.settings.app.isDarkThemeActive !== false
+    ) {
       debug('Enable dark mode');
 
       // Check if recipe has a darkmode.css
-      const darkModeStyle = path.join(this.settings.service.recipe.path, 'darkmode.css');
-      const darkModeExists = fs.pathExistsSync(darkModeStyle);
+      const darkModeStyle = join(
+        this.settings.service.recipe.path,
+        'darkmode.css',
+      );
+      const darkModeExists = pathExistsSync(darkModeStyle);
 
-      console.log('darkmode.css exists? ', darkModeExists ? 'Yes' : 'No');
+      debug('darkmode.css exists? ', darkModeExists ? 'Yes' : 'No');
 
       // Check if recipe has a custom dark mode handler
       if (this.recipe && this.recipe.darkModeHandler) {
-        console.log('Using custom dark mode handler');
+        debug('Using custom dark mode handler');
 
         // Remove other dark mode styles if they were already loaded
         if (this.hasUpdatedBeforeRecipeLoaded) {
@@ -230,25 +329,32 @@ class RecipeController {
 
         this.recipe.darkModeHandler(true, handlerConfig);
       } else if (darkModeExists) {
-        console.log('Injecting darkmode.css');
+        debug('Injecting darkmode.css');
         injectDarkModeStyle(this.settings.service.recipe.path);
 
         // Make sure universal dark mode is disabled
         disableDarkMode();
         this.universalDarkModeInjected = false;
-      } else if (this.settings.app.universalDarkMode && !ignoreList.includes(window.location.host)) {
-        console.log('Injecting Dark Reader');
+      } else if (
+        this.settings.app.universalDarkMode &&
+        !ignoreList.includes(window.location.host)
+      ) {
+        debug('Injecting Dark Reader');
 
         // Use Dark Reader instead
-        const { brightness, contrast, sepia } = this.settings.service.darkReaderSettings;
-        enableDarkMode({ brightness, contrast, sepia }, {
-          css: customDarkModeCss[window.location.host] || '',
-        });
+        const { brightness, contrast, sepia } =
+          this.settings.service.darkReaderSettings;
+        enableDarkMode(
+          { brightness, contrast, sepia },
+          {
+            css: customDarkModeCss[window.location.host] || '',
+          },
+        );
         this.universalDarkModeInjected = true;
       }
     } else {
       debug('Remove dark mode');
-      console.log('DarkMode disabled - removing remaining styles');
+      debug('DarkMode disabled - removing remaining styles');
 
       if (this.recipe && this.recipe.darkModeHandler) {
         // Remove other dark mode styles if they were already loaded
@@ -260,10 +366,10 @@ class RecipeController {
 
         this.recipe.darkModeHandler(false, handlerConfig);
       } else if (isDarkModeStyleInjected()) {
-        console.log('Removing injected darkmode.css');
+        debug('Removing injected darkmode.css');
         removeDarkModeStyle();
       } else {
-        console.log('Removing Dark Reader');
+        debug('Removing Dark Reader');
 
         disableDarkMode();
         this.universalDarkModeInjected = false;
@@ -273,9 +379,9 @@ class RecipeController {
     // Remove dark reader if (universal) dark mode was just disabled
     if (this.universalDarkModeInjected) {
       if (
-        !this.settings.app.darkMode
-        || !this.settings.service.isDarkModeEnabled
-        || !this.settings.app.universalDarkMode
+        !this.settings.app.darkMode ||
+        !this.settings.service.isDarkModeEnabled ||
+        !this.settings.app.universalDarkMode
       ) {
         disableDarkMode();
         this.universalDarkModeInjected = false;
@@ -297,82 +403,42 @@ class RecipeController {
   }
 
   async automaticLanguageDetection() {
-    window.addEventListener('keyup', debounce(async (e) => {
-      const element = e.target;
-
-      if (!element) return;
-
-      let value = '';
-      if (element.isContentEditable) {
-        value = element.textContent;
-      } else if (element.value) {
-        value = element.value;
-      }
+    window.addEventListener(
+      'keyup',
+      debounce(async e => {
+        const element = e.target;
+
+        if (!element) return;
+
+        let value = '';
+        if (element.isContentEditable) {
+          value = element.textContent;
+        } else if (element.value) {
+          value = element.value;
+        }
 
-      // Force a minimum length to get better detection results
-      if (value.length < 25) return;
+        // Force a minimum length to get better detection results
+        if (value.length < 25) return;
 
-      debug('Detecting language for', value);
-      const locale = await ipcRenderer.invoke('detect-language', { sample: value });
+        debug('Detecting language for', value);
+        const locale = await ipcRenderer.invoke('detect-language', {
+          sample: value,
+        });
 
-      const spellcheckerLocale = getSpellcheckerLocaleByFuzzyIdentifier(locale);
-      debug('Language detected reliably, setting spellchecker language to', spellcheckerLocale);
-      if (spellcheckerLocale) {
-        switchDict(spellcheckerLocale);
-      }
-    }, 225));
+        const spellcheckerLocale =
+          getSpellcheckerLocaleByFuzzyIdentifier(locale);
+        debug(
+          'Language detected reliably, setting spellchecker language to',
+          spellcheckerLocale,
+        );
+        if (spellcheckerLocale) {
+          switchDict(spellcheckerLocale);
+        }
+      }, 225),
+    );
   }
 }
 
 /* eslint-disable no-new */
 new RecipeController();
 /* eslint-enable no-new */
-
-// Patching window.open
-const originalWindowOpen = window.open;
-
-window.open = (url, frameName, features) => {
-  debug('window.open', url, frameName, features);
-  if (!url) {
-    // The service hasn't yet supplied a URL (as used in Skype).
-    // Return a new dummy window object and wait for the service to change the properties
-    const newWindow = {
-      location: {
-        href: '',
-      },
-    };
-
-    const checkInterval = setInterval(() => {
-      // Has the service changed the URL yet?
-      if (newWindow.location.href !== '') {
-        if (features) {
-          originalWindowOpen(newWindow.location.href, frameName, features);
-        } else {
-          // Open the new URL
-          ipcRenderer.sendToHost('new-window', newWindow.location.href);
-        }
-        clearInterval(checkInterval);
-      }
-    }, 0);
-
-    setTimeout(() => {
-      // Stop checking for location changes after 1 second
-      clearInterval(checkInterval);
-    }, 1000);
-
-    return newWindow;
-  }
-
-  // We need to differentiate if the link should be opened in a popup or in the systems default browser
-  if (!frameName && !features && typeof features !== 'string') {
-    return ipcRenderer.sendToHost('new-window', url);
-  }
-
-  if (url) {
-    return originalWindowOpen(url, frameName, features);
-  }
-};
-
-if (isDevMode) {
-  window.log = console.log;
-}