[frontend] add chobitsu injector

Author: velzie

chobitsu_inject/index.js

@@ -0,0 +1 @@
+import chobitsu from "chobitsu";

chobitsu_inject/package.json

@@ -0,0 +1,21 @@
+{
+	"name": "chobitsu_inject",
+	"version": "1.0.0",
+	"description": "",
+	"main": "index.js",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"type": "module",
+	"keywords": [],
+	"author": "",
+	"license": "ISC",
+	"packageManager": "[email protected]",
+	"dependencies": {
+		"chobitsu": "workspace:*"
+	},
+	"devDependencies": {
+		"@rollup/plugin-node-resolve": "^16.0.1",
+		"rollup": "^4.44.2"
+	}
+}

chobitsu_inject/rollup.config.js

@@ -0,0 +1,15 @@
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+
+export default {
+	input: "index.js",
+	output: {
+		file: "output/chobitsu_inject.js",
+		format: "umd",
+	},
+	plugins: [
+		nodeResolve({
+			preferBuiltins: true,
+			browser: true,
+		}),
+	],
+};

frontend/public/sw.js

@@ -31,7 +31,7 @@ scramjet.addEventListener("request", (e) => {
 	if (e.url.href.startsWith("https://fake-devtools.invalid")) {
 		// route the fake origin devtools requests to the local static files
 		e.response = (async () => {
-			let response = await fetch("/chi/" + e.url.pathname);
+			let response = await fetch("/" + e.url.pathname);
 
 			let rawHeaders = {};
 			for (const [key, value] of response.headers.entries()) {

frontend/src/CDP.ts

@@ -27,6 +27,7 @@ class CDPServer {
 		const resultMsg: any = {
 			id: msg.id,
 		};
+		console.log(msg);
 
 		try {
 			resultMsg.result = await this.callMethod(msg.method, msg.params);
@@ -65,6 +66,9 @@ class CDPServer {
 			}
 		}
 
+		if (params.sessionId) {
+		}
+
 		throw Error(`${method} unimplemented`);
 	}
 }
@@ -103,7 +107,7 @@ const Scopes = {
 			server.emit<Protocol.Target.AttachedToTargetEvent>(
 				"Target.attachedToTarget",
 				{
-					sessionId: "0",
+					sessionId: String(tab.id),
 					waitingForDebugger: false,
 					targetInfo: {
 						browserContextId: "0",

frontend/src/Tab.tsx

@@ -48,6 +48,9 @@ export class Tab extends StatefulClass {
 	devtoolsOpen: boolean = false;
 	devtoolsWidth = 200;
 
+	sendToChobitsu: ((message: string) => void) | null = null;
+	onChobitsuMessage: ((message: string) => void) | null = null;
+
 	constructor(public url: URL = new URL("puter://newtab")) {
 		super(createState(Object.create(Tab.prototype)));
 
@@ -74,6 +77,7 @@ export class Tab extends StatefulClass {
 		let injected = false;
 		frame.addEventListener("contextInit", (ctx) => {
 			injectContextMenu(ctx.client, this);
+			injectChobitsu(ctx.client, this);
 
 			// make sure it's top level, ctxInit calls for all frames too
 			if (ctx.window == frame.frame.contentWindow) {
@@ -167,6 +171,23 @@ export class Tab extends StatefulClass {
 	}
 }
 
+function injectChobitsu(client: ScramjetClient, tab: Tab) {
+	// the fake origin is defined in sw.js
+	const devtoolsUrl = "https://fake-devtools.invalid";
+	// make sure to create the element through the proxied document
+	let devtoolsScript = client.global.document.createElement("script");
+	devtoolsScript.setAttribute("src", devtoolsUrl + "/chobitsu_inject.js");
+
+	// @ts-expect-error
+	client.global.$onChobitsuMessage = (message: string) => {
+		tab.onChobitsuMessage(message);
+	};
+	tab.sendToChobitsu = (message: string) => {
+		// @ts-expect-error
+		client.global.$sendToChobitsu(message);
+	};
+}
+
 function injectDevtools(client: ScramjetClient, tab: Tab) {
 	// right here there's three contexts, the main window, the page frame, and the empty devtools frame
 	// chobitsu is injected into the page frame (loaded from https://fake-devtools.invalid/target.js), and then will try and inject

frontend/vite.config.ts

@@ -12,6 +12,10 @@ export default defineConfig({
 					src: scramjetPath + "/*",
 					dest: "scram/",
 				},
+				{
+					src: "../chobitsu_inject/output/chobitsu_inject.js",
+					dest: ".",
+				},
 			],
 		}),
 	],