Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/claabs/puppeteer-extra-plugin-portal
A puppeteer-extra plugin to remotely view and interact with puppeteer sessions. Essentially opening a "portal" to the page.
https://github.com/claabs/puppeteer-extra-plugin-portal
puppeteer puppeteer-extra puppeteer-extra-plugin
Last synced: 2 months ago
JSON representation
A puppeteer-extra plugin to remotely view and interact with puppeteer sessions. Essentially opening a "portal" to the page.
- Host: GitHub
- URL: https://github.com/claabs/puppeteer-extra-plugin-portal
- Owner: claabs
- Created: 2021-07-17T21:17:25.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-05-30T19:27:07.000Z (over 1 year ago)
- Last Synced: 2024-10-02T15:04:35.405Z (3 months ago)
- Topics: puppeteer, puppeteer-extra, puppeteer-extra-plugin
- Language: TypeScript
- Homepage:
- Size: 1.82 MB
- Stars: 49
- Watchers: 1
- Forks: 15
- Open Issues: 5
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# puppeteer-extra-plugin-portal
[](https://www.npmjs.com/package/puppeteer-extra-plugin-portal) [](https://www.npmjs.com/package/puppeteer-extra-plugin-portal) [](https://www.npmjs.com/package/puppeteer-extra)
A [puppeteer-extra](https://github.com/berstend/puppeteer-extra) plugin to remotely view and interact with puppeteer sessions. Essentially opening a "portal" to the page.
## Demo
Here is a demo of the code [below](#usage):
https://user-images.githubusercontent.com/6274312/135788752-3b919efa-6b64-4c0b-859a-62cafcf9a7b8.mp4
## Install
```bash
yarn add puppeteer-extra-plugin-portal
# - or -
npm install puppeteer-extra-plugin-portal
```
If this is your first [puppeteer-extra](https://github.com/berstend/puppeteer-extra) plugin here's everything you need:
```bash
yarn add puppeteer puppeteer-extra puppeteer-extra-plugin-portal
# - or -
npm install puppeteer puppeteer-extra puppeteer-extra-plugin-portal
```
## Usage your own express server (middleware)
```typescript
// puppeteer-extra is a drop-in replacement for puppeteer,
// it augments the installed puppeteer with plugin functionality
import puppeteer from 'puppeteer-extra';
import express from 'express';
// add portal plugin
import PortalPlugin from 'puppeteer-extra-plugin-portal';
puppeteer.use(
PortalPlugin({
webPortalConfig: {
// When used as middleware, you'll need to provide the baseUrl if it's anything but `http://localhost:3000`
baseUrl: 'http://localhost:3001',
},
})
)
const app = express();
app.use(portalPlugin.createExpressMiddleware());
const server = app.listen(3001);
server.headersTimeout = 0; // Required for Node 18+ due to slow loris attack change
server.requestTimeout = 0;
// puppeteer usage as normal
puppeteer.launch({ headless: true }).then(async browser => {
const page = await browser.newPage();
await page.goto('https://www.google.com/recaptcha/api2/demo');
// Open a portal to get a link to it.
const portalUrl = await page.openPortal();
console.log('Portal URL:', portalUrl);
// Wait a long time for the success condition to be met
const successDiv = await page.waitForSelector('.recaptcha-success', {
timeout: 86400 * 1000, // 24 hours
});
await page.closePortal(); // You can manually close a portal with
// OR
await page.close(); // Closing the page will automatically close its portal.
// OR
await browser.close(); // Closing the browser will automatically close the portals opened on it.
})
// You'll need to close the server on your own
app.close()
```
## Usage with plugin-managed server
```typescript
// puppeteer-extra is a drop-in replacement for puppeteer,
// it augments the installed puppeteer with plugin functionality
import puppeteer from 'puppeteer-extra';
// add portal plugin
import PortalPlugin from 'puppeteer-extra-plugin-portal';
puppeteer.use(
PortalPlugin({
// This is a typical configuration when hosting behind a secured reverse proxy
webPortalConfig: {
listenOpts: {
port: 3000,
},
baseUrl: 'https://portal.example.com',
},
})
)
// puppeteer usage as normal
puppeteer.launch({ headless: true }).then(async browser => {
const page = await browser.newPage();
await page.goto('https://www.google.com/recaptcha/api2/demo');
// Open a portal to get a link to it.
const portalUrl = await page.openPortal();
console.log('Portal URL:', portalUrl);
// Wait a long time for the success condition to be met
const successDiv = await page.waitForSelector('.recaptcha-success', {
timeout: 86400 * 1000, // 24 hours
});
await page.closePortal(); // You can manually close a portal with
// OR
await page.close(); // Closing the page will automatically close its portal.
// OR
await browser.close(); // Closing the browser will automatically close the portals opened on it.
// When all portals are closed, the web server will automatically shut down
})
```