[frontend] add page ipc and handle sending title and favicon

Author: velzie

packages/chrome/src/IsolatedFrame.tsx

@@ -15,6 +15,15 @@ import { ElementType, type Handler, Parser } from "htmlparser2";
 import { type ChildNode, DomHandler, Element, Comment, Node } from "domhandler";
 import * as tldts from "tldts";
 
+import type {
+	Chromebound,
+	ChromeboundMethods,
+	Framebound,
+	FrameboundMethods,
+} from "../../inject/src/types";
+import type { Tab } from "./Tab";
+import { browser } from "./Browser";
+
 const ISOLATION_ORIGIN = import.meta.env.VITE_ISOLATION_ORIGIN;
 
 const cfg = {
@@ -161,7 +170,7 @@ export class IsolatedFrame {
 	}
 }
 
-const inject_script = "/page_inject.js";
+const inject_script = "/inject.js";
 
 const methods = {
 	async fetch(
@@ -254,7 +263,6 @@ const methods = {
 			}
 
 			const head = findhead(handler.root as Node as Element)!;
-			console.log(head);
 			head.children.unshift(new Element("script", { src: inject_script }));
 		});
 
@@ -359,3 +367,88 @@ async function makeAllResponse(): Promise<ScramjetFetchResponse> {
 		statusText: "OK",
 	};
 }
+
+let synctoken = 0;
+let syncPool: { [token: number]: (val: any) => void } = {};
+export function sendFrame<T extends keyof Framebound>(
+	controller: Controller,
+	type: T,
+	message: Framebound[T][0]
+): Promise<Framebound[T][1]> {
+	let token = synctoken++;
+
+	controller.window.postMessage(
+		{
+			$ipc$type: "request",
+			$ipc$token: token,
+			$ipc$message: {
+				type,
+				message,
+			},
+		},
+		"*"
+	);
+
+	return new Promise((res) => {
+		syncPool[token] = res;
+	});
+}
+
+window.addEventListener("message", (event) => {
+	let data = event.data;
+	if (!(data && data.$ipc$type)) return;
+
+	if (data.$ipc$type === "response") {
+		let token = data.$ipc$token;
+		if (typeof token !== "number") return;
+		let cb = syncPool[token];
+		if (cb) {
+			cb(data.$ipc$message);
+			delete syncPool[token];
+		}
+	} else if (data.$ipc$type === "request") {
+		const { type, message } = data.$ipc$message;
+		const token = data.$ipc$token;
+
+		const tab =
+			browser.tabs.find((t) => t.frame.frame.contentWindow === event.source) ||
+			null;
+
+		chromemethods[type as keyof ChromeboundMethods](tab, message).then(
+			(response: any) => {
+				(event.source as Window).postMessage(
+					{
+						$ipc$type: "response",
+						$ipc$token: token,
+						$ipc$message: response,
+					},
+					"*"
+				);
+			}
+		);
+	}
+});
+
+type ChromeboundMethods = {
+	[K in keyof Chromebound]: (
+		tab: Tab | null,
+		arg: Chromebound[K][0]
+	) => Promise<Chromebound[K][1]>;
+};
+
+const chromemethods: ChromeboundMethods = {
+	titlechange: async (tab, { title, icon }) => {
+		console.log("title changed...", tab, title, icon);
+		if (tab) {
+			if (title) {
+				tab.title = title;
+				tab.history.current().title = title;
+			}
+			if (icon) {
+				tab.icon = icon;
+				tab.history.current().favicon = icon;
+			}
+		}
+	},
+	contextmenu: async (controller, { x, y }) => {},
+};

packages/inject/package.json

@@ -12,6 +12,7 @@
 	"license": "ISC",
 	"packageManager": "[email protected]",
 	"dependencies": {
+		"@mercuryworkshop/scramjet": "link:../scramjet",
 		"chobitsu": "workspace:*",
 		"html-to-image": "^1.11.13"
 	}

packages/inject/src/index.ts

@@ -1,6 +1,73 @@
 import chobitsu from "chobitsu";
 import * as h2 from "html-to-image";
