fix misusage of cdp api

chromium.js

 class HeadlessChromium
 {
-	constructor(websocket)
+	constructor(url)
 	{
-		this.websocket = websocket
+		this.url = url
+		this.browserWebsocket = this.getBrowserWebsocketUrl()
+		this.pageWebsockets = new Map()
 	}
 
-	// session websocket != page websocket
-	// page websocket can be found at localhost:<port>/json/version
-	// at webSocketDebuggerUrl where targetId = id
-	// question? how to make localhost GET request to get this resource ...
-	async runCommand(command, params = {})
+	getBrowserWebsocketUrl()
+	{
+		var xmlHttp = new XMLHttpRequest();
+		xmlHttp.open("GET", this.url + "/json/version", false);
+		xmlHttp.send(null);
+		return JSON.parse(xmlHttp.responseText).webSocketDebuggerUrl
+	}
+
+	getPageWebsocket(page)
+	{
+		var xmlHttp = new XMLHttpRequest();
+		xmlHttp.open("GET", this.url + "/json/list", false);
+		xmlHttp.send(null);
+		for (const target of JSON.parse(xmlHttp.responseText))
+		{
+			if (target.id = page)
+			{
+				return target.webSocketDebuggerUrl
+			}
+		}
+	}
+
+	async runCommand(websocket, command, params = {})
 	{
 		return new Promise((resolve, reject) => {
-			var server = new WebSocket(this.websocket)
+			var server = new WebSocket(websocket)
 
 			server.onopen = () => {
 				var message = {id: 0, method: command, params: params}
@@ -43,58 +63,52 @@ class HeadlessChromium
 		})
 	}
 
-	async getVersion()
+	async runBrowserCommand(command, params = {})
 	{
-		return await this.runCommand("Browser.getVersion")
+		return await this.runCommand(this.browserWebsocket, command, params)
 	}
 
-	async enableDOM()
+	async runPageCommand(page, command, params = {})
 	{
-		return await this.runCommand("DOM.enable")
-	}
+		var websocket = this.pageWebsockets.get(page)
 
-	async enableNetwork()
-	{
-		return await this.runCommand("Network.enable")
+		if (!websocket)
+		{
+			console.error(page + ' is not a valid page. Use browser.createPage() to create a valid page.')
+			return
+		}
+
+		return await this.runCommand(websocket, command, params)
 	}
 
-	async enablePage()
+	async getVersion()
 	{
-		return await this.runCommand("Page.enable")
+		return await this.runBrowserCommand("Browser.getVersion")
 	}
 
 	async openNewPage(url, width = 1920, height = 1080)
 	{
-		var response = await this.runCommand("Target.createTarget", {url: url, width: width, height: height})
-		return response.targetId
+		var response = await this.runBrowserCommand("Target.createTarget", {url: url, width: width, height: height})
+		var page = response.targetId
+		this.pageWebsockets.set(page, this.getPageWebsocket(page))
+		return page
 	}
 
 	async closePage(page)
 	{
-		return await this.runCommand("Target.closeTarget", {targetId: page})
+		this.pageWebsockets.delete(page)
+		return await this.runBrowserCommand("Target.closeTarget", {targetId: page})
 	}
 
-	async focusPage(page)
+	async enablePage(page)
 	{
-		await this.runCommand("Target.activateTarget", {targetId: page})
-		var response = await this.runCommand("Target.attachToTarget", {targetId: page})
-		await this.runCommand(response.method, response.params)
-		console.log(response)
+		return await this.runPageCommand(page, "Page.enable")
 	}
 
-	async printToPdf()
+	async printToPdf(page)
 	{
-		var response = await this.runCommand("Page.printToPDF")
+		// wip: printing fails for some reason
+		var response = await this.runPageCommand(page, "Page.printToPDF")
 		return response
 	}
-
-	async canEmulate()
-	{
-		return await this.runCommand("Emulation.canEmulate")
-	}
-
-	async getPages()
-	{
-		return await this.runCommand("Target.getTargets")
-	}
 }

connection.js

+class RequestHandler
+{
+	constructor()
+	{
+		this.buffer = ["https://www.example.com"]
+	}
 
-var xmlHttp = new XMLHttpRequest();
-xmlHttp.open("GET", "http://localhost:9222/json/version", false);
-xmlHttp.send(null);
-console.log(xmlHttp.responseText);
\ No newline at end of file
+	hasNextRequest()
+	{
+		return this.buffer.length != 0
+	}
+
+	getNextRequest()
+	{
+		return this.buffer.pop()
+	}
+
+	publishResults(data)
+	{
+		console.log("result: \n" + data)
+	}
+}
\ No newline at end of file

index.html

 <!DOCTYPE html>
 <html>
-    <head>
-        <title>HTML to PDF</title>
-    </head>
-    <body>
-    	<script src="connection.js"></script>
-    	<script src="chromium.js"></script>
-    	<script>
-    		var searchParams = (new URL(window.location.href)).searchParams
-    		var websocketUrl = searchParams.get("websocket")
-    		var browser = new HeadlessChromium(websocketUrl)
-			var urls = ["https://www.example.com"] 
-
-    		async function html2pdf(url)
-    		{
-				var pdf = await browser.getPages()
-				console.log(pdf)
-				return
+	<head>
+		<title>HTML to PDF</title>
+	</head>
+	<body>
+		<script src="connection.js"></script>
+		<script src="chromium.js"></script>
+		<script>
+			/*
+			Usage: Start google chromium with the following command line flags.
+				--headless
+				--remote-debugging-port=9222
+				--disable-web-security
+				--user-data-dir=/var/tmp/chrome
+			The last two flags can be ommited if we find another way to enable
+			Cross-Origin Resource Sharing.
+			*/
+			var searchParams = (new URL(window.location.href)).searchParams
+			var browser = new HeadlessChromium(searchParams.get("browser"))
+			var handler = new RequestHandler()
 
+			async function html2pdf(url)
+			{
 				var page = await browser.openNewPage(url)
-				await browser.focusPage(page)
-				await browser.enablePage()
-				var pdf = browser.printToPdf()
+				await browser.enablePage(page)
+				var pdf = browser.printToPdf(page)
 				await browser.closePage(page)
 				return pdf
-    		}
-    		
-    		async function mainloop()
-    		{
-				if (urls.length == 0)
+			}
+			
+			async function mainloop()
+			{
+				if (!handler.hasNextRequest())
 				{
 					setTimeout(mainloop, 30 /* seconds */ * 1000)
 					return
 				}
 
-				var pdf = await html2pdf(urls.pop())
-				console.log(pdf)
+				var url = handler.getNextRequest()
+				var pdf = await html2pdf(url)
+				handler.publishResults(pdf)
 				setTimeout(mainloop, 3 /* seconds */ * 1000)
-    		}
-    		mainloop()
-    	</script>
-    </body>
+			}
+			mainloop()
+		</script>
+	</body>
 </html>