只有cocos游戏的页面才注入插件推荐页面

cc-inspector/src/scripts/inject-view/app.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="ad" v-show="ads.length && isShow">
     <div class="header">
-      <div class="title">Creator Plugin Recommendation</div>
+      <div class="title">Recommend</div>
-      <div style="flex: 1"></div>
+      <div class="line"></div>
       <div class="close" @click="onClose" :title="closeTitle">
         <i class="icon iconfont icon_close"></i>
       </div>
@@ -150,12 +150,13 @@ export default defineComponent({
   right: 0;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  //overflow: hidden;
 
   .header {
     display: flex;
     align-items: flex-end;
     .title {
+      box-shadow: 0px 0px 2px 0px;
       font-size: 12px;
       user-select: none;
       background-color: white;
@@ -163,7 +164,13 @@ export default defineComponent({
       border-top-right-radius: 5px;
       padding: 3px 9px;
     }
+    .line {
+      height: 1px;
+      flex: 1;
+      box-shadow: 0px 0px 2px 0px;
+    }
     .close {
+      box-shadow: 0px 0px 3px 0px;
       background-color: white;
       border-top-left-radius: 10px;
       cursor: pointer;

cc-inspector/src/scripts/inject/index.ts

@@ -1,6 +1,4 @@
-import { InjectView } from "./inject-view";
 import { Inspector } from "./inspector";
 const inspector = new Inspector();
 inspector.init();
 window["CCInspector"] = inspector;
-const ad = new InjectView();

cc-inspector/src/scripts/inject/inject-view.ts

@@ -5,28 +5,44 @@ import { createApp } from "vue";
 import { DocumentEvent } from "../const";
 import App from "../inject-view/app.vue";
 export class InjectView {
+  private _inited = false;
+  private css: string[] = [];
   constructor() {
+    document.addEventListener(DocumentEvent.LoadInjectCss, (event: CustomEvent) => {
+      const cssArray: string[] = event.detail;
+      this.css = cssArray;
+    });
+  }
+  public init() {
+    if (this._inited) {
+      return;
+    }
+    this._inited = true;
+    this.createUI();
+  }
+  private createUI() {
     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 shadowRoot = el.attachShadow({ mode: "open" });
+    // load css
+    this.css.forEach((css) => {
+      const link = document.createElement("link");
+      link.href = css;
+      link.rel = "stylesheet";
+      shadowRoot.appendChild(link);
+    });
+    // vue
+    const root = document.createElement("div");
+    shadowRoot.appendChild(root);
     const app = createApp(App);
     // ccui.uiElement.setDoc(document);
     app.use(ccui);
-    app.mount(el);
+    app.mount(root);
-
-    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);
-      });
-    });
   }
 }
+export const injectView = new InjectView();

cc-inspector/src/scripts/inject/inspector.ts

@@ -3,6 +3,7 @@ import { uniq } from "lodash";
 import { Msg, PluginEvent, RequestLogData, RequestNodeInfoData, RequestSetPropertyData, ResponseGameInfoData, ResponseNodeInfoData, ResponseSetPropertyData, ResponseSupportData, ResponseTreeInfoData } from "../../core/types";
 import { ArrayData, BoolData, ColorData, DataType, EngineData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectCircleData, ObjectData, Property, StringData, TreeData, Vec2Data, Vec3Data, Vec4Data } from "../../views/devtools/data";
 import { InjectEvent } from "./event";
+import { injectView } from "./inject-view";
 import { getValue, trySetValueWithConfig } from "./setValue";
 import { BuildArrayOptions, BuildImageOptions, BuildObjectOptions, BuildVecOptions } from "./types";
 import { isHasProperty } from "./util";
@@ -122,6 +123,7 @@ export class Inspector extends InjectEvent {
       const b = this._isCocosGame();
       if (b) {
         clearInterval(timer);
+        injectView.init();
         const version = this.getEngineVersion();
         if (b && version) {
           this.uploadEngineVersion(version);