-window.h2 = h2;
-window.$sendToChobitsu = (message) => chobitsu.sendRawMessage(message);
-chobitsu.setOnMessage(window.$onChobitsuMessage);
-window.$onChobitsuInit();
+import { SCRAMJETCLIENT } from "@mercuryworkshop/scramjet/bundled";
+import { FrameboundMethods } from "./types";
+import { sendChrome } from "./ipc";
+
+export const client = self[SCRAMJETCLIENT];
+export const chromeframe = top!;
+
+export const methods: FrameboundMethods = {
+	async navigate({ url }) {
+		return "a";
+	},
+};
+
+let cachedfaviconurl: string | null = null;
+function setupTitleWatcher() {
+	const observer = new MutationObserver(() => {
+		const title = document.querySelector("title");
+		if (title) {
+			sendChrome("titlechange", { title: title.textContent });
+		}
+		const favicon = document.querySelector(
+			"link[rel='icon'], link[rel='shortcut icon']"
+		);
+
+		const loadAndSendData = async (href: string) => {
+			let res = await fetch(href);
+			let blob = await res.blob();
+			const reader = new FileReader();
+			reader.onload = () => {
+				sendChrome("titlechange", { icon: reader.result as string });
+			};
+			reader.onabort = () => {
+				console.warn("Failed to read favicon");
+				cachedfaviconurl = null;
+			};
+			reader.readAsDataURL(blob);
+		};
+
+		if (favicon) {
+			const iconhref = favicon.getAttribute("href");
+			if (iconhref) {
+				if (iconhref !== cachedfaviconurl) {
+					cachedfaviconurl = iconhref;
+					loadAndSendData(iconhref);
+				}
+			}
+		} else {
+			if (cachedfaviconurl !== "/favicon.ico") {
+				// check if there's a favicon.ico
+				let img = new Image();
+				img.src = "/favicon.ico";
+				img.onload = () => {
+					if (img.width > 0 && img.height > 0) {
+						// it loads, send it
+						cachedfaviconurl = img.src;
+						loadAndSendData(img.src);
+					}
+				};
+				img.onerror = () => {
+					// nope...
+				};
+			}
+		}
+	});
+	observer.observe(document, {
+		childList: true,
+		subtree: true,
+	});
+}
+
+setupTitleWatcher();

packages/inject/src/ipc.ts

@@ -0,0 +1,58 @@
+import { chromeframe, methods } from ".";
+import { Chromebound } from "./types";
+
+let synctoken = 0;
+let syncPool: { [token: number]: (val: any) => void } = {};
+export function sendChrome<T extends keyof Chromebound>(
+	type: T,
+	message: Chromebound[T][0]
+): Promise<Chromebound[T][1]> {
+	let token = synctoken++;
+
+	chromeframe.postMessage(
+		{
+			$ipc$type: "request",
+			$ipc$token: token,
+			$ipc$message: {
+				type,
+				message,
+			},
+		},
+		"*"
+	);
+
+	return new Promise((res) => {
+		syncPool[token] = res;
+	});
+}
+
+window.addEventListener("message", (event) => {
+	// TODO: this won't work in puter
+	if (event.source !== chromeframe) return;
+	let data = event.data;
+	if (!(data && data.$ipc$type)) return;
+
+	if (data.$ipc$type === "response") {
+		let token = data.$ipc$token;
+		if (typeof token !== "number") return;
+		let cb = syncPool[token];
+		if (cb) {
+			cb(data.$ipc$message);
+			delete syncPool[token];
+		}
+	} else if (data.$ipc$type === "request") {
+		const { type, message } = data.$ipc$message;
+		const token = data.$ipc$token;
+
+		methods[type](message).then((response: any) => {
+			chromeframe.postMessage(
+				{
+					$ipc$type: "response",
+					$ipc$token: token,
+					$ipc$message: response,
+				},
+				"*"
+			);
+		});
+	}
+});

packages/inject/src/types.d.ts

@@ -0,0 +1,27 @@
+export type FrameboundMethods = {
+	[K in keyof Framebound]: (arg: Framebound[K][0]) => Promise<Framebound[K][1]>;
+};
+
+export type Chromebound = {
+	contextmenu: [
+		{
+			x: number;
+			y: number;
+		},
+	];
+	titlechange: [
+		{
+			title?: string;
+			icon?: string;
+		},
+	];
+};
+
+export type Framebound = {
+	navigate: [
+		{
+			url: string;
+		},
+		string,
+	];
+};