frame details

source/src/background.ts

@@ -4,6 +4,7 @@ import {Msg, Page, PluginEvent} from "@/core/types";
 import * as  UA from "universal-analytics"
 import {v4} from "uuid"
 import {devtools_page} from "./manifest.json"
+import {FrameDetails} from "@/devtools/data";
 
 // 统计服务
 const userID = localStorage.getItem("userID") || v4()
@@ -45,10 +46,22 @@ class PortMan {
     return this.content.find(el => el.sender?.frameId !== undefined && el.sender.frameId === this.currentUseContentFrameID) || null;
   }
 
+  _updateFrames() {
+    let data: FrameDetails[] = this.content.map(item => {
+      return {
+        url: item.sender?.url || "",
+        frameID: item.sender?.frameId || 0,
+      }
+    })
+    let event = new PluginEvent(Page.Background, Page.Devtools, Msg.UpdateFrames, data)
+    this.sendDevtoolMsg(event)
+  }
+
   dealConnect(port: chrome.runtime.Port) {
     switch (port.name) {
       case Page.Content: {
         this.content.push(port);
+        this._updateFrames();
         this.onPortConnect(port,
           (data: PluginEvent) => {
             if (data.target === Page.Devtools) {
@@ -62,12 +75,14 @@ class PortMan {
               && el.sender?.frameId === disPort.sender?.frameId
             );
             this.content.splice(index, 1);
+            this._updateFrames();
             this.checkValid();
           })
         break;
       }
       case Page.Devtools: {
         this.devtools = port;
+        this._updateFrames(); // 当devtools链接后，主动派发frames数据
         this.onPortConnect(port,
           (data: PluginEvent) => {
             // 从devtools过来的消息统一派发到Content中

source/src/core/types.ts

@@ -14,6 +14,7 @@ export enum Msg {
   MemoryInfo = "memory-info",//
   TabsInfo = "tabs_info", // 当前页面信息
   GetTabID = "GetTabID", // 获取页面ID
+  UpdateFrames = "UpdateFrames", // 更新页面的frame
   GetObjectItemData = "GetObjectItemData",
   SetProperty = "set-property", // 设置node属性
   UpdateProperty = "update-property", // 更新属性

source/src/devtools/data.ts

@@ -41,6 +41,11 @@ export interface ObjectItemRequestData {
   data: Property[];
 }
 
+export interface FrameDetails {
+  frameID: number;
+  url: string;
+}
+
 export class EngineData extends Info {
   public engineType: string = "";
   public engineUUID: string = "";

source/src/devtools/ui/index.vue

@@ -1,5 +1,12 @@
 <template>
   <div id="devtools">
+    <div class="head">
+      <div class="label">inspect target:</div>
+      <el-select v-model="frameID" placeholder="请选择" @change="onChangeFrame" style="flex:1;">
+        <el-option v-for="item in iframes" :key="item.value" :label="item.label" :value="item.value">
+        </el-option>
+      </el-select>
+    </div>
     <div v-show="isShowDebug" class="find">
       <div v-if="false">
         <el-button type="success" @click="onMemoryTest">内存测试</el-button>
@@ -66,7 +73,7 @@ import {Component, Watch} from "vue-property-decorator";
 import properties from "./propertys.vue";
 import {Msg, Page, PluginEvent} from "@/core/types"
 import {connectBackground} from "@/devtools/connectBackground";
-import {EngineData, Info, TreeData, ObjectData, ObjectItemRequestData} from "@/devtools/data";
+import {EngineData, FrameDetails, Info, ObjectData, ObjectItemRequestData, TreeData} from "@/devtools/data";
 import Bus, {BusMsg} from "@/devtools/bus";
 
 @Component({
@@ -83,6 +90,9 @@ export default class Index extends Vue {
 
   filterText: string | null = null;
 
+  iframes: Array<{ label: string, value: number | string }> = []
+  frameID = 0;
+
   @Watch("filterText")
   updateFilterText(val: any) {
     (this.$refs?.tree as any)?.filter(val);
@@ -145,6 +155,10 @@ export default class Index extends Vue {
     }
   }
 
+  onChangeFrame() {
+
+  }
+
   _expand(uuid: string) {
 
     let expandKeys: Array<string> = [];
@@ -273,6 +287,27 @@ export default class Index extends Vue {
             }
             break
           }
+          case Msg.UpdateFrames: {
+            const details: FrameDetails[] = data.data as FrameDetails[];
+            // 先把iframes里面无效的清空了
+            this.iframes = this.iframes.filter(item => {
+              details.find(el => el.frameID === item.value)
+            })
+
+            // 同步配置
+            details.forEach(item => {
+              let findItem = this.iframes.find(el => el.value === item.frameID);
+              if (findItem) {
+                findItem.label = item.url;
+              } else {
+                this.iframes.push({
+                  label: item.url,
+                  value: item.frameID,
+                })
+              }
+            })
+            break;
+          }
         }
       }
     });
@@ -388,8 +423,22 @@ export default class Index extends Vue {
 
 #devtools {
   display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
+  overflow: hidden;
+
+  .head {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 1px 0;
+    border-bottom: solid 1px grey;
+
+    .label {
+      margin: 0 3px;
+    }
+  }
 
   .no-find {
     display: flex;