Make ReactDevTools Opt-in

4 files changed, 24 insertions, 7 deletions

diff --git a/src/api/settings.ts b/src/api/settings.ts
index 51bec1d..0f2356f 100644
--- a/src/api/settings.ts
+++ b/src/api/settings.ts
@@ -3,9 +3,10 @@ import IpcEvents from "../utils/IpcEvents";
 import { React } from "../webpack/common";
 import { mergeDefaults } from "../utils/misc";
 
-interface Settings {
+export interface Settings {
     notifyAboutUpdates: boolean;
     useQuickCss: boolean;
+    enableReactDevtools: boolean;
     plugins: {
         [plugin: string]: {
             enabled: boolean;
@@ -17,6 +18,7 @@ interface Settings {
 const DefaultSettings: Settings = {
     notifyAboutUpdates: true,
     useQuickCss: true,
+    enableReactDevtools: false,
     plugins: {}
 };
 
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 7756902..6c5b501 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -100,11 +100,18 @@ export default ErrorBoundary.wrap(function Settings() {
             <Switch
                 value={settings.useQuickCss}
                 onChange={(v: boolean) => settings.useQuickCss = v}
-                note="Enable QuickCSS"
+                note="Loads styles from your QuickCss file"
             >
                 Use QuickCss
             </Switch>
             {!IS_WEB && <Switch
+                value={settings.enableReactDevtools}
+                onChange={(v: boolean) => settings.enableReactDevtools = v}
+                note="Requires a full restart"
+            >
+                Enable React Developer Tools
+            </Switch>}
+            {!IS_WEB && <Switch
                 value={settings.notifyAboutUpdates}
                 onChange={(v: boolean) => settings.notifyAboutUpdates = v}
                 note="Shows a Toast on StartUp"
diff --git a/src/ipcMain/index.ts b/src/ipcMain/index.ts
index 63844e0..1f6166e 100644
--- a/src/ipcMain/index.ts
+++ b/src/ipcMain/index.ts
@@ -24,7 +24,7 @@ function readCss() {
     return readFile(QUICKCSS_PATH, "utf-8").catch(() => "");
 }
 
-function readSettings() {
+export function readSettings() {
     try {
         return readFileSync(SETTINGS_FILE, "utf-8");
     } catch {
diff --git a/src/patcher.ts b/src/patcher.ts
index bb7aab2..2725b03 100644
--- a/src/patcher.ts
+++ b/src/patcher.ts
@@ -1,7 +1,7 @@
 import electron, { app, BrowserWindowConstructorOptions } from "electron";
-import installExt, { REACT_DEVELOPER_TOOLS } from "electron-devtools-installer";
 import { join } from "path";
 import { initIpc } from "./ipcMain";
+import { readSettings } from "./ipcMain/index";
 
 console.log("[Vencord] Starting up...");
 
@@ -47,9 +47,17 @@ Object.defineProperty(global, "appSettings", {
 process.env.DATA_DIR = join(app.getPath("userData"), "..", "Vencord");
 
 electron.app.whenReady().then(() => {
-    installExt(REACT_DEVELOPER_TOOLS)
-        .then(() => console.info("Installed React DevTools"))
-        .catch(err => console.error("Failed to install React DevTools", err));
+    try {
+        const settings = JSON.parse(readSettings());
+        if (settings.enableReactDevtools)
+            import("electron-devtools-installer")
+                .then(({ default: inst, REACT_DEVELOPER_TOOLS }) =>
+                    // @ts-ignore: cursed fake esm turns it into exports.default.default
+                    (inst.default ?? inst)(REACT_DEVELOPER_TOOLS)
+                )
+                .then(() => console.info("[Vencord] Installed React Developer Tools"))
+                .catch(err => console.error("[Vencord] Failed to install React Developer Tools", err));
+    } catch { }
 
     // Remove CSP
     electron.session.defaultSession.webRequest.onHeadersReceived(({ responseHeaders, url }, cb) => {