diff --git a/app/src/boot/onGetConfig.ts b/app/src/boot/onGetConfig.ts
index 0721aa883..53c6a31ab 100644
--- a/app/src/boot/onGetConfig.ts
+++ b/app/src/boot/onGetConfig.ts
@@ -26,6 +26,7 @@ import {initBar} from "../layout/topBar";
 import {setProxy} from "../config/util/setProxy";
 import {openChangelog} from "./openChangelog";
 import {getIdFromSYProtocol, isSYProtocol} from "../util/pathName";
+import {App} from "../index";
 
 const matchKeymap = (keymap: Record<string, IKeymapItem>, key1: "general" | "editor", key2?: "general" | "insert" | "heading" | "list" | "table") => {
     if (key1 === "general") {
@@ -84,7 +85,7 @@ const hasKeymap = (keymap: Record<string, IKeymapItem>, key1: "general" | "edito
     return match;
 };
 
-export const onGetConfig = (isStart: boolean) => {
+export const onGetConfig = (isStart: boolean, app:App) => {
     const matchKeymap1 = matchKeymap(Constants.SIYUAN_KEYMAP.general, "general");
     const matchKeymap2 = matchKeymap(Constants.SIYUAN_KEYMAP.editor.general, "editor", "general");
     const matchKeymap3 = matchKeymap(Constants.SIYUAN_KEYMAP.editor.insert, "editor", "insert");
@@ -140,7 +141,7 @@ export const onGetConfig = (isStart: boolean) => {
             resetLayout();
         }
     });
-    initBar();
+    initBar(app);
     setProxy();
     initStatus();
     initWindow();
diff --git a/app/src/index.ts b/app/src/index.ts
index 5c1d1d9ae..1f928ffa5 100644
--- a/app/src/index.ts
+++ b/app/src/index.ts
@@ -171,7 +171,7 @@ export class App {
                     fetchPost("/api/setting/getCloudUser", {}, userResponse => {
                         window.siyuan.user = userResponse.data;
                         loadPlugins(siyuanApp);
-                        onGetConfig(response.data.start);
+                        onGetConfig(response.data.start, siyuanApp);
                         account.onSetaccount();
                         resizeDrag();
                         setTitle(window.siyuan.languages.siyuanNote);
diff --git a/app/src/layout/topBar.ts b/app/src/layout/topBar.ts
index e81301e60..fbdba6da0 100644
--- a/app/src/layout/topBar.ts
+++ b/app/src/layout/topBar.ts
@@ -9,6 +9,7 @@ import {MenuItem} from "../menus/Menu";
 import {setMode} from "../util/assets";
 import {openSetting} from "../config";
 import {openSearch} from "../search/spread";
+import {App} from "../index";
 
 export const updateEditModeElement = () => {
     const target = document.querySelector("#barReadonly");
@@ -23,7 +24,7 @@ export const updateEditModeElement = () => {
     }
 };
 
-export const initBar = () => {
+export const initBar = (app: App) => {
     const toolbarElement = document.getElementById("toolbar");
     toolbarElement.innerHTML = `
 <div id="barWorkspace" class="toolbar__item">
diff --git a/app/src/plugin/API.ts b/app/src/plugin/API.ts
index f1898425a..92e6dbe19 100644
--- a/app/src/plugin/API.ts
+++ b/app/src/plugin/API.ts
@@ -7,5 +7,5 @@ export const API = {
     Plugin: Plugin,
     confirm: confirmDialog,
     showMessage,
-    Dialog
+    Dialog,
 };
diff --git a/app/src/plugin/index.ts b/app/src/plugin/index.ts
index 21bcbf08e..548d02151 100644
--- a/app/src/plugin/index.ts
+++ b/app/src/plugin/index.ts
@@ -15,8 +15,19 @@ export class Plugin {
         this.eventBus = new EventBus(options.name);
     }
 
-    public getData() {
-
+    public addTopBar(options: {
+        icon: string,
+        title: string,
+        position: "right",
+        callback: (evt: MouseEvent) => void
+    }) {
+        const iconElement = document.createElement("div");
+        iconElement.className = "toolbar__item b3-tooltips b3-tooltips__sw";
+        iconElement.setAttribute("aria-label", options.title);
+        iconElement.innerHTML = options.icon.startsWith("icon") ? `<svg><use xlink:href="#${options.icon}"></use></svg>` : options.icon;
+        iconElement.addEventListener("click", options.callback);
+        document.querySelector("#" + (options.position === "right" ? "barSearch" : "drag")).before(iconElement);
+        return iconElement;
     }
 
     public onload() {