use chrome devtools protocol directly

package/src/import_map.json

@@ -12,13 +12,15 @@
     "streams/": "https://deno.land/std@0.138.0/streams/",
     "textproto/": "https://deno.land/std@0.138.0/textproto/",
     "uuid/": "https://deno.land/std@0.138.0/uuid/",
+    "node/": "https://deno.land/std@0.138.0/node/",
     "cliffy/": "https://deno.land/x/cliffy@v0.24.2/",
     "dayjs/": "https://cdn.skypack.dev/dayjs@1.8.21/",
     "moment-guess": "https://cdn.skypack.dev/moment-guess@1.2.4",
     "deno_dom/": "https://deno.land/x/deno_dom@v0.1.20-alpha/",
     "cache/": "https://deno.land/x/cache@0.2.12/",
     "media_types/": "https://deno.land/x/media_types@v2.10.1/",
     "observablehq/parser": "https://cdn.skypack.dev/@observablehq/parser@4.5.0",
+    "events/": "https://deno.land/x/events@v1.0.0/",
     "xmlp/": "https://deno.land/x/xmlp@v0.2.8/",
     "ajv": "https://cdn.skypack.dev/ajv@8.8.2",
     "blueimpMd5": "https://cdn.skypack.dev/blueimp-md5@2.19.0",
@@ -104,4 +106,4 @@
       "/npm:set-immediate-shim@1.0?dew": "./resources/vendor/dev.jspm.io/npm_set-immediate-shim@1.0.js"
     }
   }
-}
+}

src/core/cri/cri.ts

@@ -0,0 +1,171 @@
+/**
+ * cri.ts
+ *
+ * Chrome Remote Interface
+ *
+ * Copyright (c) 2022 by RStudio, PBC.
+ */
+
+import { decode } from "encoding/base64.ts";
+import cdp from "./deno-cri/index.js";
+import { getBrowserExecutablePath } from "../puppeteer.ts";
+import { Semaphore } from "../lib/semaphore.ts";
+import { findOpenPort } from "../port.ts";
+
+async function waitForServer(port: number, timeout = 3000) {
+  const interval = 50;
+  let soFar = 0;
+
+  do {
+    try {
+      const response = await fetch(`http://localhost:${port}/json/list`);
+      if (response.status !== 200) {
+        soFar += interval;
+        await new Promise((resolve) => setTimeout(resolve, interval));
+        continue;
+      } else {
+        return true;
+      }
+    } catch (_e) {
+      soFar += interval;
+      await new Promise((resolve) => setTimeout(resolve, interval));
+    }
+  } while (soFar < timeout);
+  return false;
+}
+
+const criSemaphore = new Semaphore(1);
+
+export function withCriClient<T>(
+  fn: (client: Awaited<ReturnType<typeof criClient>>) => Promise<T>,
+  appPath?: string,
+  port?: number,
+): Promise<T> {
+  if (port === undefined) {
+    port = findOpenPort(9222);
+  }
+
+  return criSemaphore.runExclusive(async () => {
+    const client = await criClient(appPath, port);
+    try {
+      const result = await fn(client);
+      await client.close();
+      return result;
+    } catch (e) {
+      await client.close();
+      throw e;
+    }
+  });
+}
+
+export async function criClient(appPath?: string, port?: number) {
+  if (port === undefined) {
+    port = findOpenPort(9222);
+  }
+  if (appPath === undefined) {
+    appPath = await getBrowserExecutablePath();
+  }
+
+  const cmd = [
+    appPath as string,
+    "--headless",
+    "--no-sandbox",
+    "--single-process",
+    "--disable-gpu",
+    `--remote-debugging-port=${port}`,
+  ];
+  const browser = Deno.run({ cmd, stdout: "piped", stderr: "piped" });
+
+  if (!(await waitForServer(port))) {
+    throw new Error("Couldn't find open server");
+  }
+
+  // deno-lint-ignore no-explicit-any
+  let client: any;
+
+  const result = {
+    close: async () => {
+      await client.close();
+      browser.close();
+    },
+
+    rawClient: () => client,
+
+    open: async (url: string) => {
+      client = await cdp();
+      const { Network, Page } = client;
+      await Network.enable();
+      await Page.enable();
+      await Page.navigate({ url });
+      return new Promise((fulfill, _reject) => {
+        Page.loadEventFired(() => {
+          fulfill(null);
+        });
+      });
+    },
+
+    docQuerySelectorAll: async (cssSelector: string): Promise<number[]> => {
+      await client.DOM.enable();
+      const doc = await client.DOM.getDocument();
+      const nodeIds = await client.DOM.querySelectorAll({
+        nodeId: doc.root.nodeId,
+        selector: cssSelector,
+      });
+      return nodeIds.nodeIds;
+    },
+
+    contents: async (cssSelector: string): Promise<string[]> => {
+      const nodeIds = await result.docQuerySelectorAll(cssSelector);
+      return Promise.all(
+        // deno-lint-ignore no-explicit-any
+        nodeIds.map(async (nodeId: any) => {
+          return (await client.DOM.getOuterHTML({ nodeId })).outerHTML;
+        }),
+      );
+    },
+
+    // defaults to screenshotting at 4x scale = 392dpi.
+    screenshots: async (
+      cssSelector: string,
+      scale = 4,
+    ): Promise<{ nodeId: number; data: Uint8Array }[]> => {
+      const nodeIds = await result.docQuerySelectorAll(cssSelector);
+      const lst: { nodeId: number; data: Uint8Array }[] = [];
+      for (const nodeId of nodeIds) {
+        // the docs say that inline elements might return more than one box
+        // TODO what do we do in that case?
+        let quad;
+        try {
+          quad = (await client.DOM.getContentQuads({ nodeId })).quads[0];
+        } catch (_e) {
+          // TODO report error?
+          continue;
+        }
+        const minX = Math.min(quad[0], quad[2], quad[4], quad[6]);
+        const maxX = Math.max(quad[0], quad[2], quad[4], quad[6]);
+        const minY = Math.min(quad[1], quad[3], quad[5], quad[7]);
+        const maxY = Math.max(quad[1], quad[3], quad[5], quad[7]);
+        try {
+          const screenshot = await client.Page.captureScreenshot({
+            clip: {
+              x: minX,
+              y: minY,
+              width: maxX - minX,
+              height: maxY - minY,
+              scale,
+            },
+            fromSurface: true,
+            captureBeyondViewport: true,
+          });
+          const buf = decode(screenshot.data);
+          lst.push({ nodeId, data: buf });
+        } catch (_e) {
+          // TODO report error?
+          continue;
+        }
+      }
+      return lst;
+    },
+  };
+  return result;
+}

