diff --git a/app/src/index.ts b/app/src/index.ts
index f81b03043..8d377a5a3 100644
--- a/app/src/index.ts
+++ b/app/src/index.ts
@@ -29,8 +29,11 @@ import {getLocalStorage} from "./protyle/util/compatibility";
 import {updateEditModeElement} from "./layout/topBar";
 import {getSearch} from "./util/functions";
 import {hideAllElements} from "./protyle/ui/hideElements";
+import {loadPlugins} from "./plugin/loader";
+
+export class App {
+    public plugins: import("./plugin").Plugin[] = [];
 
-class App {
     constructor() {
         /// #if BROWSER
         registerServiceWorker(`${Constants.SERVICE_WORKER_PATH}?v=${Constants.SIYUAN_VERSION}`);
@@ -139,6 +142,7 @@ class App {
                 }
             }),
         };
+
         fetchPost("/api/system/getConf", {}, response => {
             window.siyuan.config = response.data.conf;
             // 历史数据兼容，202306后可删除
@@ -164,6 +168,7 @@ class App {
                     fetchPost("/api/setting/getCloudUser", {}, userResponse => {
                         window.siyuan.user = userResponse.data;
                         onGetConfig(response.data.start);
+                        loadPlugins(siyuanApp);
                         account.onSetaccount();
                         resizeDrag();
                         setTitle(window.siyuan.languages.siyuanNote);
@@ -178,7 +183,7 @@ class App {
     }
 }
 
-new App();
+const siyuanApp = new App();
 
 window.openFileByURL = (openURL) => {
     if (openURL && isSYProtocol(openURL)) {
diff --git a/app/src/plugin/index.ts b/app/src/plugin/index.ts
new file mode 100644
index 000000000..07bc0377e
--- /dev/null
+++ b/app/src/plugin/index.ts
@@ -0,0 +1,14 @@
+export class Plugin {
+
+    constructor() {
+
+    }
+
+    getData  () {
+
+    }
+
+    public onload() {
+        console.log("Hello, world!")
+    }
+}
diff --git a/app/src/plugin/loader.ts b/app/src/plugin/loader.ts
new file mode 100644
index 000000000..4d2995cd6
--- /dev/null
+++ b/app/src/plugin/loader.ts
@@ -0,0 +1,36 @@
+import {fetchPost} from "../util/fetch";
+import {App} from "../index";
+import {Plugin} from "./index";
+
+const getObject = (key: string) => {
+    const api = {
+        siyuan: {
+            Plugin: Plugin
+        }
+    };
+    // @ts-ignore
+    return api[key];
+}
+
+const runCode = (code: string, sourceURL: string) => {
+    return window.eval("(function anonymous(require, module){".concat(code, "\n})\n//# sourceURL=").concat(sourceURL, "\n"))
+}
+
+export const loadPlugins = (app: App) => {
+    fetchPost("/api/plugin/loadPlugins", {}, response => {
+        let css = "";
+        response.data.forEach((item: { id: string, name: string, jsCode: string, cssCode: string, lang: IObject }) => {
+            const moduleObj = {}
+            const execResult = runCode(item.jsCode, "plugin:" + encodeURIComponent(item.id))
+            execResult(getObject, moduleObj);
+            // @ts-ignore
+            const plugin: Plugin = new moduleObj.exports.default({app, id: item.id, lang: item.lang})
+            app.plugins.push(plugin);
+            plugin.onload();
+            css += item.cssCode + "\n";
+        })
+        const styleElement = document.createElement("style");
+        styleElement.textContent = css;
+        document.head.append(styleElement);
+    })
+}