9 files changed, 376 insertions, 244 deletions

diff --git a/src/webview/badge.js b/src/webview/badge.js
new file mode 100644
index 000000000..1e02fb56a
--- /dev/null
+++ b/src/webview/badge.js
@@ -0,0 +1,33 @@
+const { ipcRenderer } = require('electron');
+
+const debug = require('debug')('Ferdi:Plugin:BadgeHandler');
+
+export class BadgeHandler {
+  constructor() {
+    this.countCache = {
+      direct: 0,
+      indirect: 0,
+    };
+  }
+
+  setBadge(direct, indirect) {
+    if (this.countCache.direct === direct
+        && this.countCache.indirect === indirect) return;
+
+    // Parse number to integer
+    // This will correct errors that recipes may introduce, e.g.
+    // by sending a String instead of an integer
+    const directInt = parseInt(direct, 10);
+    const indirectInt = parseInt(indirect, 10);
+
+    const count = {
+      direct: Math.max(directInt, 0),
+      indirect: Math.max(indirectInt, 0),
+    };
+
+    ipcRenderer.sendToHost('message-counts', count);
+    Object.assign(this.countCache, count);
+
+    debug('Sending badge count to host', count);
+  }
+}
diff --git a/src/webview/contextMenuBuilder.js b/src/webview/contextMenuBuilder.js
index 63eed2ebe..602ce06f5 100644
--- a/src/webview/contextMenuBuilder.js
+++ b/src/webview/contextMenuBuilder.js
@@ -10,7 +10,7 @@ import {
   clipboard, ipcRenderer, nativeImage, shell,
 } from 'electron';
 import { Menu, MenuItem } from '@electron/remote';
-import { isMac } from '../environment';
+import { shortcutKey, isMac } from '../environment';
 
 import { SEARCH_ENGINE_NAMES, SEARCH_ENGINE_URLS } from '../config';
 
