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>

1 files changed, 33 insertions, 0 deletions

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() {