[chrome] migrate to bundled scramjet

Author: velzie

packages/chrome/index.html

@@ -6,7 +6,6 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Vite + TS</title>
 
-		<script src="/scram/scramjet.all.js"></script>
 		<script src="https://js.puter.com/v2/"></script>
 	</head>
 

packages/chrome/src/IsolatedFrame.tsx

@@ -14,7 +14,7 @@ import {
 } from "@mercuryworkshop/scramjet/bundled";
 
 import scramjetWASM from "../../scramjet/dist/scramjet.wasm.wasm?url";
-import scramjetAll from "../../scramjet/dist/scramjet.all.js?url";
+import scramjetAll from "../../scramjet/dist/scramjet.js?url";
 import injectScript from "../../inject/dist/inject.js?url";
 import { BareClient } from "@mercuryworkshop/bare-mux-custom";
 import { ElementType, type Handler, Parser } from "htmlparser2";
@@ -34,7 +34,11 @@ import {
 	iconSearch,
 } from "./icons";
 
-import type { Chromebound, Framebound } from "../../inject/src/types";
+import type {
+	Chromebound,
+	Framebound,
+	FrameSequence,
+} from "../../inject/src/types";
 import type { Tab } from "./Tab";
 import { browser } from "./Browser";
 import { createMenu } from "./components/Menu";
@@ -60,11 +64,6 @@ const cfg = {
 		templocid: "$scramjet$temploc",
 		tempunusedid: "$scramjet$tempunused",
 	},
