Add the option to use "browserWSEndpoint" (#727)

* Update Client.js

* Update package.json

* Update package.json

* 🚨🔥 Fixed ESLint and removed old code.

* Update README.md

* Update README.md

* Update Client.js

* chore(deps): bump sharp from 0.26.3 to 0.28.3

Bumps [sharp](https://github.com/lovell/sharp) from 0.26.3 to 0.28.3.
- [Release notes](https://github.com/lovell/sharp/releases)
- [Changelog](https://github.com/lovell/sharp/blob/master/docs/changelog.md)
- [Commits](https://github.com/lovell/sharp/compare/v0.26.3...v0.28.3)

---
updated-dependencies:
- dependency-name: sharp
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* Update package.json

* Update README.md

* Update example.js

* Update README.md

Co-authored-by: Rajeh Taher <52720753+PurpShell@users.noreply.github.com>
Co-authored-by: Rajeh Taher <rajeh@reforward.tk>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Aliyss Snow <33941859+Aliyss@users.noreply.github.com>

README.md

@@ -17,6 +17,7 @@ Please note that Node v14+ is required.
 
 ```js
 const { Client } = require('whatsapp-web.js');
+
 const client = new Client();
 
 client.on('qr', (qr) => {
@@ -37,6 +38,39 @@ client.on('message', msg => {
 client.initialize();
 ```
 
+## Remote Access
+
+You could also connect to any previously existing browser instance:
+
+```js
+const client = new Client({ 
+    puppeteer: {
+        browserWSEndpoint: `ws://localhost:3000`
+    }
+});
+```
+
+### Docker
+
+1) Installing a browser using browserless:
+
+```
+docker run \
+  --rm \
+  -p 3000:3000 \
+  -e "MAX_CONCURRENT_SESSIONS=1" \
+  browserless/chrome:latest
+```
+
+Reference: https://docs.browserless.io/docs/docker-quickstart.html
+
+### Remote Debugging
+
+2) Running a browser with websocket remote debugging enabled:
+> chrome.exe --remote-debugging-port=9222
+
+After that check the following webpage and check http://127.0.0.1:9220/json and get the **webSocketDebuggerUrl**
+
 Take a look at [example.js](https://github.com/pedroslopez/whatsapp-web.js/blob/master/example.js) for another example with more use cases.
 
 ## Supported features

example.js

@@ -11,6 +11,13 @@ const client = new Client({ puppeteer: { headless: false }, session: sessionCfg
 // You can use an existing session and avoid scanning a QR code by adding a "session" object to the client options.
 // This object must include WABrowserId, WASecretBundle, WAToken1 and WAToken2.
 
+// You also could connect to an existing instance of a browser
+// { 
+//    puppeteer: {
+//        browserWSEndpoint: `ws://localhost:3000`
+//    }
+// }
+
 client.initialize();
 
 client.on('qr', (qr) => {

src/Client.js

@@ -65,8 +65,16 @@ class Client extends EventEmitter {
      * Sets up events and requirements, kicks off authentication request
      */
     async initialize() {
-        const browser = await puppeteer.launch(this.options.puppeteer);
+        let [browser, page] = [null, null];
-        const page = (await browser.pages())[0];
+        
+        if(this.options.puppeteer && this.options.puppeteer.browserWSEndpoint) {
+            browser = await puppeteer.connect(this.options.puppeteer);
+            page = await browser.newPage();
+        } else {
+            browser = await puppeteer.launch(this.options.puppeteer);
+            page = (await browser.pages())[0];
+        }        
+        
         page.setUserAgent(this.options.userAgent);
 
         this.pupBrowser = browser;