代码梳理

cc-inspector/src/core/types.ts

@@ -26,8 +26,14 @@ export class PluginEvent {
   msg: Msg | null = null;
   data: any = null;
 
-  source: Page | null = null; // 事件发送的源头
-  target: Page | null = null; // 事件要发送的目标
+  /**
+   * 事件发送的源头
+   */
+  source: Page | null = null;
+  /**
+   * 事件要发送的目标
+   */
+  target: Page | null = null; 
 
   static check(event: PluginEvent, source: Page, target: Page) {
     return event && source && target && event.source === source && event.target === target;
@@ -40,6 +46,9 @@ export class PluginEvent {
     }
   }
 
+  /**
+   * 
+   */
   static finish(event: PluginEvent) {
     event.source = event.target = null;
   }

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

@@ -41,7 +41,7 @@ class CCInspector {
         clearInterval(timer);
         // @ts-ignore
         cc.director.on(cc.Director.EVENT_AFTER_SCENE_LAUNCH, () => {
-          let isCocosGame = this._isCocosGame();
+          const isCocosGame = this._isCocosGame();
           this.notifySupportGame(isCocosGame);
         });
       }
@@ -126,10 +126,7 @@ class CCInspector {
 
   sendMsgToContent(msg: Msg, data: any) {
     // 发送给content.js处理，也会导致发送给了自身，死循环
-    window.postMessage(
-      new PluginEvent(Page.Inject, Page.Content, msg, data),
-      "*"
-    );
+    window.postMessage(new PluginEvent(Page.Inject, Page.Content, msg, data), "*");
   }
 
   notifySupportGame(b: boolean) {
@@ -536,7 +533,7 @@ class CCInspector {
       let keyDesc = "";
       if (Array.isArray(propValue)) {
         // 只收集一级key
-        propValue.forEach((item) => {});
+        propValue.forEach((item) => { });
         keyDesc = `(${propValue.length}) [...]`;
       } else if (this._isInvalidValue(propValue)) {
         // 不能改变顺序
@@ -581,7 +578,7 @@ class CCInspector {
     const name = this.getCompName(node);
     let nodeGroup = new Group(name, node.uuid);
     let keys = this._getNodeKeys(node);
-    for (let i = 0; i < keys.length; ) {
+    for (let i = 0; i < keys.length;) {
       let key = keys[i];
       let pair = this._getPairProperty(key);
       if (pair && this._checkKeysValid(node, pair.values)) {
@@ -730,7 +727,7 @@ class CCInspector {
   }
 }
 
-let inspector = new CCInspector();
+const inspector = new CCInspector();
 inspector.init();
 //@ts-ignore
 window.CCInspector = inspector;

cc-inspector/src/views/devtools/connectBackground.ts

@@ -24,7 +24,13 @@ class ConnectBackground {
       });
     }
   }
-
+  sendMsgToContentScript(msg: Msg, data?: any) {
+    if (!chrome || !chrome.devtools) {
+      console.log("环境异常，无法执行函数");
+      return;
+    }
+    this.postMessageToBackground(msg, data);
+  }
   postMessageToBackground(msg: Msg, data?: any) {
     if (this.connect) {
       let sendData = new PluginEvent(Page.Devtools, Page.Background, msg, data)

cc-inspector/src/views/devtools/index.ts

@@ -1,5 +1,4 @@
 import { createApp } from "vue";
-// 用的是ui/index.vue
 import App from "./index.vue";
 import CCP from "cc-plugin/src/ccp/entry-render";
 import pluginConfig from "../../../cc-plugin.config";

cc-inspector/src/views/devtools/index.vue

@@ -7,7 +7,7 @@
         </el-drawer> -->
     <div class="head" v-show="iframes.length > 1">
       <div class="label">inspect target:</div>
-      <CCSelect v-model="frameID" placeholder="please select ..." @change="onChangeFrame" :data="getFramesData()" style="flex: 1"> </CCSelect>
+      <CCSelect v-model:value="frameID" placeholder="please select ..." @change="onChangeFrame" :data="getFramesData()"> </CCSelect>
     </div>
     <div v-show="isShowDebug" class="find">
       <div v-if="false">
@@ -27,6 +27,7 @@
           </slot>
         </CCInput>
         <div class="treeList">
+          <CCTree></CCTree>
           <!-- <el-tree
             :data="treeData"
             ref="tree"
@@ -71,7 +72,7 @@ import { defineComponent, reactive, PropType, ref, onMounted, watch, toRaw, next
 import properties from "./ui/propertys.vue";
 import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
 import ccui from "@xuyanfeng/cc-ui";
-const { CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
+const { CCTree, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
 import { Msg, Page, PluginEvent } from "../../core/types";
 import { connectBackground } from "./connectBackground";
 import { EngineData, FrameDetails, Info, NodeInfoData, ObjectData, ObjectItemRequestData, TreeData } from "./data";
@@ -79,13 +80,14 @@ import Bus, { BusMsg } from "./bus";
 import SettingsVue from "./ui/settings.vue";
 import { RefreshType, settings } from "./settings";
 import { ButtonGroupItem } from "@xuyanfeng/cc-ui/types/cc-button-group/const";
+import { ITreeData } from "@xuyanfeng/cc-ui/types/cc-tree/const";
 interface FrameInfo {
   label: string;
   value: number;
 }
 
 export default defineComponent({
-  components: { CCDivider, CCButtonGroup, properties, SettingsVue, CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor },
+  components: { CCTree, CCDivider, CCButtonGroup, properties, SettingsVue, CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor },
   name: "devtools",
   props: {},
   setup(props, ctx) {
@@ -94,7 +96,6 @@ export default defineComponent({
     const isShowDebug = ref<boolean>(true);
     const frameID = ref<number>(0);
     const iframes = ref<Array<FrameInfo>>([]);
-
     const btnRefresh: ButtonGroupItem = reactive<ButtonGroupItem>({
       icon: "icon_refresh",
       click: () => {
@@ -140,13 +141,6 @@ export default defineComponent({
       return circle(data);
     }
 
-    function sendMsgToContentScript(msg: Msg, data?: any) {
-      if (!chrome || !chrome.devtools) {
-        console.log("环境异常，无法执行函数");
-        return;
-      }
-      connectBackground.postMessageToBackground(msg, data);
-    }
     const requestList: Array<{ id: string; cb: Function }> = [];
 
     function _expand(uuid: string) {
@@ -262,12 +256,9 @@ export default defineComponent({
     }
     // 问题：没有上下文的权限，只能操作DOM
     function _executeScript(para: Object) {
-      let tabID = chrome.devtools.inspectedWindow.tabId;
-      //@ts-ignore
-      chrome.tabs.executeScript(tabID, { code: `var CCInspectorPara='${JSON.stringify(para)}';` }, () => {
-        //@ts-ignore
-        chrome.tabs.executeScript(tabID, { file: "js/execute.js" });
-      });
+      // chrome.tabs.executeScript()//v2版本使用的函数
+      const tabID = chrome.devtools.inspectedWindow.tabId;
+      chrome.scripting.executeScript({ files: ["js/execute.js"], target: { tabId: tabID } }, (results: chrome.scripting.InjectionResult[]) => {});
     }
 
     function _inspectedCode() {
@@ -282,6 +273,7 @@ export default defineComponent({
     }
     const elTree = ref<HTMLElement>();
     function _onMsgTreeInfo(treeData: Array<TreeData>) {
+      console.log("treeData");
       isShowDebug.value = true;
       if (!Array.isArray(treeData)) {
         treeData = [treeData];
@@ -332,7 +324,7 @@ export default defineComponent({
 
     window.addEventListener(
       "message",
-      function (event) {
+      (event) => {
         console.log("on vue:" + JSON.stringify(event));
       },
       false
@@ -346,10 +338,10 @@ export default defineComponent({
         return;
       }
       requestList.push({ id: data.id, cb });
-      sendMsgToContentScript(Msg.GetObjectItemData, data);
+      connectBackground.sendMsgToContentScript(Msg.GetObjectItemData, data);
     });
     Bus.on(BusMsg.LogData, (data: string[]) => {
-      sendMsgToContentScript(Msg.LogData, data);
+      connectBackground.sendMsgToContentScript(Msg.LogData, data);
     });
     onMounted(() => {
       syncSettings();
@@ -416,7 +408,7 @@ export default defineComponent({
     }
     function updateNodeInfo() {
       if (selectedUUID) {
-        sendMsgToContentScript(Msg.NodeInfo, selectedUUID);
+        connectBackground.sendMsgToContentScript(Msg.NodeInfo, selectedUUID);
       }
     }
     let selectedUUID: string | null = null;
@@ -424,10 +416,10 @@ export default defineComponent({
       (elTree.value as any)?.filter(val);
     }
     function onBtnClickUpdateTree() {
-      sendMsgToContentScript(Msg.TreeInfo, frameID);
+      connectBackground.sendMsgToContentScript(Msg.TreeInfo, frameID);
     }
     function onChangeFrame() {
-      sendMsgToContentScript(Msg.UseFrame, frameID);
+      connectBackground.sendMsgToContentScript(Msg.UseFrame, frameID);
     }
     const elLeft = ref<HTMLDivElement>();
     return {
@@ -476,17 +468,15 @@ export default defineComponent({
         }
       },
 
-      onBtnClickUpdateTree,
-
       onBtnClickUpdatePage() {
-        sendMsgToContentScript(Msg.Support);
+        connectBackground.sendMsgToContentScript(Msg.Support);
       },
       onCloseSettings() {
         syncSettings();
       },
 
       onMemoryTest() {
-        sendMsgToContentScript(Msg.MemoryInfo);
+        connectBackground.sendMsgToContentScript(Msg.MemoryInfo);
       },
 
       onChangeFrame,