Implement user.css and user.js (#401)

* #83 Implement user.css and user.js

* Fix button layout in settings

* Fix user script not loading

Co-authored-by: Amine <amine@mouafik.fr>

10 files changed, 261 insertions, 130 deletions

diff --git a/README.md b/README.md
index 5c4ca92dc..6a3a8ff54 100644
--- a/README.md
+++ b/README.md
@@ -112,6 +112,7 @@ If you use an AUR Helper e.g. yay, simply install it via `yay -S ferdi`.
 - [x] Add Process Manager to find services using a lot of resources
 - [x] Add "npm run prepare-code" command for development to lint and beautify code
 - [x] Add button to open darkmode.css for a service
+- [x] [Add `user.css` and `user.js` that allows users to inject custom code into services](https://github.com/getferdi/ferdi/wiki/Using-user.css-and-user.js) ([#83](https://github.com/getferdi/ferdi/issues/83))
 - [x] Allow SVGs for service custom icon
 - [x] Switch to [`electron-spellchecker`](https://github.com/electron-userland/electron-spellchecker) to improve application size
 - [x] Improve "About Ferdi" screen to better display versions
diff --git a/src/actions/service.js b/src/actions/service.js
index d32bb80d3..f0c42e8aa 100644
--- a/src/actions/service.js
+++ b/src/actions/service.js
@@ -28,8 +28,9 @@ export default {
     serviceId: PropTypes.string.isRequired,
     redirect: PropTypes.string,
   },
-  openDarkmodeCss: {
+  openRecipeFile: {
     recipe: PropTypes.string.isRequired,
+    file: PropTypes.string.isRequired,
   },
   clearCache: {
     serviceId: PropTypes.string.isRequired,
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 89c82c7f8..98051d78f 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -33,6 +33,18 @@ const messages = defineMessages({
     id: 'settings.service.form.openDarkmodeCss',
     defaultMessage: '!!!Open darkmode.css',
   },
+  openUserCss: {
+    id: 'settings.service.form.openUserCss',
+    defaultMessage: '!!!Open user.css',
+  },
+  openUserJs: {
+    id: 'settings.service.form.openUserJs',
+    defaultMessage: '!!!Open user.js',
+  },
+  recipeFileInfo: {
+    id: 'settings.service.form.recipeFileInfo',
+    defaultMessage: '!!!Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.',
+  },
   availableServices: {
     id: 'settings.service.form.availableServices',
     defaultMessage: '!!!Available services',
@@ -131,8 +143,7 @@ export default @observer class EditServiceForm extends Component {
     form: PropTypes.instanceOf(Form).isRequired,
     onSubmit: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
-    openDarkmodeCss: PropTypes.func.isRequired,
-    isOpeningDarkModeCss: PropTypes.bool.isRequired,
+    openRecipeFile: PropTypes.func.isRequired,
     isSaving: PropTypes.bool.isRequired,
     isDeleting: PropTypes.bool.isRequired,
     isProxyFeatureEnabled: PropTypes.bool.isRequired,
@@ -199,8 +210,7 @@ export default @observer class EditServiceForm extends Component {
       isSaving,
       isDeleting,
       onDelete,
-      openDarkmodeCss,
-      isOpeningDarkModeCss,
+      openRecipeFile,
       isProxyFeatureEnabled,
       isServiceProxyIncludedInCurrentPlan,
       isSpellcheckerIncludedInCurrentPlan,
@@ -226,23 +236,6 @@ export default @observer class EditServiceForm extends Component {
       />
     );
 
-    const openDarkmodeCssButton = isOpeningDarkModeCss ? (
-      <Button
-        label={intl.formatMessage(messages.openDarkmodeCss)}
-        loaded={false}
-        buttonType="secondary"
-        className="settings__open-dark-mode-button"
-        disabled
-      />
-    ) : (
-      <Button
-        buttonType="secondary"
-        label={intl.formatMessage(messages.openDarkmodeCss)}
-        className="settings__open-dark-mode-button"
-        onClick={openDarkmodeCss}
-      />
-    );
-
     let activeTabIndex = 0;
     if (recipe.hasHostedOption && service.team) {
       activeTabIndex = 1;
@@ -430,11 +423,39 @@ export default @observer class EditServiceForm extends Component {
               </PremiumFeatureContainer>
             )}
           </form>
+
+          {action === 'edit' && (
+            <>
+              <div className="settings__open-recipe-file-container">
+                <Button
+                  buttonType="secondary"
+                  label={intl.formatMessage(messages.openDarkmodeCss)}
+                  className="settings__open-recipe-file-button"
+                  onClick={() => openRecipeFile('darkmode.css')}
+                />
+                <Button
+                  buttonType="secondary"
+                  label={intl.formatMessage(messages.openUserCss)}
+                  className="settings__open-recipe-file-button"
+                  onClick={() => openRecipeFile('user.css')}
+                />
+                <Button
+                  buttonType="secondary"
+                  label={intl.formatMessage(messages.openUserJs)}
+                  className="settings__open-recipe-file-button"
+                  onClick={() => openRecipeFile('user.js')}
+                />
+              </div>
+              <p style={{ marginTop: 10 }}>
+                <span className="mdi mdi-information" />
+                {intl.formatMessage(messages.recipeFileInfo)}
+              </p>
+            </>
+          )}
         </div>
         <div className="settings__controls">
           {/* Delete Button */}
           {action === 'edit' && deleteButton}
-          {action === 'edit' && openDarkmodeCssButton}
 
           {/* Save Button */}
           {isSaving || isValidatingCustomUrl ? (
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index 99c40b086..a7d33a3ea 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -92,10 +92,6 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
     intl: intlShape,
   };
 
-  state = {
-    isOpeningDarkModeCss: false,
-  }
-
   onSubmit(data) {
     const { action } = this.props.router.params;
     const { recipes, services } = this.props.stores;
@@ -282,25 +278,16 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
     }
   }
 
-  openDarkmodeCss() {
-    const { openDarkmodeCss } = this.props.actions.service;
+  openRecipeFile(file) {
+    const { openRecipeFile } = this.props.actions.service;
     const { action } = this.props.router.params;
 
     if (action === 'edit') {
-      this.setState({
-        isOpeningDarkModeCss: true,
-      });
-
       const { activeSettings: service } = this.props.stores.services;
-      openDarkmodeCss({
+      openRecipeFile({
         recipe: service.recipe.id,
+        file,
       });
-
-      setTimeout(() => {
-        this.setState({
-          isOpeningDarkModeCss: false,
-        });
-      }, 2500);
     }
   }
 
@@ -355,8 +342,7 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
           isDeleting={services.deleteServiceRequest.isExecuting}
           onSubmit={d => this.onSubmit(d)}
           onDelete={() => this.deleteService()}
-          openDarkmodeCss={() => this.openDarkmodeCss()}
-          isOpeningDarkModeCss={this.state.isOpeningDarkModeCss}
+          openRecipeFile={file => this.openRecipeFile(file)}
           isProxyFeatureEnabled={proxyFeature.isEnabled}
           isServiceProxyIncludedInCurrentPlan={proxyFeature.isIncludedInCurrentPlan}
           isSpellcheckerIncludedInCurrentPlan={spellcheckerFeature.isIncludedInCurrentPlan}
@@ -384,7 +370,7 @@ EditServiceScreen.wrappedComponent.propTypes = {
       createService: PropTypes.func.isRequired,
       updateService: PropTypes.func.isRequired,
       deleteService: PropTypes.func.isRequired,
-      openDarkmodeCss: PropTypes.func.isRequired,
+      openRecipeFile: PropTypes.func.isRequired,
     }).isRequired,
     // settings: PropTypes.shape({
     //   update: PropTypes.func.isRequred,
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 44411cdad..0ea45b977 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -2143,263 +2143,302 @@
         }
       },
       {
-        "defaultMessage": "!!!Available services",
+        "defaultMessage": "!!!Open user.css",
         "end": {
           "column": 3,
           "line": 39
         },
         "file": "src/components/settings/services/EditServiceForm.js",
+        "id": "settings.service.form.openUserCss",
+        "start": {
+          "column": 15,
+          "line": 36
+        }
+      },
+      {
+        "defaultMessage": "!!!Open user.js",
+        "end": {
+          "column": 3,
+          "line": 43
+        },
+        "file": "src/components/settings/services/EditServiceForm.js",
+        "id": "settings.service.form.openUserJs",
+        "start": {
+          "column": 14,
+          "line": 40
+        }
+      },
+      {
+        "defaultMessage": "!!!Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.",
+        "end": {
+          "column": 3,
+          "line": 47
+        },
+        "file": "src/components/settings/services/EditServiceForm.js",
+        "id": "settings.service.form.recipeFileInfo",
+        "start": {
+          "column": 18,
+          "line": 44
+        }
+      },
+      {
+        "defaultMessage": "!!!Available services",
+        "end": {
+          "column": 3,
+          "line": 51
+        },
+        "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.availableServices",
         "start": {
           "column": 21,
-          "line": 36
+          "line": 48
         }
       },
       {
         "defaultMessage": "!!!Your services",
         "end": {
           "column": 3,
-          "line": 43
+          "line": 55
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.yourServices",
         "start": {
           "column": 16,
-          "line": 40
+          "line": 52
         }
       },
       {
         "defaultMessage": "!!!Add {name}",
         "end": {
           "column": 3,
-          "line": 47
+          "line": 59
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.addServiceHeadline",
         "start": {
           "column": 22,
-          "line": 44
+          "line": 56
         }
       },
       {
         "defaultMessage": "!!!Edit {name}",
         "end": {
           "column": 3,
-          "line": 51
+          "line": 63
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.editServiceHeadline",
         "start": {
           "column": 23,
-          "line": 48
+          "line": 60
         }
       },
       {
         "defaultMessage": "!!!Hosted",
         "end": {
           "column": 3,
-          "line": 55
+          "line": 67
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.tabHosted",
         "start": {
           "column": 13,
-          "line": 52
+          "line": 64
         }
       },
       {
         "defaultMessage": "!!!Self hosted ⭐️",
         "end": {
           "column": 3,
-          "line": 59
+          "line": 71
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.tabOnPremise",
         "start": {
           "column": 16,
-          "line": 56
+          "line": 68
         }
       },
       {
         "defaultMessage": "!!!Use the hosted {name} service.",
         "end": {
           "column": 3,
-          "line": 63
+          "line": 75
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.useHostedService",
         "start": {
           "column": 20,
-          "line": 60
+          "line": 72
         }
       },
       {
         "defaultMessage": "!!!Could not validate custom {name} server.",
         "end": {
           "column": 3,
-          "line": 67
+          "line": 79
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlValidationError",
         "start": {
           "column": 28,
-          "line": 64
+          "line": 76
         }
       },
       {
         "defaultMessage": "!!!To add self hosted services, you need a Ferdi Premium Supporter Account.",
         "end": {
           "column": 3,
-          "line": 71
+          "line": 83
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlPremiumInfo",
         "start": {
           "column": 24,
-          "line": 68
+          "line": 80
         }
       },
       {
         "defaultMessage": "!!!Upgrade your account",
         "end": {
           "column": 3,
-          "line": 75
+          "line": 87
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlUpgradeAccount",
         "start": {
           "column": 27,
-          "line": 72
+          "line": 84
         }
       },
       {
         "defaultMessage": "!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...",
         "end": {
           "column": 3,
-          "line": 79
+          "line": 91
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.indirectMessageInfo",
         "start": {
           "column": 23,
-          "line": 76
+          "line": 88
         }
       },
       {
         "defaultMessage": "!!!When disabled, all notification sounds and audio playback are muted",
         "end": {
           "column": 3,
-          "line": 83
+          "line": 95
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.isMutedInfo",
         "start": {
           "column": 15,
-          "line": 80
+          "line": 92
         }
       },
       {
         "defaultMessage": "!!!Notifications",
         "end": {
           "column": 3,
-          "line": 87
+          "line": 99
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineNotifications",
         "start": {
           "column": 25,
-          "line": 84
+          "line": 96
         }
       },
       {
         "defaultMessage": "!!!Unread message badges",
         "end": {
           "column": 3,
-          "line": 91
+          "line": 103
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineBadges",
         "start": {
           "column": 18,
-          "line": 88
+          "line": 100
         }
       },
       {
         "defaultMessage": "!!!General",
         "end": {
           "column": 3,
-          "line": 95
+          "line": 107
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineGeneral",
         "start": {
           "column": 19,
-          "line": 92
+          "line": 104
         }
       },
       {
         "defaultMessage": "!!!Delete",
         "end": {
           "column": 3,
-          "line": 99
+          "line": 111
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.iconDelete",
         "start": {
           "column": 14,
-          "line": 96
+          "line": 108
         }
       },
       {
         "defaultMessage": "!!!Drop your image, or click here",
         "end": {
           "column": 3,
-          "line": 103
+          "line": 115
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.iconUpload",
         "start": {
           "column": 14,
-          "line": 100
+          "line": 112
         }
       },
       {
         "defaultMessage": "!!!HTTP/HTTPS Proxy Settings",
         "end": {
           "column": 3,
-          "line": 107
+          "line": 119
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.headline",
         "start": {
           "column": 17,
-          "line": 104
+          "line": 116
         }
       },
       {
         "defaultMessage": "!!!Please restart Ferdi after changing proxy Settings.",
         "end": {
           "column": 3,
-          "line": 111
+          "line": 123
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.restartInfo",
         "start": {
           "column": 20,
-          "line": 108
+          "line": 120
         }
       },
       {
         "defaultMessage": "!!!Proxy settings will not be synchronized with the Ferdi servers.",
         "end": {
           "column": 3,
-          "line": 115
+          "line": 127
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.info",
         "start": {
           "column": 13,
-          "line": 112
+          "line": 124
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 97be15fed..935b8550c 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -374,6 +374,8 @@
   "settings.service.form.isMutedInfo": "When disabled, all notification sounds and audio playback are muted",
   "settings.service.form.name": "Name",
   "settings.service.form.openDarkmodeCss": "Open darkmode.css",
+  "settings.service.form.openUserCss": "Open user.css",
+  "settings.service.form.openUserJs": "Open user.js",
   "settings.service.form.proxy.headline": "HTTP/HTTPS Proxy Settings",
   "settings.service.form.proxy.host": "Proxy Host/IP",
   "settings.service.form.proxy.info": "Proxy settings will not synced with the Ferdi servers.",
@@ -382,6 +384,7 @@
   "settings.service.form.proxy.port": "Port",
   "settings.service.form.proxy.restartInfo": "Please restart Ferdi after changing proxy Settings.",
   "settings.service.form.proxy.user": "User (optional)",
+  "settings.service.form.recipeFileInfo": "Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.",
   "settings.service.form.saveButton": "Save service",
   "settings.service.form.tabHosted": "Hosted",
   "settings.service.form.tabOnPremise": "Self hosted ⭐️",
diff --git a/src/i18n/messages/src/components/settings/services/EditServiceForm.json b/src/i18n/messages/src/components/settings/services/EditServiceForm.json
index f4692ed29..df64c8a5f 100644
--- a/src/i18n/messages/src/components/settings/services/EditServiceForm.json
+++ b/src/i18n/messages/src/components/settings/services/EditServiceForm.json
@@ -39,15 +39,54 @@
     }
   },
   {
+    "id": "settings.service.form.openUserCss",
+    "defaultMessage": "!!!Open user.css",
+    "file": "src/components/settings/services/EditServiceForm.js",
+    "start": {
+      "line": 36,
+      "column": 15
+    },
+    "end": {
+      "line": 39,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.service.form.openUserJs",
+    "defaultMessage": "!!!Open user.js",
+    "file": "src/components/settings/services/EditServiceForm.js",
+    "start": {
+      "line": 40,
+      "column": 14
+    },
+    "end": {
+      "line": 43,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.service.form.recipeFileInfo",
+    "defaultMessage": "!!!Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.",
+    "file": "src/components/settings/services/EditServiceForm.js",
+    "start": {
+      "line": 44,
+      "column": 18
+    },
+    "end": {
+      "line": 47,
+      "column": 3
+    }
+  },
+  {
     "id": "settings.service.form.availableServices",
     "defaultMessage": "!!!Available services",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 36,
+      "line": 48,
       "column": 21
     },
     "end": {
-      "line": 39,
+      "line": 51,
       "column": 3
     }
   },
@@ -56,11 +95,11 @@
     "defaultMessage": "!!!Your services",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 40,
+      "line": 52,
       "column": 16
     },
     "end": {
-      "line": 43,
+      "line": 55,
       "column": 3
     }
   },
@@ -69,11 +108,11 @@
     "defaultMessage": "!!!Add {name}",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 44,
+      "line": 56,
       "column": 22
     },
     "end": {
-      "line": 47,
+      "line": 59,
       "column": 3
     }
   },
@@ -82,11 +121,11 @@
     "defaultMessage": "!!!Edit {name}",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 48,
+      "line": 60,
       "column": 23
     },
     "end": {
-      "line": 51,
+      "line": 63,
       "column": 3
     }
   },
@@ -95,11 +134,11 @@
     "defaultMessage": "!!!Hosted",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 52,
+      "line": 64,
       "column": 13
     },
     "end": {
-      "line": 55,
+      "line": 67,
       "column": 3
     }
   },
@@ -108,11 +147,11 @@
     "defaultMessage": "!!!Self hosted ⭐️",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 56,
+      "line": 68,
       "column": 16
     },
     "end": {
-      "line": 59,
+      "line": 71,
       "column": 3
     }
   },
@@ -121,11 +160,11 @@
     "defaultMessage": "!!!Use the hosted {name} service.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 60,
+      "line": 72,
       "column": 20
     },
     "end": {
-      "line": 63,
+      "line": 75,
       "column": 3
     }
   },
@@ -134,11 +173,11 @@
     "defaultMessage": "!!!Could not validate custom {name} server.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 64,
+      "line": 76,
       "column": 28
     },
     "end": {
-      "line": 67,
+      "line": 79,
       "column": 3
     }
   },
@@ -147,11 +186,11 @@
     "defaultMessage": "!!!To add self hosted services, you need a Ferdi Premium Supporter Account.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 68,
+      "line": 80,
       "column": 24
     },
     "end": {
-      "line": 71,
+      "line": 83,
       "column": 3
     }
   },
@@ -160,11 +199,11 @@
     "defaultMessage": "!!!Upgrade your account",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 72,
+      "line": 84,
       "column": 27
     },
     "end": {
-      "line": 75,
+      "line": 87,
       "column": 3
     }
   },
@@ -173,11 +212,11 @@
     "defaultMessage": "!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 76,
+      "line": 88,
       "column": 23
     },
     "end": {
-      "line": 79,
+      "line": 91,
       "column": 3
     }
   },
@@ -186,11 +225,11 @@
     "defaultMessage": "!!!When disabled, all notification sounds and audio playback are muted",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 80,
+      "line": 92,
       "column": 15
     },
     "end": {
-      "line": 83,
+      "line": 95,
       "column": 3
     }
   },
@@ -199,11 +238,11 @@
     "defaultMessage": "!!!Notifications",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 84,
+      "line": 96,
       "column": 25
     },
     "end": {
-      "line": 87,
+      "line": 99,
       "column": 3
     }
   },
@@ -212,11 +251,11 @@
     "defaultMessage": "!!!Unread message badges",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 88,
+      "line": 100,
       "column": 18
     },
     "end": {
-      "line": 91,
+      "line": 103,
       "column": 3
     }
   },
@@ -225,11 +264,11 @@
     "defaultMessage": "!!!General",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 92,
+      "line": 104,
       "column": 19
     },
     "end": {
-      "line": 95,
+      "line": 107,
       "column": 3
     }
   },
@@ -238,11 +277,11 @@
     "defaultMessage": "!!!Delete",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 96,
+      "line": 108,
       "column": 14
     },
     "end": {
-      "line": 99,
+      "line": 111,
       "column": 3
     }
   },