@@ -28,6 +28,7 @@ const contextMenuStringTable = {
   cut: () => 'Cut',
   copy: () => 'Copy',
   paste: () => 'Paste',
+  pasteAndMatchStyle: () => 'Paste and match style',
   searchWith: ({ searchEngine }) => `Search with ${searchEngine}`,
   openLinkUrl: () => 'Open Link',
   openLinkInFerdiUrl: () => 'Open Link in Ferdi',
@@ -61,7 +62,7 @@ module.exports = class ContextMenuBuilder {
    * @param  {function} processMenu If passed, this method will be passed the menu to change
    *                                it prior to display. Signature: (menu, info) => menu
    */
-  constructor(webContents, debugMode = false, processMenu = m => m) {
+  constructor(webContents, debugMode = false, processMenu = (m) => m) {
     this.debugMode = debugMode;
     this.processMenu = processMenu;
     this.menu = null;
@@ -261,7 +262,7 @@ module.exports = class ContextMenuBuilder {
     if (menuInfo.misspelledWord) {
       menu.append(
         new MenuItem({
-          label: 'Add to dictionary',
+          label: this.stringTable.addToDictionary(),
           click: () => webContents.session.addWordToSpellCheckerDictionary(menuInfo.misspelledWord),
         }),
       );
@@ -320,7 +321,7 @@ module.exports = class ContextMenuBuilder {
       label: this.stringTable.copyImage(),
       click: () => {
         const result = this.convertImageToBase64(menuInfo.srcURL,
-          dataURL => clipboard.writeImage(nativeImage.createFromDataURL(dataURL)));
+          (dataURL) => clipboard.writeImage(nativeImage.createFromDataURL(dataURL)));
 
         this._sendNotificationOnClipboardEvent(menuInfo.clipboardNotifications, () => `Image copied from URL: ${menuInfo.srcURL}`);
         return result;
@@ -375,7 +376,7 @@ module.exports = class ContextMenuBuilder {
     const webContents = this.getWebContents();
     menu.append(new MenuItem({
       label: this.stringTable.cut(),
-      accelerator: 'CommandOrControl+X',
+      accelerator: `${shortcutKey()}+X`,
       enabled: menuInfo.editFlags.canCut,
       click: () => webContents.cut(),
     }));
@@ -390,7 +391,7 @@ module.exports = class ContextMenuBuilder {
     const webContents = this.getWebContents();
     menu.append(new MenuItem({
       label: this.stringTable.copy(),
-      accelerator: 'CommandOrControl+C',
+      accelerator: `${shortcutKey()}+C`,
       enabled: menuInfo.editFlags.canCopy,
       click: () => webContents.copy(),
     }));
@@ -405,7 +406,7 @@ module.exports = class ContextMenuBuilder {
     const webContents = this.getWebContents();
     menu.append(new MenuItem({
       label: this.stringTable.paste(),
-      accelerator: 'CommandOrControl+V',
+      accelerator: `${shortcutKey()}+V`,
       enabled: menuInfo.editFlags.canPaste,
       click: () => webContents.paste(),
     }));
@@ -422,8 +423,8 @@ module.exports = class ContextMenuBuilder {
       const webContents = this.getWebContents();
       menu.append(
         new MenuItem({
-          label: 'Paste as plain text',
-          accelerator: 'CommandOrControl+Shift+V',
+          label: this.stringTable.pasteAndMatchStyle(),
+          accelerator: `${shortcutKey()}+Shift+V`,
           click: () => webContents.pasteAndMatchStyle(),
         }),
       );
@@ -489,7 +490,7 @@ module.exports = class ContextMenuBuilder {
     const webContents = this.getWebContents();
     menu.append(new MenuItem({
       label: this.stringTable.goBack(),
-      accelerator: 'CommandOrControl+left',
+      accelerator: `${shortcutKey()}+left`,
       enabled: webContents.canGoBack(),
       click: () => webContents.goBack(),
     }));
@@ -504,7 +505,7 @@ module.exports = class ContextMenuBuilder {
     const webContents = this.getWebContents();
     menu.append(new MenuItem({
       label: this.stringTable.goForward(),
-      accelerator: 'CommandOrControl+right',
+      accelerator: `${shortcutKey()}+right`,
       enabled: webContents.canGoForward(),
       click: () => webContents.goForward(),
     }));
@@ -535,7 +536,7 @@ module.exports = class ContextMenuBuilder {
     const baseURL = new URL(menuInfo.pageURL);
     menu.append(new MenuItem({
       label: this.stringTable.goToHomePage(),
-      accelerator: 'CommandOrControl+Home',
+      accelerator: `${shortcutKey()}+Home`,
       enabled: true,
       click: () => {
         // webContents.loadURL(baseURL.origin);
diff --git a/src/webview/darkmode.js b/src/webview/darkmode.js
index ab629435c..7435d6404 100644
--- a/src/webview/darkmode.js
+++ b/src/webview/darkmode.js
@@ -1,7 +1,7 @@
 /* eslint no-bitwise: ["error", { "int32Hint": true }] */
 
-import path from 'path';
-import fs from 'fs-extra';
+import { join } from 'path';
+import { pathExistsSync, readFileSync } from 'fs-extra';
 
 const debug = require('debug')('Ferdi:DarkMode');
 
@@ -10,9 +10,9 @@ const chars = [...'abcdefghijklmnopqrstuvwxyz'];
 const ID = [...Array(20)].map(() => chars[Math.random() * chars.length | 0]).join``;
 
 export function injectDarkModeStyle(recipePath) {
-  const darkModeStyle = path.join(recipePath, 'darkmode.css');
-  if (fs.pathExistsSync(darkModeStyle)) {
-    const data = fs.readFileSync(darkModeStyle);
+  const darkModeStyle = join(recipePath, 'darkmode.css');
+  if (pathExistsSync(darkModeStyle)) {
+    const data = readFileSync(darkModeStyle);
     const styles = document.createElement('style');
     styles.id = ID;
     styles.innerHTML = data.toString();
diff --git a/src/webview/find.js b/src/webview/find.js
new file mode 100644
index 000000000..040811d68
--- /dev/null
+++ b/src/webview/find.js
@@ -0,0 +1,23 @@
+import { ipcRenderer } from 'electron';
+import { FindInPage as ElectronFindInPage } from 'electron-find';
+
+// Shim to expose webContents functionality to electron-find without @electron/remote
+const webContentsShim = {
+  findInPage: (text, options = {}) => ipcRenderer.sendSync('find-in-page', text, options),
+  stopFindInPage: (action) => {
+    ipcRenderer.sendSync('stop-find-in-page', action);
+  },
+  on: (eventName, listener) => {
+    if (eventName === 'found-in-page') {
+      ipcRenderer.on('found-in-page', (_, result) => {
+        listener({ sender: this }, result);
+      });
+    }
+  },
+};
+
+export default class FindInPage extends ElectronFindInPage {
+  constructor(options = {}) {
+    super(webContentsShim, options);
+  }
+}
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js
index b8fe7dc52..96caa125e 100644
--- a/src/webview/lib/RecipeWebview.js
+++ b/src/webview/lib/RecipeWebview.js
@@ -1,14 +1,12 @@
 import { ipcRenderer } from 'electron';
-import { pathExistsSync, readFile } from 'fs-extra';
+import { exists, pathExistsSync, readFileSync } from 'fs-extra';
 
 const debug = require('debug')('Ferdi:Plugin:RecipeWebview');
 
 class RecipeWebview {
-  constructor() {
-    this.countCache = {
-      direct: 0,
-      indirect: 0,
-    };
+  constructor(badgeHandler, notificationsHandler) {
+    this.badgeHandler = badgeHandler;
+    this.notificationsHandler = notificationsHandler;
 
     ipcRenderer.on('poll', () => {
       this.loopFunc();
@@ -45,24 +43,7 @@ class RecipeWebview {
    *                          me directly to me eg. in a channel
    */
   setBadge(direct = 0, indirect = 0) {
-    if (this.countCache.direct === direct
-      && this.countCache.indirect === indirect) return;
-
-    // Parse number to integer
-    // This will correct errors that recipes may introduce, e.g.
-    // by sending a String instead of an integer
-    const directInt = parseInt(direct, 10);
-    const indirectInt = parseInt(indirect, 10);
-
-    const count = {
-      direct: Math.max(directInt, 0),
-      indirect: Math.max(indirectInt, 0),
-    };
-
-    ipcRenderer.sendToHost('message-counts', count);
-    Object.assign(this.countCache, count);
-
-    debug('Sending badge count to host', count);
+    this.badgeHandler.setBadge(direct, indirect);
   }
 
   /**
@@ -74,9 +55,8 @@ class RecipeWebview {
   injectCSS(...files) {
     files.forEach(async (file) => {
       if (pathExistsSync(file)) {
-        const data = await readFile(file, 'utf8');
         const styles = document.createElement('style');
-        styles.innerHTML = data;
+        styles.innerHTML = readFileSync(file, 'utf8');
 
         document.querySelector('head').appendChild(styles);
 
@@ -85,6 +65,22 @@ class RecipeWebview {
     });
   }
 
+  injectJSUnsafe(...files) {
+    Promise.all(files.map(async (file) => {
+      if (await exists(file)) {
+        return readFileSync(file, 'utf8');
+      }
+      debug('Script not found', file);
+      return null;
+    })).then(async (scripts) => {
+      const scriptsFound = scripts.filter((script) => script !== null);
+      if (scriptsFound.length > 0) {
+        debug('Inject scripts to main world', scriptsFound);
+        ipcRenderer.sendToHost('inject-js-unsafe', ...scriptsFound);
+      }
+    });
+  }
+
   /**
    * Set a custom handler for turning on and off dark mode
    *
@@ -96,7 +92,7 @@ class RecipeWebview {
 
   onNotify(fn) {
     if (typeof fn === 'function') {
-      window.Notification.prototype.onNotify = fn;
+      this.notificationsHandler.onNotify = fn;
     }
   }
 
diff --git a/src/webview/notifications.js b/src/webview/notifications.js
index 021f05cc3..205a3220c 100644
--- a/src/webview/notifications.js
+++ b/src/webview/notifications.js
@@ -3,49 +3,65 @@ import uuidV1 from 'uuid/v1';
 
 const debug = require('debug')('Ferdi:Notifications');
 
-class Notification {
-  static permission = 'granted';
-
-  constructor(title = '', options = {}) {
-    debug('New notification', title, options);
-    this.title = title;
-    this.options = options;
-    this.notificationId = uuidV1();
-
-    ipcRenderer.sendToHost('notification', this.onNotify({
-      title: this.title,
-      options: this.options,
-      notificationId: this.notificationId,
-    }));
-
-    ipcRenderer.once(`notification-onclick:${this.notificationId}`, () => {
-      if (typeof this.onclick === 'function') {
-        this.onclick();
-      }
+export class NotificationsHandler {
+  onNotify = (data) => data;
+
+  displayNotification(title, options) {
+    return new Promise((resolve) => {
+      debug('New notification', title, options);
+
+      const notificationId = uuidV1();
+
+      ipcRenderer.sendToHost('notification', this.onNotify({
+        title,
+        options,
+        notificationId,
+      }));
+
+      ipcRenderer.once(`notification-onclick:${notificationId}`, () => {
+        resolve();
+      });
     });
   }
+}
 
-  static requestPermission(cb = null) {
-    if (!cb) {
-      return new Promise((resolve) => {
-        resolve(Notification.permission);
-      });
-    }
+export const notificationsClassDefinition = `(() => {
+  class Notification {
+    static permission = 'granted';
 
-    if (typeof (cb) === 'function') {
-      return cb(Notification.permission);
+    constructor(title = '', options = {}) {
+      this.title = title;
+      this.options = options;
+      window.ferdi.displayNotification(title, options)
+        .then(() => {
+          if (typeof (this.onClick) === 'function') {
+            this.onClick();
+          }
+        });
     }
 
-    return Notification.permission;
-  }
+    static requestPermission(cb = null) {
+      if (!cb) {
+        return new Promise((resolve) => {
+          resolve(Notification.permission);
+        });
+      }
 
-  onNotify(data) {
-    return data;
-  }
+      if (typeof (cb) === 'function') {
+        return cb(Notification.permission);
+      }
 
-  onClick() {}
+      return Notification.permission;
+    }
 
-  close() {}
-}
+    onNotify(data) {
+      return data;
+    }
+
+    onClick() {}
+
+    close() {}
+  }
 
-window.Notification = Notification;
+  window.Notification = Notification;
+})();`;
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;
-}
diff --git a/src/webview/screenshare.js b/src/webview/screenshare.js
index 84d2e1e95..e7e43c04e 100644
--- a/src/webview/screenshare.js
+++ b/src/webview/screenshare.js
@@ -2,6 +2,33 @@ import { desktopCapturer } from 'electron';
 
 const CANCEL_ID = 'desktop-capturer-selection__cancel';
 
+export async function getDisplayMediaSelector() {
+  const sources = await desktopCapturer.getSources({
+    types: ['screen', 'window'],
+  });
+  return `<div class="desktop-capturer-selection__scroller">
+  <ul class="desktop-capturer-selection__list">
+    ${sources
+    .map(
+      ({ id, name, thumbnail }) => `
+      <li class="desktop-capturer-selection__item">
+        <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}">
+          <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" />
+          <span class="desktop-capturer-selection__name">${name}</span>
+        </button>
+      </li>
+    `,
+    )
+    .join('')}
+    <li class="desktop-capturer-selection__item">
+      <button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel">
+        <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span>
+      </button>
+    </li>
+  </ul>
+</div>`;
+}
+
 export const screenShareCss = `
 .desktop-capturer-selection {
   position: fixed;
@@ -46,7 +73,9 @@ export const screenShareCss = `
   padding: 4px;
   background: #252626;
   text-align: left;
-  transition: background-color .15s, box-shadow .15s, color .15s;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-color .15s, box-shadow .15s, color .15s;
+  }
   color: #dedede;
 }
 .desktop-capturer-selection__btn:hover,
@@ -72,38 +101,12 @@ export const screenShareCss = `
 }
 `;
 
-// Patch getDisplayMedia for screen sharing
-window.navigator.mediaDevices.getDisplayMedia = () => async (resolve, reject) => {
+export const screenShareJs = `
+window.navigator.mediaDevices.getDisplayMedia = () => new Promise(async (resolve, reject) => {
   try {
-    const sources = await desktopCapturer.getSources({
-      types: ['screen', 'window'],
-    });
-
     const selectionElem = document.createElement('div');
-    selectionElem.classList = 'desktop-capturer-selection';
-    selectionElem.innerHTML = `
-        <div class="desktop-capturer-selection__scroller">
-          <ul class="desktop-capturer-selection__list">
-            ${sources
-    .map(
-      ({ id, name, thumbnail }) => `
-              <li class="desktop-capturer-selection__item">
-                <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}">
-                  <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" />
-                  <span class="desktop-capturer-selection__name">${name}</span>
-                </button>
-              </li>
-            `,
-    )
-    .join('')}
-            <li class="desktop-capturer-selection__item">
-              <button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel">
-                <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span>
-              </button>
-            </li>
-          </ul>
-        </div>
-      `;
+    selectionElem.classList = ['desktop-capturer-selection'];
+    selectionElem.innerHTML = await window.ferdi.getDisplayMediaSelector();
     document.body.appendChild(selectionElem);
 
     document
@@ -112,25 +115,18 @@ window.navigator.mediaDevices.getDisplayMedia = () => async (resolve, reject) =>
         button.addEventListener('click', async () => {
           try {
             const id = button.getAttribute('data-id');
-            if (id === CANCEL_ID) {
+            if (id === '${CANCEL_ID}') {
               reject(new Error('Cancelled by user'));
             } else {
-              const mediaSource = sources.find((source) => source.id === id);
-              if (!mediaSource) {
-                throw new Error(`Source with id ${id} does not exist`);
-              }
-
-              const stream = await window.navigator.mediaDevices.getUserMedia(
-                {
-                  audio: false,
-                  video: {
-                    mandatory: {
-                      chromeMediaSource: 'desktop',
-                      chromeMediaSourceId: mediaSource.id,
-                    },
+              const stream = await window.navigator.mediaDevices.getUserMedia({
+                audio: false,
+                video: {
+                  mandatory: {
+                    chromeMediaSource: 'desktop',
+                    chromeMediaSourceId: id,
                   },
                 },
-              );
+              });
               resolve(stream);
             }
           } catch (err) {
@@ -143,4 +139,5 @@ window.navigator.mediaDevices.getDisplayMedia = () => async (resolve, reject) =>
   } catch (err) {
     reject(err);
   }
-};
+});
+`;
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
index 58a04b728..0f4715207 100644
--- a/src/webview/spellchecker.js
+++ b/src/webview/spellchecker.js
@@ -1,6 +1,6 @@
 import { getCurrentWebContents } from '@electron/remote';
 import { SPELLCHECKER_LOCALES } from '../i18n/languages';
-import { isMac } from '../environment';
+import { DEFAULT_APP_SETTINGS, isMac } from '../environment';
 
 const debug = require('debug')('Ferdi:spellchecker');
 
@@ -9,7 +9,7 @@ const [defaultLocale] = webContents.session.getSpellCheckerLanguages();
 debug('Spellchecker default locale is', defaultLocale);
 
 export function getSpellcheckerLocaleByFuzzyIdentifier(identifier) {
-  const locales = Object.keys(SPELLCHECKER_LOCALES).filter(key => key.toLocaleLowerCase() === identifier.toLowerCase() || key.split('-')[0] === identifier.toLowerCase());
+  const locales = Object.keys(SPELLCHECKER_LOCALES).filter((key) => key.toLocaleLowerCase() === identifier.toLowerCase() || key.split('-')[0] === identifier.toLowerCase());
 
   if (locales.length >= 1) {
     return locales[0];
@@ -33,7 +33,7 @@ export function switchDict(locale) {
     locales.push(foundLocale);
   }
 
-  locales.push(defaultLocale, 'de');
+  locales.push(defaultLocale, DEFAULT_APP_SETTINGS.fallbackLocale);
 
   webContents.session.setSpellCheckerLanguages(locales);
 }