webpack-electroshot-plugin

webpack-electroshot-plugin

Webpack plugin for electroshot.

Capture website screenshots with optional device and network emulation as jpg, png or pdf (with web fonts!) using Electron / Chrome.

Install

npm

npm install -D webpack-electroshot-plugin

yarn

yarn add -D webpack-electroshot-plugin

electroshot

npm install -D electroshot
// or global
npm install -g electroshot

Usage

const WebpackElectroshotPlugin = require('webpack-electroshot-plugin')
// or
import WebpackElectroshotPlugin from 'webpack-electroshot-plugin'

{
  output: {
    path: "/output/path"
  },
  plugins: [
    new WebpackElectroshotPlugin({
      // options
    })
  ]
}

API

class WebpackElectroshotPlugin([options])

options

All options of electroshot are available in camelCase.

See electroshot docs.

Required

• filename

Optional

• delay: default: 1000
• format: default: jpg
• out: default: .
• resolution: default: 1280
• url: default: index.html
• cookie
• css
• device
• download
• emulateNetwork
• forceDeviceScaleFactor
• ignoreCertificateErrors
• js
• latency
• pdfBackground
• pdfMargin
• pdfOrientation
• pdfPageSize
• proxyServer
• quality
• selector
• upload
• userAgent
• zoomFactor

Examples

JPG

Will create BUILD_PATH/screenshot.jpg:

new WebpackElectroshotPlugin({
  filename: `screenshot.jpg`
})

PNG

Will create BUILD_PATH/screenshot.png:

new WebpackElectroshotPlugin({
  filename: `screenshot.png`,
  format: 'png'
})

PDF

Will create BUILD_PATH/screenshots/screenshot.pdf:

new WebpackElectroshotPlugin({
  filename: `screenshot.pdf`,
  format: 'pdf',
  out: 'screenshots',
  pdfBackground: true,
  pdfMargin: 'none',
  pdfPageSize: 'A4'
})

Resources

• electroshot - Capture website screenshots with optional device and network emulation as jpg, png or pdf (with web fonts!) using Electron / Chrome.

Authors

• Ricardo Ferro [e-mail]

License

MIT