Able to open link in browser based on user preference (#64)

app.js

@@ -4,7 +4,7 @@ const store = require("./src/helpers/store");
 const config = require("./src/helpers/config");
 const { setThemeOnAllWindows } = require("./src/helpers/theme");
 const {
-  CONSTANTS: { OS_PLATFORMS, THEME_OPTIONS },
+  CONSTANTS: { OS_PLATFORMS, THEME_OPTIONS, USER_PREF_KEYS },
 } = require("./src/helpers/util");
 
 const { createMainWindow } = require("./src/js/mainwindow");
@@ -17,14 +17,14 @@ ipcMain.on("theme-request", function (_, webContentsId) {
 // Listen for changes in native os theme to set theme
 nativeTheme.on("updated", () => {
   // Don't change theme if not set to auto.
-  if (store.get("theme") !== THEME_OPTIONS.AUTO) {
+  if (store.get(USER_PREF_KEYS.THEME) !== THEME_OPTIONS.AUTO) {
     return;
   }
   setThemeOnAllWindows();
 });
 
 // Listen for changes in store
-const unsubscribeStoreWatch = store.onDidChange("theme", () => {
+const unsubscribeStoreWatch = store.onDidChange(USER_PREF_KEYS.THEME, () => {
   setThemeOnAllWindows();
 });
 

src/helpers/store.js

@@ -6,6 +6,10 @@ const schema = {
     enum: ["auto", "light", "dark"],
     default: "auto",
   },
+  openLinksInBrowser: {
+    type: "boolean",
+    default: true,
+  },
 };
 
 module.exports = new Store({ schema });

src/helpers/theme.js

@@ -2,12 +2,12 @@ const { webContents, nativeTheme } = require("electron");
 
 const store = require("./store");
 const {
-  CONSTANTS: { THEME_OPTIONS },
+  CONSTANTS: { THEME_OPTIONS, USER_PREF_KEYS },
 } = require("./util");
 
 // Select which theme to change to
 const selectTheme = () => {
-  const userTheme = store.get("theme");
+  const userTheme = store.get(USER_PREF_KEYS.THEME);
   const OSTheme = nativeTheme.shouldUseDarkColors
     ? THEME_OPTIONS.DARK
     : THEME_OPTIONS.LIGHT;

src/helpers/util.js

@@ -1,4 +1,7 @@
+const { shell } = require("electron");
+
 const config = require("./config");
+const store = require("./store");
 
 const CONSTANTS = {
   OS_PLATFORMS: {
@@ -15,14 +18,37 @@ const CONSTANTS = {
     LIGHT: "light",
     AUTO: "auto",
   },
+  USER_PREF_KEYS: {
+    THEME: "theme",
+    EXTERNAL_LINKS: "openLinksInBrowser",
+  },
 };
 
 // Use frameless title shift only on MacOS.Use os specific titlebar for other OS's.
 const TITLE_BAR_HEIGHT =
   config.osPlatform === CONSTANTS.OS_PLATFORMS.MAC_OS ? 20 : 0;
 
-// Get os theme util
-// const getNativeTheme = () =>
-//   nativeTheme.shouldUseDarkColors ? THEME_OPTIONS.DARK : THEME_OPTIONS.LIGHT;
+const openUrlInBrowser = ({ event = null, url }) => {
+  if (event) {
+    event.preventDefault();
+  }
+  shell.openExternal(url);
+};
+
+const isGoogleRelatedLink = (url) => {
+  return /google.com/.test(url);
+};
+
+const shouldOpenLinkInBrowser = (url) => {
+  const {
+    USER_PREF_KEYS: { EXTERNAL_LINKS },
+  } = CONSTANTS;
+  return store.get(EXTERNAL_LINKS) && !isGoogleRelatedLink(url);
+};
 
-module.exports = { TITLE_BAR_HEIGHT, CONSTANTS };
+module.exports = {
+  TITLE_BAR_HEIGHT,
+  CONSTANTS,
+  openUrlInBrowser,
+  shouldOpenLinkInBrowser,
+};

src/js/childwindow.js

@@ -4,7 +4,11 @@ const electronLocalshortcut = require("electron-localshortcut");
 const path = require("path");
 
 const { isDev } = require("../helpers/config");
-const { TITLE_BAR_HEIGHT } = require("../helpers/util");
+const {
+  TITLE_BAR_HEIGHT,
+  openUrlInBrowser,
+  shouldOpenLinkInBrowser,
+} = require("../helpers/util");
 
 var createChildWindow = function (event, url, frameName, disposition, options) {
   event.preventDefault();
@@ -80,6 +84,22 @@ var createChildWindow = function (event, url, frameName, disposition, options) {
     childview.focus();
   });
 
+  // On new window, create another window
+  childview.webContents.on(
+    "new-window",
+    (event, url, frameName, disposition, options) => {
+      if (shouldOpenLinkInBrowser(url)) {
+        openUrlInBrowser({ event, url });
+      } else {
+        createChildWindow(event, url, frameName, disposition, {
+          ...options,
+          pos: childwin.getPosition(),
+          size: childwin.getSize(),
+        });
+      }
+    }
+  );
+
   childwin.on("close", (e) => {
     if (childwin?.webContents) {
       electronLocalshortcut.unregister(childwin, ["CmdOrCtrl+R", "F5"]);

src/js/mainwindow.js

@@ -4,12 +4,16 @@ const electronLocalshortcut = require("electron-localshortcut");
 const path = require("path");
 
 const { signInURL, userAgent, isDev } = require("../helpers/config");
-const { TITLE_BAR_HEIGHT } = require("../helpers/util");
 const { checkForUpdates } = require("../helpers/updater");
 const { createChildWindow } = require("./childwindow");
-var { template } = require("./menu");
-
-var createMainWindow = () => {
+const { template } = require("./menu");
+const {
+  TITLE_BAR_HEIGHT,
+  openUrlInBrowser,
+  shouldOpenLinkInBrowser,
+} = require("../helpers/util");
+
+const createMainWindow = () => {
   // Get information about the screen size.
   const workAreaSize = screen.getPrimaryDisplay().workAreaSize;
   // Load the previous state with fall-back to defaults
@@ -99,11 +103,15 @@ var createMainWindow = () => {
   view.webContents.on(
     "new-window",
     (event, url, frameName, disposition, options) => {
-      createChildWindow(event, url, frameName, disposition, {
-        ...options,
-        pos: win.getPosition(),
-        size: win.getSize(),
-      });
+      if (shouldOpenLinkInBrowser(url)) {
+        openUrlInBrowser({ event, url });
+      } else {
+        createChildWindow(event, url, frameName, disposition, {
+          ...options,
+          pos: win.getPosition(),
+          size: win.getSize(),
+        });
+      }
     }
   );
 

src/js/menu.js

@@ -5,7 +5,8 @@ const appInfo = require("../../package.json");
 const config = require("../helpers/config");
 const store = require("../helpers/store");
 const {
-  CONSTANTS: { OS_PLATFORMS, THEME_OPTIONS },
+  CONSTANTS: { OS_PLATFORMS, THEME_OPTIONS, USER_PREF_KEYS },
+  openUrlInBrowser,
 } = require("../helpers/util");
 
 const about = () => {
@@ -26,7 +27,7 @@ const about = () => {
 
 const toggleDarkMode = () => {
   // Code can probably be a lot cleaner than this.
-  const currentTheme = store.get("theme");
+  const currentTheme = store.get(USER_PREF_KEYS.THEME);
   let toTheme;
 
   if (currentTheme === THEME_OPTIONS.AUTO) {
@@ -41,7 +42,16 @@ const toggleDarkMode = () => {
   }
 
   // Set theme store to manual, and trigger style change
-  store.set("theme", toTheme);
+  store.set(USER_PREF_KEYS.THEME, toTheme);
+};
+
+const toggleOpenLinksInBrowser = () => {
+  const { EXTERNAL_LINKS } = USER_PREF_KEYS;
+  store.set(EXTERNAL_LINKS, !store.get(EXTERNAL_LINKS));
+};
+
+const openAppRepoUrlInBrowser = async () => {
+  openUrlInBrowser({ url: appInfo.repository.url });
 };
 
 const template = [
@@ -100,17 +110,20 @@ const template = [
       ...(config.osPlatform === OS_PLATFORMS.MAC_OS
         ? [{ role: "front" }]
         : [{ role: "close" }]),
+      {
+        label: "Open external links in browser",
+        type: "checkbox",
+        click: toggleOpenLinksInBrowser,
+        checked: store.get(USER_PREF_KEYS.EXTERNAL_LINKS),
+      },
     ],
   },
   {
     role: "help",
     submenu: [
       {
         label: "Learn More",
-        click: async () => {
-          const { shell } = require("electron");
-          await shell.openExternal(appInfo.repository.url);
-        },
+        click: openAppRepoUrlInBrowser,
       },
     ],
   },