优化输出日志的颜色

cc-inspector/src/scripts/background/portMan.ts

@@ -20,19 +20,20 @@ export abstract class PortMan {
   public onDisconnect: (port: chrome.runtime.Port) => void | null = null;
   public onMessage: (data: PluginEvent) => void | null = null;
   public terminal: Terminal = null;
+  public timestamp: number = 0;
   constructor(tab: chrome.tabs.Tab, port: chrome.runtime.Port) {
+    this.timestamp = Date.now();
     this.port = port;
     this.tab = tab;
     this.name = port.name;
     this.id = tab.id;
     this.url = tab.url;
     this.title = tab.title;
-    this.terminal = new Terminal(`Port-${this.name}/ID-${this.id}`);
-    port.onMessage.addListener((data: any, sender: any) => {
-      const str = `${sender.name}\n${JSON.stringify(data)}`
-      console.log(... this.terminal.green(str));
+    this.terminal = new Terminal(`Port-${this.name}`);
+    port.onMessage.addListener((data: any, port: chrome.runtime.Port) => {
+      console.log(... this.terminal.message(JSON.stringify(data)));
       // 如果多个页面都监听 onMessage 事件，对于某一次事件只有第一次调用 sendResponse() 能成功发出回应，所有其他回应将被忽略。
-      // sender.postMessage(data);
+      // port.postMessage(data);
       const cls = PluginEvent.create(data);
       if (this.onMessage) {
         this.onMessage(cls);

cc-inspector/src/scripts/background/portMgr.ts

@@ -70,7 +70,7 @@ export class PortMgr {
         id: port.id,
         url: port.url
       });
-      str.push(`[${i + 1}] name:${port.name}, id:${port.id}, url:${port.url}`);
+      str.push(`[${i + 1}] time:${new Date(port.timestamp).toLocaleString()}, name:${port.name}, id:${port.id}, url:${port.url}`);
     }
 
     if (arr.length) {
@@ -92,9 +92,11 @@ export class PortMgr {
     this.getCurrentUseContent()?.postMessage(data);
   }
   sendDevtoolMsg(data: PluginEvent) {
-    const portMan = this.portArray.find(el => el.isDevtoolsPort());
-    if (portMan) {
-      portMan.port.postMessage(data);
+    const portManArray = this.portArray.filter(el => el.isDevtoolsPort());
+    if (portManArray.length) {
+      portManArray.forEach(portMan => {
+        portMan.port.postMessage(data);
+      })
     } else {
       console.log('not find devtools port');
     }

cc-inspector/src/scripts/content.ts

@@ -2,61 +2,67 @@
 // 但是不共享js,要想访问页面js,只能通过注入的方式
 import { ChromeConst } from "cc-plugin/src/chrome/const";
 import { Msg, Page, PluginEvent } from "../core/types";
-import { injectScript } from "../core/util";
-injectScript(ChromeConst.script.inject);
+import { Terminal } from "./terminal";
 
-class Content {
-  private connect: chrome.runtime.Port | null = null;
-
-  constructor() {
-    console.log("init content");
-    // 接受来自inject.js的消息数据,然后中转到background.js
-    window.addEventListener("message", (event) => {
-      let data: PluginEvent = event.data;
-      if (PluginEvent.check(data, Page.Inject, Page.Content)) {
-        console.log("[Window-Message]: ", data);
-        PluginEvent.reset(data, Page.Content, Page.Devtools)
-        this.connect?.postMessage(data)
-      }
-    }, false);
-  }
-
-  // 和background.js保持长连接通讯，background和content的交互也要通过这个链接进行通讯
-  private connectToBackground() {
-    this.connect = chrome.runtime.connect({ name: Page.Content })
-    this.connect.onMessage.addListener((data: PluginEvent, sender) => {
-      if (PluginEvent.check(data, Page.Background, Page.Content)) {
-        // console.log(`%c[Connect-Message] ${JSON.stringify(data)}`, "color:green;")
-        console.log("[Connect-Message]: ", data);
-        PluginEvent.reset(data, Page.Content, Page.Inject)
-        window.postMessage(data, "*");
-      }
-    })
-  }
-
-  private sendMessageToBackground(data: PluginEvent) {
-    if (this.connect) {
-      this.connect.postMessage(data);
-    }
-  }
-
-  run() {
-    this.connectToBackground();
-    this.checkGame();
-  }
-
-  private checkGame() {
-    let gameCanvas = document.querySelector("#GameCanvas");
-    if (!gameCanvas) {
-      let sendData = new PluginEvent(Page.Content, Page.Devtools, Msg.Support, {
-        support: false,
-        msg: "未发现GameCanvas,不支持调试游戏!"
-      })
-      this.sendMessageToBackground(sendData)
+export function injectScript(url: string) {
+  if (chrome && chrome.runtime && chrome.runtime.getURL) {
+    let content = chrome.runtime.getURL(url)
+    const script = document.createElement("script")
+    script.setAttribute("type", "text/javascript")
+    script.setAttribute("src", content)
+    script.onload = function () {
+      document.head.removeChild(script);
     }
+    document.head.appendChild(script)
+    console.log(...terminal.green(`inject script success: ${content}`));
+  } else {
+    console.log(...terminal.red("inject script failed"));
   }
 }
 
+const terminal = new Terminal(Page.Content);
+console.log(...terminal.init());
+// 和background.js保持长连接通讯，background和content的交互也要通过这个链接进行通讯
+let connect: chrome.runtime.Port | null = chrome.runtime.connect({ name: Page.Content })
+connect.onDisconnect.addListener(() => {
+  console.log(...terminal.disconnect(""));
+  connect = null
+})
+connect.onMessage.addListener((data: PluginEvent, sender: chrome.runtime.Port) => {
+  if (PluginEvent.check(data, Page.Background, Page.Content)) {
+    console.log(...terminal.message(JSON.stringify(data)));
+    PluginEvent.reset(data, Page.Content, Page.Inject)
+    window.postMessage(data, "*");
+  }
+})
+// 接受来自inject.js的消息数据,然后中转到background.js
+window.addEventListener("message", (event) => {
+  let data: PluginEvent = event.data;
+  if (PluginEvent.check(data, Page.Inject, Page.Content)) {
+    console.log(...terminal.message(JSON.stringify(data)));
+    PluginEvent.reset(data, Page.Content, Page.Devtools)
+    if (connect) {
+      connect.postMessage(data)
+    } else {
+      console.log(...terminal.log(`connect is null`));
+      debugger;
+    }
+  }
+}, false);
 
-const content = new Content();
-content.run();
+function checkGame() {
+  let gameCanvas = document.querySelector("#GameCanvas");
+  const sendData = new PluginEvent(Page.Content, Page.Devtools, Msg.Support, {
+    support: !!gameCanvas,
+    msg: "未发现GameCanvas,不支持调试游戏!"
+  })
+  if (connect) {
+    connect.postMessage(sendData)
+  } else {
+    console.log(...terminal.log(`connect is null`));
+    debugger;
+  }
+}
+
+injectScript(ChromeConst.script.inject);
+checkGame();

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

@@ -5,6 +5,7 @@ import { ArrayData, BoolData, ColorData, DataType, EngineData, Group, ImageData,
 import { getValue, trySetValueWithConfig } from "./setValue";
 import { BuildArrayOptions, BuildImageOptions, BuildObjectOptions, BuildVecOptions } from "./types";
 import { isHasProperty } from "./util";
+import { Terminal } from "../terminal";
 
 declare const cc: any;
 
@@ -23,9 +24,9 @@ class CCInspector {
       }
     }, 300);
   }
-
+  private terminal = new Terminal('Inject', 'blue', 'gray');
   init() {
-    console.log("cc-inspector init ~~~");
+    console.log(...this.terminal.init());
     this.watchIsCocosGame();
     window.addEventListener("message", (event) => {
       // 接受来自content的事件，有可能也会受到其他插件的
@@ -34,10 +35,7 @@ class CCInspector {
       }
       let pluginEvent: PluginEvent = event.data;
       if (PluginEvent.check(pluginEvent, Page.Content, Page.Inject)) {
-        console.log(
-          `%c[Inject] ${JSON.stringify(pluginEvent)}`,
-          "color:green;"
-        );
+        console.log(...this.terminal.message(JSON.stringify(pluginEvent)));
         PluginEvent.finish(pluginEvent);
         switch (pluginEvent.msg) {
           case Msg.Support: {

cc-inspector/src/scripts/terminal.ts

@@ -1,36 +1,54 @@
 export class Terminal {
-  color = 'red';
-  background = 'yellow';
+  /**
+   * 标签
+   */
   tag = 'terminal';
-  constructor(tag: string, color: string = 'red', background: string = 'yellow') {
-    this.color = color;
-    this.background = background;
+  /**
+   * 标签的颜色
+   */
+  tagColor = 'red';
+  /**
+   * 标签的背景色
+   */
+  tagBackground = 'yellow';
+  /**
+   * 日志文本的颜色
+   */
+  txtColor = 'black';
+
+  constructor(tag: string, tagColor: string = 'red', tagBackground: string = 'yellow') {
+    this.tagColor = tagColor;
+    this.tagBackground = tagBackground;
     this.tag = tag;
   }
   init(): string[] {
     return this.log(`init`);
   }
   public log(message: string, newline: boolean = false): string[] {
-    return [`%c${this.tag}%c${newline ? '\n' : ''}${message}`, `color:${this.color};background:${this.background};padding:0 4px`, "color:black;margin-left:5px"];
+    return [`%c${this.tag}%c${newline ? '\n' : ''}${message}`, `color:${this.tagColor};background:${this.tagBackground};padding:0 4px`, `color:${this.txtColor};margin-left:5px`];
   }
-
-
   public blue(message: string): string[] {
-    this.color = 'blue';
+    this.txtColor = 'blue';
     return this.log(message);
   }
   public green(message: string): string[] {
-    this.color = 'green';
+    this.txtColor = 'green';
     return this.log(message);
   }
   public red(message: string): string[] {
-    this.color = 'red';
+    this.txtColor = 'red';
     return this.log(message);
   }
+  message(msg: string): string[] {
+    this.txtColor = 'black';
+    return this.log(`[message] ${msg}`);
+  }
   connect(msg: string): string[] {
+    this.txtColor = 'black';
     return this.log(`[connect] ${msg}`);
   }
   disconnect(msg: string): string[] {
+    this.txtColor = 'black';
     return this.log(`[disconnect] ${msg}`);
   }
 }