cc-inspector-chrome/source/src/content.ts

// content.js 和原始界面共享DOM，具有操作dom的能力
// 但是不共享js,要想访问页面js,只能通过注入的方式
import {injectScript} from "@/core/util";
import {Msg, Page, PluginEvent} from "@/core/types";

injectScript("js/inject.js");

class Content {
  private connect: chrome.runtime.Port | null = null;

  constructor() {
    // 接受来自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);
    }
  }

  async 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)
    }
  }
}


const content = new Content();
content.run();