Run puppeteer in browser (POC)

puppeteer · Apr 13, 2018 · d68b4f6 · d68b4f6
1 parent 98bb261
commit d68b4f6
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,4 @@ package-lock.json
 yarn.lock
 /node6
 /lib/protocol.d.ts
+browser.js
diff --git a/lib/BrowserWebSocket.js b/lib/BrowserWebSocket.js
@@ -0,0 +1 @@
+module.exports = window.WebSocket;
diff --git a/lib/Connection.js b/lib/Connection.js
@@ -29,9 +29,9 @@ class Connection extends EventEmitter {
    */
   static async createForWebSocket(url, delay = 0) {
     return new Promise((resolve, reject) => {
-      const ws = new WebSocket(url, { perMessageDeflate: false });
-      ws.on('open', () => resolve(new Connection(url, ws, delay)));
-      ws.on('error', reject);
+      const ws = new WebSocket(url, [], { perMessageDeflate: false });
+      ws.addEventListener('open', () => resolve(new Connection(url, ws, delay)));
+      ws.addEventListener('error', ({ error }) => reject(error));
     });
   }
 
@@ -59,8 +59,8 @@ class Connection extends EventEmitter {
     this._delay = delay;
 
     this._transport = transport;
-    this._transport.on('message', this._onMessage.bind(this));
-    this._transport.on('close', this._onClose.bind(this));
+    this._transport.addEventListener('message', ({ data }) => this._onMessage(data));
+    this._transport.addEventListener('close', this._onClose.bind(this));
     /** @type {!Map<string, !CDPSession>}*/
     this._sessions = new Map();
   }

diff --git a/lib/InBrowserLauncher.js b/lib/InBrowserLauncher.js
@@ -0,0 +1,39 @@
+const {Connection} = require('./Connection');
+const Browser = require('./Browser');
+const {debugError} = require('./helper');
+
+class Launcher {
+  /**
+   * @param {!LaunchOptions=} options
+   * @return {!Promise<!Browser>}
+   */
+  static async launch(options) {
+    throw new Error('Unsupported');
+  }
+
+  /**
+   * @return {!Array<string>}
+   */
+  static defaultArgs() {
+    throw new Error('Unsupported');
+  }
+
+  /**
+   * @return {string}
+   */
+  static executablePath() {
+    throw new Error('Unsupported');
+  }
+
+  /**
+   * @param {!Object=} options
+   * @return {!Promise<!Browser>}
+   */
+  static async connect(options = {}) {
+    const connectionDelay = options.slowMo || 0;
+    const connection = await Connection.createForWebSocket(options.browserWSEndpoint, connectionDelay);
+    return Browser.create(connection, options, null, () => connection.send('Browser.close').catch(debugError));
+  }
+}
+
+module.exports = Launcher;
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "coverage": "cross-env COVERAGE=true npm run unit",
     "test-node6-transformer": "node utils/node6-transform/test/test.js",
     "build": "node utils/node6-transform/index.js",
+    "build-web": "browserify -r ./lib/Puppeteer.js:puppeteer -o ./browser.js",
     "unit-node6": "node node6/test/test.js",
     "tsc": "node utils/protocol-types-generator && tsc -p .",
     "prepublishOnly": "npm run build",
@@ -45,6 +46,7 @@
     "@types/node": "^8.0.26",
     "@types/rimraf": "^2.0.2",
     "@types/ws": "^3.0.2",
+    "browserify": "^16.2.0",
     "commonmark": "^0.27.0",
     "cross-env": "^5.0.5",
     "eslint": "^4.0.0",
@@ -57,5 +59,11 @@
     "pngjs": "^3.2.0",
     "text-diff": "^1.0.1",
     "typescript": "~2.8.1"
+  },
+  "browser": {
+    "./index.js": "./browser.js",
+    "./lib/Launcher.js": "./lib/InBrowserLauncher.js",
+    "./lib/BrowserFetcher.js": false,
+    "ws": "./lib/BrowserWebSocket"
   }
 }
diff --git a/test.html b/test.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>test puppeteer</title>
+  <script src="./browser.js"></script>
+  <script>
+    const puppeteer = require('puppeteer');
+
+    puppeteer.connect({ browserWSEndpoint: 'ws://localhost:3000' })
+      .then(async browser => {
+        const page = await browser.newPage();
+        await page.goto('https://example.com');
+        console.log(await page.content());
+      });
+  </script>
+</head>
+<body>
+
+</body>
+</html>