Update mods

instance/pleroma-mods/pleroma-mod-catify/mod.js

@@ -1,14 +1,17 @@
-function ColorDetector (image) {
-  this.color = { r: 0, g: 0, b: 0 };
-  this.image = image;
-}
-[
-  function componentToHex (c) {
-    var hex = Math.max(Math.min(c, 255), 0).toString(16);
+/* global PleromaMod */
+
+class ColorDetector {
+  constructor (image) {
+    this.color = { r: 0, g: 0, b: 0 };
+    this.image = image;
+  }
+
+  componentToHex (c) {
+    const hex = Math.max(Math.min(c, 255), 0).toString(16);
     return hex.length === 1 ? "0" + hex : hex;
-  },
+  }
 
-  function getHexColor (offset) {
+  getHexColor (offset) {
     if (!offset) {
       offset = { r: 0, g: 0, b: 0 };
     }
@@ -16,40 +19,39 @@ function ColorDetector (image) {
       this.componentToHex(this.color.r + offset.r) +
       this.componentToHex(this.color.g + offset.g) +
       this.componentToHex(this.color.b + offset.b);
-  },
+  }
 
-  function detect () {
+  detect () {
     return new Promise((resolve) => {
-      let blockSize = 5;
+      const blockSize = 5;
       const canvas = document.createElement("canvas");
       const context = canvas.getContext && canvas.getContext("2d");
-      let data; let width; let height;
-      let i = -4;
-      let rgb = { r: 0, g: 0, b: 0 };
-      let length;
-      let count = 0;
+
       if (!context) {
         console.warn("can't get context of avatar");
         resolve(this.color);
         return;
       }
 
-      height = canvas.height = this.image.naturalHeight || this.image.offsetHeight || this.image.height;
-      width = canvas.width = this.image.naturalWidth || this.image.offsetWidth || this.image.width;
+      const height = canvas.height = this.image.naturalHeight || this.image.offsetHeight || this.image.height;
+      const width = canvas.width = this.image.naturalWidth || this.image.offsetWidth || this.image.width;
 
       context.drawImage(this.image, 0, 0);
 
+      let data;
       try {
         data = context.getImageData(0, 0, width, height);
       } catch (e) {
-        console.error("can't get image data");
+        console.error("can't get avatar image data");
         console.error(e);
         resolve(this.color);
         return;
       }
 
-      length = data.data.length;
-
+      let i = -4;
+      let count = 0;
+      const length = data.data.length;
+      const rgb = { r: 0, g: 0, b: 0 };
       while ((i += blockSize * 4) < length) {
         ++count;
         rgb.r += data.data[i];
@@ -64,103 +66,96 @@ function ColorDetector (image) {
       resolve(this.color);
     });
   }
-].forEach((fn) => { ColorDetector.prototype[fn.name] = fn; });
-
-function PleromaCat (handle, type) {
-  this.type = type || "cat";
-  this.handle = handle;
-  this.colors = {
-    backgroundColor: "#000000",
-    borderColor: "#000000"
-  };
-  this.config = {
-    "nya": {
-      enabled: true,
-      matcher: "(^|\s|>)な+(\s|<|$)", // eslint-disable-line no-useless-escape
-      replacer: {
-        source: "な",
-        dest: "にゃ"
-      }
-    }
-  };
-  this.loadConfig();
 }
-[
-  function loadConfig () {
-    const json = PleromaModCatify.config;
+
+class PleromaCat {
+  constructor (handle, type, config) {
+    config = config || {};
+    this.type = type || "cat";
+    this.handle = handle;
+    this.colors = {
+      backgroundColor: "#000000",
+      borderColor: "#000000"
+    };
+
+    this.config = {
+      "nya": {
+        enabled: false,
+        replacer: {}
+      }
+    };
+
+    this.loadConfig(config);
+  }
+
+  loadConfig (json) {
     if (!json.nya) {
       return;
     }
+
     this.config.nya.enabled = json.nya.enabled;
     if (this.config.nya.enabled) {
       this.config.nya.matcher = json.nya.matcher || this.config.nya.matcher;
       this.config.nya.replacer.source = json.nya.replacer.source || this.config.nya.replacer.source;
       this.config.nya.replacer.dest = json.nya.replacer.dest || this.config.nya.replacer.dest;
     }
-  },
+  }
 
-  function getClassName () {
+  getClassName () {
     return "USER____" + this.handle.replace(/@/g, "_AT_").replace(/\./g, "_");
-  },
+  }
 
-  function makeCat (element) {
-    if (!element) {
-      element = document;
-    }
+  makeCat (element) {
+    element = element || document;
     if (element.querySelectorAll) {
-      var posts = element.querySelectorAll("." + this.getClassName());
+      const posts = element.querySelectorAll("." + this.getClassName());
       this.makeCatByClassName("user-info");
-      this.makeCatByClassName("basic-user-card", "basic-user-card-screen-name");
-      for (const currentPost of posts) {
+      this.makeCatByClassName("basic-user-card");
+      posts.forEach((currentPost) => {
         this.makeCatByElement(currentPost);
         this.nyaByPost(currentPost);
-      }
+      });
     }
-  },
+  }
 
-  function makeCatByClassName (className, usernameClass) {
-    if (!className) {
-      className = "user-info";
-    }
-    if (!usernameClass) {
-      usernameClass = "user-screen-name";
-    }
-    const userinfos = document.querySelectorAll("." + className);
-    for (const infoIndex in userinfos) {
-      if (userinfos[infoIndex].querySelector && !/cat$/.test(userinfos[infoIndex].innerText)) {
-        const handle = userinfos[infoIndex].querySelector("." + usernameClass);
+  makeCatByClassName (className, usernameClass) {
+    className = className || "user-info";
+    usernameClass = usernameClass || "user-screen-name";
+    const userInfos = document.querySelectorAll("." + className);
+    userInfos.forEach((userInfo) => {
+      if (userInfo.querySelector && !/cat$/.test(userInfo.innerText)) {
+        const handle = userInfo.querySelector("." + usernameClass);
         const regexHandle = new RegExp(this.handle, "i");
         if (handle) {
           if (regexHandle.test(handle.innerText)) {
-            this.makeCatByElement(userinfos[infoIndex]);
+            this.makeCatByElement(userInfo);
           }
         }
       }
-    }
-  },
+    });
+  }
 
-  function makeCatByElement (element) {
+  makeCatByElement (element) {
     if (element.querySelectorAll) {
       element.classList.add("catified");
       element.classList.add(this.type);
       const avatars = element.querySelectorAll(".Avatar");
-      for (const avatarIndex in avatars) {
-        const currentAvatar = avatars[avatarIndex];
-        if (currentAvatar.style) {
+      avatars.forEach((avatar) => {
+        if (avatar.style) {
           if (this.colors.borderColor === "#000000") {
-            this.detectColors(currentAvatar);
+            this.detectColors(avatar);
           }
-          currentAvatar.style.backgroundColor = this.colors.backgroundColor;
-          currentAvatar.style.borderColor = this.colors.borderColor;
+          avatar.style.backgroundColor = this.colors.backgroundColor;
+          avatar.style.borderColor = this.colors.borderColor;
         }
-      }
+      });
     }
-  },
+  }
 
-  function nyaByPost (element) {
+  nyaByPost (element) {
     if (element.querySelectorAll && this.config.nya.enabled && element.classList.contains("cat")) {
-      const contents = element.querySelectorAll(".status-content");
-      for (const content of contents) {
+      const contents = element.querySelectorAll(".StatusContent");
+      contents.forEach((content) => {
         if (content.innerHTML) {
           const regex = new RegExp(this.config.nya.matcher, "g");
           let match;
@@ -173,69 +168,75 @@ function PleromaCat (handle, type) {
             content.innerHTML = content.innerHTML.replace(source, dest);
           }
         }
-      }
+      });
     }
-  },
+  }
 
-  function detectColors (avatarElement) {
-    const images = avatarElement.querySelectorAll("img");
-    for (const imageIndex in images) {
-      images[imageIndex].crossOrigin = "anonymous";
+  detectColors (avatar) {
+    const images = avatar.querySelectorAll("img");
+    images.forEach((image) => {
+      image.crossOrigin = "anonymous";
       const colorAvatar = () => {
-        const detector = new ColorDetector(images[imageIndex]);
+        const detector = new ColorDetector(image);
         detector.detect().then((color) => {
           this.colors.backgroundColor = detector.getHexColor();
           this.colors.borderColor = detector.getHexColor({ r: -40, g: -40, b: -40 });
-          avatarElement.style.backgroundColor = this.colors.backgroundColor;
-          avatarElement.style.borderColor = this.colors.borderColor;
+          avatar.style.backgroundColor = this.colors.backgroundColor;
+          avatar.style.borderColor = this.colors.borderColor;
         });
       };
-      if (images[imageIndex].complete) {
+
+      if (image.complete) {
         colorAvatar();
       } else {
-        images[imageIndex].onload = colorAvatar;
+        image.onload = colorAvatar;
       }
-      return;
-    }
+    });
   }
-].forEach((fn) => { PleromaCat.prototype[fn.name] = fn; });
-
-function PleromaModCatify () {
-  this.animals = {};
-  this.config = {
-    stylesheet: "style.css",
-    triggers: {
-      cat: {
-        displayName: [
-          "🐱",
-          "😺",
-          "🐈",
-          "😼",
-          "😹",
-          "にゃ",
-          "cat",
-          "mew",
-          "meow",
-          "nya",
-          "miaou",
-          "kitten",
-          "kitn",
-          "ktn",
-          "kadse",
-          "catte"
-        ],
-        instances: [
-          "misskey.io"
+}
+
+class PleromaModCatify extends PleromaMod {
+  constructor () {
+    super("pleroma-mod-catify");
+    this.animals = {};
+    this.config = {
+      includes: {
+        css: [
+          "style.css"
         ]
       },
-      bear: {
-        displayName: [
-          "🐻"
-        ],
-        instances: []
-      },
-      rabbit: {
-        displayName: [
+      triggers: {
+        cat: {
+          displayName: [
+            "🐱",
+            "😺",
+            "🐈",
+            "😼",
+            "😹",
+            "にゃ",
+            "cat",
+            "mew",
+            "meow",
+            "nya",
+            "miaou",
+            "kitten",
+            "kitn",
+            "ktn",
+            "kadse",
+            "catte"
+          ],
+          instances: [
+            "misskey.io"
+          ]
+        },
+        bear: {
+          displayName: [
+            "🐻"
+          ],
+          instances: []
+        },
+        rabbit: {
+          displayName: [
             "🐰",
             "🐇",
             "rabbit",
@@ -243,65 +244,98 @@ function PleromaModCatify () {
             "hase",
             "häschen",
             "kaninchen"
-        ],
-        instances: []
-      }
-    },
-    filter: [
-      "user-info",
-      "timeline",
-      "Conversation",
-      "panel-body",
-      "main",
-      "active",
-      "status-body"
-    ]
-  };
-
-  this.loadConfig();
-}
-[
-  function loadConfig () {
-    window.fetch(PleromaModLoader.getModDir() + "pleroma-mod-catify/config.json").then((response) => {
-      if (response.ok) {
-        response.json().then((json) => {
-          PleromaModCatify.config = json;
-          for (const type in json.triggers) {
-            this.config.triggers[type] = {};
-            this.config.triggers[type].displayName = json.triggers[type].displayName || [];
-            this.config.triggers[type].instances = json.triggers[type].instances || [];
-          }
-        }).catch((error) => {
-          console.error("can't parse catify config");
-          console.error(error);
-        });
-      }
-    }).catch((error) => {
-      console.warn("can't load catify config");
-      console.warn(error);
+          ],
+          instances: []
+        }
+      },
+      nya: {
+        enabled: false
+      },
+      filter: [
+        "user-info",
+        "timeline",
+        "Conversation",
+        "panel-body",
+        "main",
+        "active",
+        "status-body"
+      ]
+    };
+  }
+
+  onSettingInit (key, ul, li) {
+    if (key === "nya") {
+      const label = document.createElement("label");
+      label.classList.add("checkbox");
+
+      const input = document.createElement("input");
+      input.setAttribute("type", "checkbox");
+      input.checked = this.config.nya.enabled;
+      input.addEventListener("change", (event) => {
+        if (event.target.checked) {
+          this.config.nya.enabled = true;
+        } else {
+          this.config.nya.enabled = false;
+        }
+        this.saveConfig();
+      });
+      label.appendChild(input);
+
+      const fakeCheckbox = document.createElement("i");
+      fakeCheckbox.classList.add("checkbox-indicator");
+      label.appendChild(fakeCheckbox);
+
+      const text = document.createElement("span");
+      text.classList.add("label");
+      text.innerText = "enable nyanification of posts";
+      label.appendChild(text);
+
+      li.appendChild(label);
+      ul.appendChild(li);
+    }
+  }
+
+  onConfigLoad () {
+    return new Promise((resolve) => {
+      this.fetchJson("config.json").then((json) => {
+        resolve(json);
+      }).catch((error) => {
+        console.error("can't parse catify config");
+        console.error(error);
+        resolve({});
+      });
     });
-  },
+  }
 
-  function onMutation (mutation, observer) {
-    if (mutation.target.classList.contains("user-info")) {
-      mutation.target.classList.remove("catified");
-      for (const type in this.config.triggers) {
-        mutation.target.classList.remove(type);
-      }
+  onMutation (mutation, observer) {
+    const component = PleromaModLoader.getVueComponent(mutation.target);
+    if (component) {
+      this.isCat(component.user);
     }
+    mutation.addedNodes.forEach((node) => {
+      const nodeComp = PleromaModLoader.getVueComponent(node);
+      if (nodeComp) {
+        if (nodeComp.user) {
+          this.isCat(nodeComp.user);
+        }
+        if (nodeComp.status) {
+          this.isCat(nodeComp.status.user);
+        }
+      }
+    });
     this.detectCats();
     for (const element of mutation.addedNodes) {
       this.catify(element);
     }
-  },
+  }
 
-  function onReady () {
+  onRun () {
     this.areYouACat();
     this.detectCats();
     this.catify();
-  },
+  }
 
-  function onDestroy () {
+  onDestroy () {
     const allCats = document.querySelectorAll(".catified");
     for (const cat of allCats) {
       cat.classList.remove("catified");
@@ -309,81 +343,83 @@ function PleromaModCatify () {
         cat.classList.remove(type);
       }
     }
-  },
-
-  function run () {
-    PleromaModLoader.includeModCss("pleroma-mod-catify/" + this.config.stylesheet);
-  },
+  }
 
-  function addCat (handle, type) {
+  addCat (handle, type) {
     if (type == null) {
       type = "cat";
     }
     handle = handle.trim();
     if (!this.animals[handle]) {
-      this.animals[handle] = new PleromaCat(handle, type);
+      this.animals[handle] = new PleromaCat(handle, type, this.config);
     }
-  },
+  }
 
-  function areYouACat () {
-    const profile = document.querySelector(".user-card");
-    for (const type in this.config.triggers) {
+  isCat (user) {
+    if (!user) {
+      return false;
+    }
+    let result = false;
+    Object.keys(this.config.triggers).forEach((type) => {
       const pattern = this.config.triggers[type].displayName.join("|");
       const regex = new RegExp(pattern, "i");
-      if (profile) {
-        const username = profile.querySelector(".user-name");
-        if (username) {
-          if (regex.test(username.innerText)) {
-            const accountName = profile.querySelector(".user-screen-name");
-            if (accountName) {
-              this.addCat(accountName.innerText.substring(1), type);
-            }
-          }
-        }
+      if (regex.test(user.name)) {
+        this.addCat(user.screen_name, type);
+        result = true;
+        return;
       }
+      if (regex.test(user.screen_name)) {
+        this.addCat(user.screen_name, type);
+        result = true;
+        return;
+      }
+      user.fields.forEach((field) => {
+        if (regex.test(field.name) || regex.test(field.value)) {
+          this.addCat(user.screen_name, type);
+          result = true;
+        }
+      });
+    });
+    return result;
+  }
+
+  areYouACat () {
+    const profile = document.querySelector(".user-card");
+    const cmp = PleromaModLoader.getVueComponent(profile);
+    if (cmp) {
+      this.isCat(cmp.user);
     }
-  },
+  }
 
-  function detectCatsByClassName (classname, usernameClass, accountnameClass) {
+  detectCatsByClassName (classname) {
     classname = classname || "status-container";
-    usernameClass = usernameClass || "status-username";
-    accountnameClass = accountnameClass || "account-name";
-    const nameAndAccountNames = document.querySelectorAll("." + classname);
-    for (const type in this.config.triggers) {
-      const regexName = new RegExp(this.config.triggers[type].displayName.join("|"), "i");
-      const regexInstance = new RegExp(this.config.triggers[type].instances.join("|"), "i");
-      for (const currentAccount of nameAndAccountNames) {
-        if (currentAccount.querySelector) {
-          let isCat = false;
-          const username = currentAccount.querySelector("." + usernameClass);
-          if (username && this.config.triggers[type].displayName.length > 0) {
-            isCat = regexName.test(username.innerText);
-          }
-          const account = currentAccount.querySelector("." + accountnameClass);
-          if (account) {
-            const handle = account.innerText;
-            if (this.config.triggers[type].instances.length > 0) {
-              isCat = isCat || regexInstance.test(handle);
-            }
-            if (isCat) {
-              this.addCat(handle, type);
-            }
-          }
+    const hits = document.querySelectorAll("." + classname);
+    hits.forEach((hit) => {
+      if (hit.classList.contains("catified")) {
+        return;
+      }
+      const cmp = PleromaModLoader.getVueComponent(hit);
+      if (cmp) {
+        if (cmp.user) {
+          this.isCat(cmp.user);
+        }
+        if (cmp.status) {
+          this.isCat(cmp.status.user);
         }
       }
-    }
-  },
+    });
+  }
 
-  function detectCats () {
+  detectCats () {
     this.detectCatsByClassName("status-container");
-    this.detectCatsByClassName("basic-user-card", "basic-user-card-user-name-value", "basic-user-card-screen-name");
-  },
+    this.detectCatsByClassName("basic-user-card");
+  }
 
-  function catify (element) {
+  catify (element) {
     for (const catKey in this.animals) {
       this.animals[catKey].makeCat(element);
     }
   }
-].forEach((fn) => { PleromaModCatify.prototype[fn.name] = fn; });
+}
 
 PleromaModLoader.registerMod(PleromaModCatify);

static/pleroma-mod-loader.js

@@ -1,80 +1,78 @@
-function PleromaModLoader () {
-  this.config = {
-    "modDirectory": "/instance/pleroma-mods/",
-    "mods": []
-  };
-  this.loadConfig();
-  this.loadedMods = {};
-  this.classes = {};
-}
-[
-  function loadMods () {
-    for (const mod of this.config.mods) {
-      const modObject = new PleromaMod(mod);
-      modObject.enabled = true;
-      if (localStorage.getItem("pleroma_mod_" + mod + "_enabled") === "false") {
-        modObject.enabled = false;
-      }
-      localStorage.setItem("pleroma_mod_" + mod + "_enabled", modObject.enabled);
-      modObject.include();
-      this.loadedMods[mod] = modObject;
-    }
-  },
+class PleromaModLoader {
+  constructor () {
+    this.config = {
+      "modDirectory": "/instance/pleroma-mods/",
+      "mods": []
+    };
+    this.loadConfig();
+    this.loadedMods = {};
+    this.classes = {};
+  }
+
+  loadMods () {
+    this.config.mods.forEach((mod) => {
+      this.loadMod(mod);
+    });
+  }
+
+  loadMod (modName) {
+    return PleromaModLoader.includeScript(
+      this.config.modDirectory + "pleroma-mod-" + modName + "/mod.js"
+    ).then(() => {
+      this.loadedMods[modName] = new this.classes[PleromaModLoader.getClassName(modName)]();
+    });
+  }
 
-  function loadConfig () {
+  loadConfig () {
     window.fetch("/instance/pleroma-mod-config.json").then((response) => {
-      if (response.ok) {
-        response.json().then((json) => {
-          for (const key in json) {
-            this.config[key] = json[key];
-          }
-          this.loadMods();
-        }).catch((error) => {
-          console.error("can't parse loader config");
-          console.error(error);
-        });
-      }
+      return response.json();
+    }).then((json) => {
+      Object.keys(json).forEach((key) => {
+        this.config[key] = json[key];
+      });
+      this.loadMods();
     }).catch((error) => {
-      console.warn("can't load mod loader config");
-      console.warn(error);
+      console.error("can't load loader config");
+      console.error(error);
     });
-  },
+  }
 
-  function registerClass (className, object) {
+  registerClass (className, object) {
     this.classes[className] = object;
-  },
-
-  function waitUntilReady () {
-    const postPanel = document.getElementsByClassName("post-status-form");
-    const loginPanel = document.getElementsByClassName("login-form");
-    if (postPanel.length > 0 || loginPanel.length > 0) {
-      for (var modName in this.loadedMods) {
-        const settings = document.querySelector(".settings div[label]:first-child");
+  }
+
+  waitUntilReady () {
+    const postPanel = document.querySelector(".status-container");
+    const loginPanel = document.querySelector(".login-form");
+    if (postPanel || loginPanel) {
+      Object.keys(this.loadedMods).forEach((modName) => {
+        const settings = document.querySelector(".settings-modal div[label]:first-child");
         if (settings) {
           if (!settings.querySelector(".mod-settings")) {
             this.appendModSettings(settings);
           }
         }
+
         const mod = this.loadedMods[modName];
-        if (mod.enabled && mod.instance) {
-          if (mod.instance.onReady) {
-            mod.instance.onReady();
-          }
+        if (mod.isEnabled) {
+          mod.ready();
         }
-      }
+      });
+
       this.createObserver();
     } else {
+      console.warn("not ready, trying again in 1s");
       window.setTimeout(() => { this.waitUntilReady(); }, 1000);
     }
-  },
+  }
 
-  function createCheckbox (label, mod) {
+  createCheckbox (label, mod) {
     const labelElement = document.createElement("label");
     labelElement.classList.add("checkbox");
 
     const input = document.createElement("input");
     input.setAttribute("type", "checkbox");
-    input.checked = mod.enabled;
+    input.checked = mod.isEnabled;
     input.addEventListener("change", (event) => {
       if (event.target.checked) {
         mod.enable();
@@ -91,41 +89,51 @@ function PleromaModLoader () {
     const text = document.createElement("span");
     text.classList.add("label");
     text.innerText = label;
-
     labelElement.appendChild(text);
 
     return labelElement;
-  },
+  }
 
-  function appendModSettings (element) {
+  appendModSettings (element) {
     const container = document.createElement("div");
     container.classList.add("setting-item");
     container.classList.add("mod-settings");
 
     const title = document.createElement("h2");
-    title.innerText = "Mods";
+    title.innerText = "Pleroma Mods";
     container.appendChild(title);
 
     const optionList = document.createElement("ul");
     optionList.classList.add("setting-list");
 
-    const modNames = Object.keys(this.loadedMods).sort();
-    for (const mod of modNames) {
+    Object.keys(this.loadedMods).sort().forEach((modName) => {
       const li = document.createElement("li");
 
-      const enable = this.createCheckbox("enable " + mod, this.loadedMods[mod]);
-
+      const enable = this.createCheckbox("enable " + modName, this.loadedMods[modName]);
       li.appendChild(enable);
 
+      const ulConfig = document.createElement("ul");
+      ulConfig.classList.add("setting-list");
+
+      Object.keys(this.loadedMods[modName].config).forEach((key) => {
+        if (key === "includes" || key === "filter") {
+          return;
+        }
+
+        this.loadedMods[modName].onSettingInit(key, ulConfig, document.createElement("li"));
+      });
+
+      li.appendChild(ulConfig);
+
       optionList.appendChild(li);
-    }
+    });
 
     container.appendChild(optionList);
 
     element.appendChild(container);
-  },
+  }
 
-  function createObserver () {
+  createObserver () {
     this.containers = {
       main: document.querySelector(".main"),
       notifications: document.querySelector(".notifications"),
@@ -133,33 +141,26 @@ function PleromaModLoader () {
       settingsModal: document.querySelector(".settings-modal")
     };
 
-    const observerConfig = { subtree: true, childList: true };
+    const observerConfig = {
+      subtree: true,
+      childList: true
+    };
+
     this.observer = new MutationObserver((mutations, observer) => {
-      if (
-        mutations.length > 0 &&
-        mutations[0].addedNodes.length > 0 &&
-        mutations[0].addedNodes[0].classList &&
-        mutations[0].addedNodes[0].classList.contains("settings_tab-switcher")
-      ) {
-        this.appendModSettings(mutations[0].addedNodes[0].querySelector("div[label]:first-child"));
+      const modal = document.querySelector(".settings-modal div[label]:first-child");
+      if (modal && !modal.querySelector(".mod-settings")) {
+        this.appendModSettings(modal);
       }
-      for (var modName in this.loadedMods) {
-        const mod = this.loadedMods[modName];
-        if (mod.instance && mod.enabled) {
-          if (mod.instance.onMutation) {
-            for (const mutation of mutations) {
-              let filter = null;
-              if (mod.instance.config.filter) {
-                filter = new RegExp(mod.instance.config.filter.join("|"));
-              }
-              if (!filter || filter.test(mutation.target.className)) {
-                mod.instance.onMutation(mutation, observer);
-              }
-            }
-          }
+
+      Object.values(this.loadedMods).forEach((mod) => {
+        if (mod.isEnabled) {
+          mutations.forEach((mutation) => {
+            mod.mutate(mutation, observer);
+          });
         }
-      }
+      });
     });
+
     this.observer.observe(this.containers.main, observerConfig);
     if (this.containers.notifications) {
       this.observer.observe(this.containers.notifications, observerConfig);
@@ -171,155 +172,306 @@ function PleromaModLoader () {
       this.observer.observe(this.containers.settingsModal, observerConfig);
     }
   }
-].forEach((fn) => { PleromaModLoader.prototype[fn.name] = fn; });
-[
-  function registerMod (mod) {
-    window.__pleromaModLoader.registerClass(mod.name, mod);
-  },
-
-  function includeModScript (src) {
-    return PleromaModLoader.includeScript(window.__pleromaModLoader.config.modDirectory + src);
-  },
-
-  function includeModCss (src) {
-    return PleromaModLoader.includeCss(window.__pleromaModLoader.config.modDirectory + src);
-  },
 
-  function excludeModScript (src) {
-    return PleromaModLoader.excludeScript(window.__pleromaModLoader.config.modDirectory + src);
-  },
-
-  function excludeModCss (src) {
-    return PleromaModLoader.excludeCss(window.__pleromaModLoader.config.modDirectory + src);
-  },
+  static registerMod (mod) {
+    window.__pleromaModLoader.registerClass(mod.name, mod);
+  }
 
-  function includeScript (src) {
+  static includeScript (src) {
+    console.log("include " + src);
     return new Promise((resolve) => {
-      const body = document.getElementsByTagName("body")[0];
       const script = document.createElement("script");
       script.setAttribute("src", src);
       script.setAttribute("type", "text/javascript");
-      script.onload = () => { resolve(); };
-      body.appendChild(script);
+      script.onload = () => {
+        resolve();
+      };
+      document.querySelector("body").appendChild(script);
     });
-  },
-
-  function getVueScope (element) {
-    if (!element) {
-      return null;
-    }
-    if (element.__vue__) {
-      return element.__vue__;
-    }
-    if (element.parentNode) {
-      return PleromaModLoader.getVueScope(element.parentNode);
-    }
-    return null;
-  },
-
-  function getRootVueScope () {
-    return document.querySelector("#app").__vue__;
-  },
+  }
 
-  function includeCss (src) {
+  static includeCss (src) {
+    console.log("include " + src);
     return new Promise((resolve) => {
-      const head = document.getElementsByTagName("head")[0];
       const link = document.createElement("link");
       link.setAttribute("href", src);
       link.setAttribute("rel", "stylesheet");
       link.setAttribute("type", "text/css");
-      link.onload = () => { resolve(); };
-      head.appendChild(link);
+      link.onload = () => {
+        resolve();
+      };
+      document.querySelector("head").appendChild(link);
     });
-  },
+  }
 
-  function excludeScript (src) {
+  static excludeScript (src) {
     return new Promise((resolve) => {
-      const script = document.querySelector('script[src="' + src + '"]');
-      if(script) {
+      const script = document.querySelector("script[src=\"" + src + "\"]");
+      if (script) {
         script.remove();
       }
       resolve();
     });
-  },
+  }
 
-  function excludeCss (src) {
+  static excludeCss (src) {
     return new Promise((resolve) => {
-      const link = document.querySelector('link[href="' + src + '"]');
-      if(link) {
+      const link = document.querySelector("link[href=\"" + src + "\"]");
+      if (link) {
         link.remove();
       }
       resolve();
     });
-  },
+  }
 
-  function getToken () {
-    return PleromaModLoader.getRootVueScope().$store._vm.getUserToken();
-  },
+  static getVueScope (element) {
+    if (!element) {
+      return null;
+    }
+    if (element.__vue__) {
+      console.warn("old vue version, please update pleroma-fe");
+      return element.__vue__;
+    }
+    if (element._vnode) {
+      return element._vnode;
+    }
+    if (element.__vnode) {
+      return element.__vnode;
+    }
+    if (element.parentNode) {
+      return PleromaModLoader.getVueScope(element.parentNode);
+    }
+    return null;
+  }
 
-  function getModDir () {
+  static getVueComponent (element) {
+    if (!element) {
+      return null;
+    }
+    if (element.__vnode && element.__vnode.component) {
+      return element.__vnode.component;
+    }
+    if (element.__vueParentComponent) {
+      return element.__vueParentComponent.ctx;
+    }
+    if (element.__vueComponent__) {
+      return element.__vueComponent__;
+    }
+    if (element.parentNode) {
+      return PleromaModLoader.getVueComponent(element.parentNode);
+    }
+    return null;
+  }
+
+  static getRootVueScope () {
+    return PleromaModLoader.getVueScope(document.querySelector("#app"));
+  }
+
+  static getToken () {
+    return PleromaModLoader.getRootVueScope().appContext.provides.store.getters.getUserToken();
+  }
+
+  static getModDir () {
     return window.__pleromaModLoader.config.modDirectory;
   }
-].forEach((fn) => { PleromaModLoader[fn.name] = fn; });
 
-function PleromaMod (name) {
-  this.name = name;
-  this.instance = null;
-  this.enabled = localStorage.getItem("pleroma_mod_" + this.name + "_enabled") !== "false";
-}
-[
-  function getClassName () {
+  static getClassName (name) {
     let className = "PleromaMod";
-    const nameParts = this.name.split("-");
-    for (const namePart of nameParts) {
+    name.split("-").forEach((namePart) => {
       className += namePart.substring(0, 1).toUpperCase();
       className += namePart.substring(1);
-    }
+    });
     return className;
-  },
+  }
 
-  function enable () {
-    this.enabled = true;
-    this.modLoaded();
-    if (this.instance.onReady) {
-      this.instance.onReady();
+  static api (method, path, params) {
+    return new Promise((resolve, reject) => {
+      const token = PleromaModLoader.getToken();
+      const xhr = new XMLHttpRequest();
+      xhr.responseType = "json";
+      xhr.open(method, path);
+      xhr.setRequestHeader("Content-Type", "application/json");
+      xhr.setRequestHeader("Authorization", "Bearer " + token);
+      xhr.onreadstatechange = () => {
+        if (xhr.readyState === 4) {
+          if (xhr.status !== 200) {
+            reject(new Error({
+              status: xhr.status,
+              response: xhr.response,
+              xhr: xhr
+            }));
+          }
+        }
+      };
+      xhr.onload = () => {
+        resolve(xhr.response);
+      };
+      xhr.send(JSON.stringify(params));
+    });
+  }
+}
+
+class PleromaMod { // eslint-disable-line no-unused-vars
+  constructor (name) {
+    this.name = name;
+    this.config = {};
+    this.isRunning = false;
+  }
+
+  get isEnabled () {
+    return localStorage.getItem("pleroma_mod_" + this.name + "_enabled") !== "false" || true;
+  }
+
+  getClassName () {
+    return PleromaModLoader.getClassName(this.name);
+  }
+
+  getModDir () {
+    return PleromaModLoader.getModDir() + this.name + "/";
+  }
+
+  ready () {
+    this.onReady();
+    this.run();
+  }
+
+  destroy () {
+    this.isRunning = false;
+    if (this.config.includes) {
+      const styles = this.config.includes.css || [];
+      const scripts = this.config.includes.js || [];
+
+      Promise.all(styles.map((style) => {
+        return this.excludeCss(style);
+      }).concat(scripts.map((script) => {
+        return this.excludeScript(script);
+      }))).then(() => {
+        this.onDestroy();
+      });
+
+      return;
     }
-    localStorage.setItem("pleroma_mod_" + this.name + "_enabled", this.enabled);
-  },
 
-  function disable () {
-    this.enabled = false;
-    if (this.instance.onDestroy) {
-      this.instance.onDestroy();
+    this.onDestroy();
+  }
+
+  run () {
+    if (this.config.includes) {
+      const styles = this.config.includes.css || [];
+      const scripts = this.config.includes.js || [];
+
+      Promise.all(styles.map((style) => {
+        return this.includeCss(style);
+      }).concat(scripts.map((script) => {
+        return this.includeScript(script);
+      })).concat([
+        this.loadConfig(),
+        this.onCreate()
+      ])).then(() => {
+        this.isRunning = true;
+        this.onRun();
+      });
+
+      return;
     }
-    console.log(this.name + " unloaded");
-    this.instance = null;
-    localStorage.setItem("pleroma_mod_" + this.name + "_enabled", this.enabled);
-  },
-
-  function include () {
-    console.log("loading " + this.name);
-    PleromaModLoader.includeScript(
-      PleromaModLoader.getModDir() + "pleroma-mod-" + this.name + "/mod.js"
-    ).then(() => {
-      if (this.enabled) {
-        this.modLoaded();
-      }
-    });
-  },
 
-  function modLoaded () {
-    console.log(this.name + " loaded");
-    this.instance = new window.__pleromaModLoader.classes[this.getClassName()]();
-    this.run();
-  },
+    this.isRunning = true;
+    this.onRun();
+  }
 
-  function run () {
-    if (this.instance) {
-      this.instance.run();
+  mutate (mutation, observer) {
+    if (this.isRunning) {
+      this.onMutation(mutation, observer);
     }
   }
-].forEach((fn) => { PleromaMod.prototype[fn.name] = fn; });
+
+  saveConfig () {
+    const storedConfig = {};
+    Object.keys(this.config).filter((key) => {
+      return key !== "includes" && key !== "filter";
+    }).forEach((key) => {
+      storedConfig[key] = this.config[key];
+    });
+    localStorage.setItem(this.name + "_config", JSON.stringify(storedConfig));
+  }
+
+  mergeConfig (newConfig) {
+    Object.keys(newConfig).forEach((key) => {
+      this.config[key] = JSON.parse(JSON.stringify(newConfig[key]));
+    });
+  }
+
+  loadConfig () {
+    return new Promise((resolve) => {
+      // TODO: use structuredClone when its more supported
+      this.defaultConfig = JSON.parse(JSON.stringify(this.config));
+
+      const storedConfig = JSON.parse(localStorage.getItem(this.name + "_config"));
+
+      this.onConfigLoad().then((json) => {
+        this.mergeConfig(json);
+        if (storedConfig) {
+          this.mergeConfig(storedConfig);
+        }
+        this.saveConfig();
+        resolve();
+      });
+    });
+  }
+
+  onReady () {}
+  onCreate () {
+    return new Promise((resolve) => {
+      resolve();
+    });
+  }
+  onDestroy () {}
+  onRun () {}
+  onMutation (mutation, observer) {}
+  onConfigLoad () {
+    return new Promise((resolve) => {
+      resolve({});
+    });
+  }
+  onSettingInit (key, ul, li) {}
+
+  includeCss (src) {
+    return PleromaModLoader.includeCss(PleromaModLoader.getModDir() + this.name + "/" + src);
+  }
+
+  includeScript (src) {
+    return PleromaModLoader.includeScript(PleromaModLoader.getModDir() + this.name + "/" + src);
+  }
+
+  excludeCss (src) {
+    return PleromaModLoader.excludeCss(PleromaModLoader.getModDir() + this.name + "/" + src);
+  }
+
+  excludeScript (src) {
+    return PleromaModLoader.excludeScript(PleromaModLoader.getModDir() + this.name + "/" + src);
+  }
+
+  fetchJson (src) {
+    console.log("loading " + src);
+    return window.fetch(PleromaModLoader.getModDir() + this.name + "/" + src).then((response) => {
+      return response.json();
+    });
+  }
+
+  api (method, path, params) {
+    return PleromaModLoader.api(method, path, params);
+  }
+
+  enable () {
+    this.ready();
+    localStorage.setItem("pleroma_mod_" + this.name + "_enabled", true);
+  }
+
+  disable () {
+    this.destroy();
+    localStorage.setItem("pleroma_mod_" + this.name + "_enabled", false);
+  }
+}
 
 window.__pleromaModLoader = new PleromaModLoader();
 window.__pleromaModLoader.waitUntilReady();