@@ -251,11 +290,11 @@
     "defaultMessage": "!!!Drop your image, or click here",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 100,
+      "line": 112,
       "column": 14
     },
     "end": {
-      "line": 103,
+      "line": 115,
       "column": 3
     }
   },
@@ -264,11 +303,11 @@
     "defaultMessage": "!!!HTTP/HTTPS Proxy Settings",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 104,
+      "line": 116,
       "column": 17
     },
     "end": {
-      "line": 107,
+      "line": 119,
       "column": 3
     }
   },
@@ -277,11 +316,11 @@
     "defaultMessage": "!!!Please restart Ferdi after changing proxy Settings.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 108,
+      "line": 120,
       "column": 20
     },
     "end": {
-      "line": 111,
+      "line": 123,
       "column": 3
     }
   },
@@ -290,11 +329,11 @@
     "defaultMessage": "!!!Proxy settings will not be synchronized with the Ferdi servers.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 112,
+      "line": 124,
       "column": 13
     },
     "end": {
-      "line": 115,
+      "line": 127,
       "column": 3
     }
   }
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index e38b82f03..ae6ba11c5 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -58,7 +58,7 @@ export default class ServicesStore extends Store {
     this.actions.service.createFromLegacyService.listen(this._createFromLegacyService.bind(this));
     this.actions.service.updateService.listen(this._updateService.bind(this));
     this.actions.service.deleteService.listen(this._deleteService.bind(this));
-    this.actions.service.openDarkmodeCss.listen(this._openDarkmodeCss.bind(this));
+    this.actions.service.openRecipeFile.listen(this._openRecipeFile.bind(this));
     this.actions.service.clearCache.listen(this._clearCache.bind(this));
     this.actions.service.setWebviewReference.listen(this._setWebviewReference.bind(this));
     this.actions.service.detachService.listen(this._detachService.bind(this));
@@ -334,7 +334,7 @@ export default class ServicesStore extends Store {
     this.actionStatus = request.result.status;
   }
 
-  @action async _openDarkmodeCss({ recipe }) {
+  @action async _openRecipeFile({ recipe, file }) {
     // Get directory for recipe
     const normalDirectory = getRecipeDirectory(recipe);
     const devDirectory = getDevRecipeDirectory(recipe);
@@ -349,10 +349,10 @@ export default class ServicesStore extends Store {
       return;
     }
 
-    // Create and open darkmode.css
-    const file = path.join(directory, 'darkmode.css');
-    await fs.ensureFile(file);
-    shell.showItemInFolder(file);
+    // Create and open file
+    const filePath = path.join(directory, file);
+    await fs.ensureFile(filePath);
+    shell.showItemInFolder(filePath);
   }
 
   @action async _clearCache({ serviceId }) {
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 305450fd2..14cc91f87 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -306,7 +306,15 @@
   }
 
   .settings__delete-button { right: 0; }
-  .settings__open-dark-mode-button { right: 0; cursor:pointer; }
+  .settings__open-recipe-file-button {
+    cursor:pointer; 
+    margin-right: 10px;
+  }
+  .settings__open-recipe-file-container {
+    margin-top: 20px;
+    display: flex;
+    height: auto !important;
+  }
 
   .settings__empty-state {
     align-items: center;
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index e95cae18b..1a22542d8 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -99,6 +99,39 @@ class RecipeController {
     } catch (err) {
       console.error('Recipe initialization failed', err);
     }
+
+    this.loadUserFiles(recipe, config);
+  }
+
+  async loadUserFiles(recipe, config) {
+    const userCss = path.join(recipe.path, 'user.css');
+    if (await fs.exists(userCss)) {
+      const data = await fs.readFile(userCss);
+      const styles = document.createElement('style');
+      styles.innerHTML = data.toString();
+
+      document.querySelector('head').appendChild(styles);
+    }
+
+    const userJs = path.join(recipe.path, 'user.js');
+    if (await fs.exists(userJs)) {
+      const loadUserJs = () => {
+        // eslint-disable-next-line
+        const userJsModule = require(userJs);
+
+        if (typeof userJsModule === 'function') {
+          userJsModule(config);
+        }
+      };
+
+      if (document.readyState !== 'loading') {
+        loadUserJs();
+      } else {
+        document.addEventListener('DOMContentLoaded', () => {
+          loadUserJs();
+        });
+      }
+    }
   }
 
   update() {