CocosPlugin/cc-inspector-chrome
1
0
Fork 0
mirror of https://github.com/tidys/cc-inspector-chrome synced 2025-04-19 16:38:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

加载注入脚本的css

Browse Source
This commit is contained in:
xu_yanfeng 2025-01-19 11:35:51 +08:00
parent 7d4197aca5
commit 5d4f81fce8
4 changed files with 40 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
cc-inspector/src/scripts/const.ts
View File

@ -11,6 +11,7 @@ export enum DocumentEvent {
Content2Inject = "content2inject",
EngineVersion = "engineVersion",
GoogleAnalytics = "googleAnalytics",
LoadInjectCss = "load-inject-css",
}
export interface GoogleAnalyticsData {
event: GA_EventName;

6
cc-inspector/src/scripts/content/index.ts
View File

@ -1,7 +1,7 @@
// content.js 和原始界面共享DOM，具有操作dom的能力
// 但是不共享js,要想访问页面js,只能通过注入的方式
import { ChromeConst } from "cc-plugin/src/chrome/const";
import { debugLog, Page, PluginEvent } from "../../core/types";
import { debugLog, Msg, Page, PluginEvent } from "../../core/types";
import { ga } from "../../ga";
import { GA_EventName } from "../../ga/type";
import { DocumentEvent, GoogleAnalyticsData } from "../const";
@ -18,6 +18,10 @@ export function injectScript(url: string) {
script.setAttribute("type", "text/javascript");
script.setAttribute("src", content);
script.onload = function () {
// 加载注入脚本界面的css
let css = chrome.runtime.getURL(ChromeConst.css.inject_view);
const event = new CustomEvent(DocumentEvent.LoadInjectCss, { detail: [css] });
document.dispatchEvent(event);
document.head.removeChild(script);
};
document.head.appendChild(script);

2
cc-inspector/src/scripts/inject/index.ts
View File

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

32
cc-inspector/src/scripts/inject/inject-view.ts Normal file
View File

@ -0,0 +1,32 @@
import ccui from "@xuyanfeng/cc-ui";
import "@xuyanfeng/cc-ui/dist/ccui.css";
import "@xuyanfeng/cc-ui/iconfont/iconfont.css";
import { createApp } from "vue";
import { DocumentEvent } from "../const";
import App from "../inject-view/app.vue";
export class InjectView {
constructor() {
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 app = createApp(App);
// ccui.uiElement.setDoc(document);
app.use(ccui);
app.mount(el);
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);
});
});
}
}