diff --git a/cc-inspector/src/scripts/const.ts b/cc-inspector/src/scripts/const.ts
index ff6fe10..8bd9f19 100644
--- a/cc-inspector/src/scripts/const.ts
+++ b/cc-inspector/src/scripts/const.ts
@@ -11,6 +11,7 @@ export enum DocumentEvent {
   Content2Inject = "content2inject",
   EngineVersion = "engineVersion",
   GoogleAnalytics = "googleAnalytics",
+  LoadInjectCss = "load-inject-css",
 }
 export interface GoogleAnalyticsData {
   event: GA_EventName;
diff --git a/cc-inspector/src/scripts/content/index.ts b/cc-inspector/src/scripts/content/index.ts
index 3a5cc8f..f768f43 100644
--- a/cc-inspector/src/scripts/content/index.ts
+++ b/cc-inspector/src/scripts/content/index.ts
@@ -1,7 +1,7 @@
 // content.js 和原始界面共享DOM，具有操作dom的能力
 // 但是不共享js,要想访问页面js,只能通过注入的方式
 import { ChromeConst } from "cc-plugin/src/chrome/const";
-import { debugLog, Page, PluginEvent } from "../../core/types";
+import { debugLog, Msg, Page, PluginEvent } from "../../core/types";
 import { ga } from "../../ga";
 import { GA_EventName } from "../../ga/type";
 import { DocumentEvent, GoogleAnalyticsData } from "../const";
@@ -18,6 +18,10 @@ export function injectScript(url: string) {
     script.setAttribute("type", "text/javascript");
     script.setAttribute("src", content);
     script.onload = function () {
+      // 加载注入脚本界面的css
+      let css = chrome.runtime.getURL(ChromeConst.css.inject_view);
+      const event = new CustomEvent(DocumentEvent.LoadInjectCss, { detail: [css] });
+      document.dispatchEvent(event);
       document.head.removeChild(script);
     };
     document.head.appendChild(script);
diff --git a/cc-inspector/src/scripts/inject/index.ts b/cc-inspector/src/scripts/inject/index.ts
index 6492606..2c2bbf5 100644
--- a/cc-inspector/src/scripts/inject/index.ts
+++ b/cc-inspector/src/scripts/inject/index.ts
@@ -1,4 +1,6 @@
+import { InjectView } from "./inject-view";
 import { Inspector } from "./inspector";
 const inspector = new Inspector();
 inspector.init();
 window["CCInspector"] = inspector;
+const ad = new InjectView();
diff --git a/cc-inspector/src/scripts/inject/inject-view.ts b/cc-inspector/src/scripts/inject/inject-view.ts
new file mode 100644
index 0000000..d814e22
--- /dev/null
+++ b/cc-inspector/src/scripts/inject/inject-view.ts
@@ -0,0 +1,32 @@
+import ccui from "@xuyanfeng/cc-ui";
+import "@xuyanfeng/cc-ui/dist/ccui.css";
+import "@xuyanfeng/cc-ui/iconfont/iconfont.css";
+import { createApp } from "vue";
+import { DocumentEvent } from "../const";
+import App from "../inject-view/app.vue";
+export class InjectView {
+  constructor() {
+    const el = document.createElement("div");
+    el.attachShadow({ mode: "closed" });
+    el.style.position = "absolute";
+    el.style.zIndex = "99999";
+    el.style.bottom = "0";
+    el.style.right = "0";
+    el.style.left = "0";
+    document.body.appendChild(el);
+    const app = createApp(App);
+    // ccui.uiElement.setDoc(document);
+    app.use(ccui);
+    app.mount(el);
+
+    document.addEventListener(DocumentEvent.LoadInjectCss, (event: CustomEvent) => {
+      const cssArray: string[] = event.detail;
+      cssArray.forEach((css) => {
+        const link = document.createElement("link");
+        link.href = css;
+        link.rel = "stylesheet";
+        el.appendChild(link);
+      });
+    });
+  }
+}