src/core/cri/deno-cri/README.md

@@ -0,0 +1,3 @@
+## A deno port of https://github.com/cyrus-and/chrome-remote-interface
+
+This directory contains a minimal, self-contained deno port of https://github.com/cyrus-and/chrome-remote-interface

src/core/cri/deno-cri/api.js

@@ -0,0 +1,98 @@
+/*
+ * api.js
+ *
+ * Copyright (c) 2021 Andrea Cardaci <cyrus.and@gmail.com>
+ *
+ * Deno port Copyright (C) 2022 by RStudio, PBC
+ */
+
+function arrayToObject(parameters) {
+  const keyValue = {};
+  parameters.forEach((parameter) => {
+    const name = parameter.name;
+    delete parameter.name;
+    keyValue[name] = parameter;
+  });
+  return keyValue;
+}
+
+function decorate(to, category, object) {
+  to.category = category;
+  Object.keys(object).forEach((field) => {
+    // skip the 'name' field as it is part of the function prototype
+    if (field === "name") {
+      return;
+    }
+    // commands and events have parameters whereas types have properties
+    if (
+      (category === "type" && field === "properties") ||
+      field === "parameters"
+    ) {
+      to[field] = arrayToObject(object[field]);
+    } else {
+      to[field] = object[field];
+    }
+  });
+}
+
+function addCommand(chrome, domainName, command) {
+  const commandName = `${domainName}.${command.name}`;
+  const handler = (params, sessionId, callback) => {
+    return chrome.send(commandName, params, sessionId, callback);
+  };
+  decorate(handler, "command", command);
+  chrome[commandName] = chrome[domainName][command.name] = handler;
+}
+
+function addEvent(chrome, domainName, event) {
+  const eventName = `${domainName}.${event.name}`;
+  const handler = (sessionId, handler) => {
+    if (typeof sessionId === "function") {
+      handler = sessionId;
+      sessionId = undefined;
+    }
+    const rawEventName = sessionId ? `${eventName}.${sessionId}` : eventName;
+    if (typeof handler === "function") {
+      chrome.on(rawEventName, handler);
+      return () => chrome.removeListener(rawEventName, handler);
+    } else {
+      return new Promise((fulfill, _reject) => {
+        chrome.once(rawEventName, fulfill);
+      });
+    }
+  };
+  decorate(handler, "event", event);
+  chrome[eventName] = chrome[domainName][event.name] = handler;
+}
+
+function addType(chrome, domainName, type) {
+  const typeName = `${domainName}.${type.id}`;
+  const help = {};
+  decorate(help, "type", type);
+  chrome[typeName] = chrome[domainName][type.id] = help;
+}
+
+export function prepare(object, protocol) {
+  // assign the protocol and generate the shorthands
+  object.protocol = protocol;
+  protocol.domains.forEach((domain) => {
+    const domainName = domain.domain;
+    object[domainName] = {};
+    // add commands
+    (domain.commands || []).forEach((command) => {
+      addCommand(object, domainName, command);
+    });
+    // add events
+    (domain.events || []).forEach((event) => {
+      addEvent(object, domainName, event);
+    });
+    // add types
+    (domain.types || []).forEach((type) => {
+      addType(object, domainName, type);
+    });
+    // add utility listener for each domain
+    object[domainName].on = (eventName, handler) => {
+      return object[domainName][eventName](handler);
+    };
+  });
+}