TypeScript usage

puppeteer-extra and most plugins are written in TS, so you get perfect type support out of the box. :)

If in doubt please use the following tsconfig (or compare with yours if you run into import issues):

tsconfig.json:

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es2017",
    "module": "commonjs",
    "moduleResolution": "node",
    "lib": ["es2015", "es2016", "es2017", "dom"],
    "sourceMap": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": false,
    "noUnusedLocals": true,
    "noUnusedParameters": false,
    "pretty": true,
    "stripInternal": true
  },
  "include": ["./src/**/*.tsx", "./src/**/*.ts"],
  "exclude": ["node_modules", "dist", "./test/**/*.spec.ts"]
}

• Put your .ts files in a src/ subdirectory
• The compiled JS files (after running yarn tsc) will be in dist/

Full example files:

• https://github.com/berstend/puppeteer-extra/issues/85#issuecomment-560867724

Augmenting Puppeteer Types

With ambient type defs you are able to fix any missing Puppeteer types required in your project.

import ProtocolMapping from "devtools-protocol/types/protocol-mapping"

/**
 * Declare ambient module to augment Puppeteer types.
 * Make sure to bundle this with your project's exported types.
 * @file {typings/puppeteer.ts}
 */
declare module "puppeteer" {
  /** Extend Puppeteer Page type with `_client`. **/
  export interface Page {
    readonly _client: Connection
  }

  /** Define Connection type sourced from Puppeteer lib. **/
  export interface Connection {
    send<T extends keyof ProtocolMapping.Commands>(
      method: T,
      ...paramArgs: ProtocolMapping.Commands[T]["paramsType"]
    ): Promise<ProtocolMapping.Commands[T]["returnType"]>
  }
}