[cdp] properly wait for chobitsu init instead of waiting arbitrary time

Author: velzie

chobitsu_inject/index.js

@@ -1,3 +1,4 @@
 import chobitsu from "chobitsu";
 window.$sendToChobitsu = (message) => chobitsu.sendRawMessage(message);
 chobitsu.setOnMessage(window.$onChobitsuMessage);
+window.$onChobitsuInit();

frontend/src/CDP.ts

@@ -209,10 +209,10 @@ const Scopes = {
 			params: Protocol.Target.CreateTargetRequest
 		): Promise<Protocol.Target.CreateTargetResponse> {
 			console.log("creating new target");
-			const tab = browser.newTab(new URL("http://127.0.0.1:5014/"));
+			const tab = browser.newTab(new URL("https://google.com/"));
 			const sessionid = server.initSession(tab);
 
-			await new Promise((resolve) => setTimeout(resolve, 1000));
+			await tab.waitForChobitsuInit;
 			server.emit<Protocol.Target.AttachedToTargetEvent>(
 				"Target.attachedToTarget",
 				{

frontend/src/Tab.tsx

@@ -50,6 +50,7 @@ export class Tab extends StatefulClass {
 
 	sendToChobitsu: ((message: string) => void) | null = null;
 	onChobitsuMessage: ((message: string) => void) | null = null;
+	waitForChobitsuInit: Promise<void>;
 
 	constructor(public url: URL = new URL("puter://newtab")) {
 		super(createState(Object.create(Tab.prototype)));
@@ -73,11 +74,16 @@ export class Tab extends StatefulClass {
 		this.width = 0;
 		this.pos = 0;
 
+		let resolver: () => void;
+		this.waitForChobitsuInit = new Promise((resolve) => {
+			resolver = resolve;
+		});
+
 		addHistoryListeners(frame, this);
 		let injected = false;
 		frame.addEventListener("contextInit", (ctx) => {
 			injectContextMenu(ctx.client, this);
-			injectChobitsu(ctx.client, this);
+			injectChobitsu(ctx.client, this, resolver);
 
 			// make sure it's top level, ctxInit calls for all frames too
 			if (ctx.window == frame.frame.contentWindow) {
@@ -171,7 +177,11 @@ export class Tab extends StatefulClass {
 	}
 }
 
-function injectChobitsu(client: ScramjetClient, tab: Tab) {
+function injectChobitsu(
+	client: ScramjetClient,
+	tab: Tab,
+	resolver: () => void
+) {
 	console.log("injecting chobitsu");
 	// the fake origin is defined in sw.js
 	const devtoolsUrl = "https://fake-devtools.invalid";
@@ -188,6 +198,11 @@ function injectChobitsu(client: ScramjetClient, tab: Tab) {
 	client.global.$onChobitsuMessage = (message: string) => {
 		if (tab.onChobitsuMessage) tab.onChobitsuMessage(message);
 	};
+
+	// @ts-expect-error
+	client.global.$onChobitsuInit = () => {
+		resolver();
+	};
 	tab.sendToChobitsu = (message: string) => {
 		console.warn(message);
 		// @ts-expect-error