-	files: {
-		wasm: "/scram/scramjet.wasm.wasm",
-		all: "/scram/scramjet.all.js",
-		sync: "/scram/scramjet.sync.js",
-	},
 	flags: {
 		syncxhr: false,
 		strictRewrites: true,
@@ -92,13 +91,13 @@ const cfg = {
 						return decodeURIComponent(url);
 					}`,
 	},
+	maskedfiles: ["inject.js", "scramjet.wasm.js"],
 };
 
 setConfig(cfg);
 
 // you can get to any frame by window.frames[index][index]...
 // so we can encode a certain frame as a sequence of indices to reach it, and then it will be available from any other frame, even cross-origin
-type FrameSequence = number[];
 
 function findSelfSequence(
 	target: Window,
@@ -161,6 +160,9 @@ addEventListener("message", async (e) => {
 	}
 });
 
+const virtualWasmPath = "/scramjet.wasm.js";
+const virtualInjectPath = "/inject.js";
+
 const getInjectScripts: ScramjetInterface["getInjectScripts"] = (
 	meta,
 	handler,
@@ -169,72 +171,13 @@ const getInjectScripts: ScramjetInterface["getInjectScripts"] = (
 	script
 ) => {
 	const injected = `
-		{
-			const top = self.top;
-			const sequence = ${JSON.stringify(findSelfSequence(self)!)};
-			const target = sequence.reduce((win, idx) => win.frames[idx], top);
-			let counter = 0;
-
-			let syncPool = new Map();
-			let listeners = new Map();
-
-			addEventListener("message", async (e) => {
-				if (!e.data || !("$scramjetipc$type" in e.data)) return;
-				const type = e.data.$scramjetipc$type;
-				if (type === "response") {
-					const token = e.data.$scramjetipc$token;
-					const message = e.data.$scramjetipc$message;
-
-					const cb = syncPool.get(token);
-					if (cb) {
-						cb(message);
-						syncPool.delete(token);
-					}
-				} else if (type === "request") {
-					const method = e.data.$scramjetipc$method;
-					const message = e.data.$scramjetipc$message;
-					const token = e.data.$scramjetipc$token;
-
-					const fn = listeners.get(method);
-					if (fn) {
-						const response = await fn(message);
-						e.source.postMessage({
-							$scramjetipc$type: "response",
-							$scramjetipc$token: token,
-							$scramjetipc$message: response,
-						});
-					} else {
-						console.error("Unknown scramjet ipc clientbound method", method);
-					}
-				}
-			});
-
-			const client = $scramjetLoadClient().loadAndHook({
-				interface: {
-					getInjectScripts: ${getInjectScripts.toString()},
-					onClientbound: function(type, callback) {
-						listeners.set(type, callback);
-				 	},
-					sendServerbound: async function(type, msg) {
-						const token = counter++;
-						target.postMessage({
-							$scramjetipc$type: "request",
-							$scramjetipc$method: type,
-							$scramjetipc$token: token,
-							$scramjetipc$message: msg,
-						}, "*");
-
-						return new Promise((res) => {
-							syncPool.set(token, res);
-						});
-					}
-				},
-				config: ${JSON.stringify(config)},
-				cookies: ${JSON.stringify(cookieJar.dump())},
-				transport: null,
-			});
-			document.currentScript.remove();
-		}
+		$injectLoad({
+			sequence: ${JSON.stringify(findSelfSequence(self)!)},
+			config: ${JSON.stringify(config)},
+			cookies: ${JSON.stringify(cookieJar.dump())},
+			wisp: ${JSON.stringify(cfg.wisp)},
+		});
+		document.currentScript.remove();
 	`;
 
 	// for compatibility purpose
@@ -248,10 +191,9 @@ const getInjectScripts: ScramjetInterface["getInjectScripts"] = (
 	);
 
 	return [
-		script(config.files.wasm),
-		script(config.files.all),
+		script(virtualWasmPath),
+		script(virtualInjectPath),
 		script("data:application/javascript;base64," + base64Injected),
-		script(virtualInjectUrl),
 	];
 };
 setInterface({
@@ -287,20 +229,21 @@ setInterface({
 	getWorkerInjectScripts: (meta, js, config, type) => {
 		const module = type === "module";
 		let str = "";
-		const script = (script: keyof typeof config.files) => {
+		const script = (script: string) => {
 			if (module) {
-				str += `import "${config.files[script]}"\n`;
+				str += `import "${script}"\n`;
 			} else {
-				str += `importScripts("${config.files[script]}");\n`;
+				str += `importScripts("${script}");\n`;
 			}
 		};
-		script("wasm");
-		script("all");
-		str += `$scramjetLoadClient().loadAndHook({
-			config: ${JSON.stringify(config)},
-			interface: {},
-			transport: null,
-		});`;
+		script(virtualWasmPath);
+		// TODO
+		// script();
+		// str += `$scramjetLoadClient().loadAndHook({
+		// 	config: ${JSON.stringify(config)},
+		// 	interface: {},
+		// 	transport: null,
+		// });`;
 
 		return str;
 	},
@@ -341,8 +284,6 @@ function getRootDomain(url: URL): string {
 	return tldts.getDomain(url.href) || url.hostname;
 }
 
-const virtualInjectUrl = "/inject.js";
-
 function makeController(url: URL): Controller {
 	let originurl = new URL(ISOLATION_ORIGIN);
 	let baseurl = new URL(
@@ -427,11 +368,9 @@ const methods = {
 		data.initialHeaders = headers;
 
 		// handle scramjet.all.js and scramjet.wasm.js requests
-		if (data.rawUrl.pathname === cfg.files.wasm) {
+		if (data.rawUrl.pathname === virtualWasmPath) {
 			return [await makeWasmResponse(), undefined];
-		} else if (data.rawUrl.pathname === cfg.files.all) {
-			return [await makeAllResponse(), undefined];
-		} else if (data.rawUrl.pathname === virtualInjectUrl) {
+		} else if (data.rawUrl.pathname === virtualInjectPath) {
 			return [
 				await fetch(injectScript).then(async (x) => {
 					const text = await x.text();
@@ -537,7 +476,6 @@ window.addEventListener("message", async (event) => {
 });
 
 let wasmPayload: string | null = null;
-let allPayload: string | null = null;
 
 async function makeWasmResponse() {
 	if (!wasmPayload) {
@@ -567,20 +505,6 @@ async function makeWasmResponse() {
 	};
 }
 
-async function makeAllResponse(): Promise<ScramjetFetchResponse> {
-	if (!allPayload) {
-		const resp = await fetch(scramjetAll);
-		allPayload = await resp.text();
-	}
-
-	return {
-		body: allPayload,
-		headers: { "Content-Type": "application/javascript" },
-		status: 200,
-		statusText: "OK",
-	};
-}
-
 let synctoken = 0;
 let syncPool: { [token: number]: (val: any) => void } = {};
 export function sendFrame<T extends keyof Framebound>(

packages/chrome/src/Tab.tsx

@@ -9,10 +9,6 @@ import { HistoryPage } from "./pages/HistoryPage";
 import { SettingsPage } from "./pages/SettingsPage";
 import { serviceWorkerReady } from "./main";
 import { DownloadsPage } from "./pages/DownloadsPage";
-import {
-	ScramjetClient,
-	ScramjetFrame,
-} from "@mercuryworkshop/scramjet/bundled";
 import { IsolatedFrame } from "./IsolatedFrame";
 import { defaultFaviconUrl } from "./assets/favicon";
 
@@ -29,7 +25,7 @@ export class Tab extends StatefulClass {
 	id: number;
 	title: string | null;
 	frame: IsolatedFrame;
-	devtoolsFrame: ScramjetFrame;
+	devtoolsFrame: any;
 	screenshot: string | null = null;
 
 	icon: string | null;

packages/inject/package.json

@@ -13,6 +13,7 @@
 	"packageManager": "[email protected]",
 	"dependencies": {
 		"@mercuryworkshop/scramjet": "workspace:*",
+		"@mercuryworkshop/libcurl-transport": "workspace:*",
 		"chobitsu": "workspace:*",
 		"html-to-image": "^1.11.13"
 	}

packages/inject/src/contextmenu.ts

@@ -0,0 +1,37 @@
+import { sendChrome } from "./ipc";
+import { Chromebound } from "./types";
+
+export function setupContextMenu() {
+	// TODO: this needs to always be last
+	document.addEventListener("contextmenu", (e) => {
+		e.preventDefault();
+		const target = e.target;
+		const selection = getSelection()?.toString();
+
+		const resp: Chromebound["contextmenu"][0] = {
+			x: e.clientX,
+			y: e.clientY,
+			selection,
+		};
+
+		if (target instanceof HTMLImageElement) {
+			resp.image = {
+				src: target.src,
+				width: target.naturalWidth,
+				height: target.naturalHeight,
+			};
+		} else if (target instanceof HTMLAnchorElement) {
+			resp.anchor = {
+				href: target.href,
+			};
+		} else if (target instanceof HTMLVideoElement) {
+			resp.video = {
+				src: target.currentSrc,
+				width: target.videoWidth,
+				height: target.videoHeight,
+			};
+		}
+
+		sendChrome("contextmenu", resp);
+	});
+}

packages/inject/src/history.ts

@@ -0,0 +1,49 @@
+import { sendChrome } from "./ipc";
+import { client } from "./scramjet";
+
+export function setupHistoryEmulation() {
+	client.Proxy("History.prototype.pushState", {
+		apply(ctx) {
+			sendChrome("history_pushState", {
+				state: ctx.args[0],
+				title: ctx.args[1],
+				url: new URL(ctx.args[2], client.url).href,
+			});
+
+			ctx.return(undefined);
+		},
+	});
+
+	client.Proxy("History.prototype.replaceState", {
+		apply(ctx) {
+			sendChrome("history_replaceState", {
+				state: ctx.args[0],
+				title: ctx.args[1],
+				url: new URL(ctx.args[2], client.url).href,
+			});
+
+			ctx.return(undefined);
+		},
+	});
+	client.Proxy("History.prototype.back", {
+		apply(ctx) {
+			sendChrome("history_go", { delta: -1 });
+
+			ctx.return(undefined);
+		},
+	});
+	client.Proxy("History.prototype.forward", {
+		apply(ctx) {
+			sendChrome("history_go", { delta: 1 });
+
+			ctx.return(undefined);
+		},
+	});
+	client.Proxy("History.prototype.go", {
+		apply(ctx) {
+			sendChrome("history_go", { delta: ctx.args[0] });
+
+			ctx.return(undefined);
+		},
+	});
+}