webpack-userscript

webpack-userscript

A Webpack4+ plugin for userscript projects.

The package has been renamed from webpack-tampermonkey.

Features

• Make your userscript development combined with Webpack

  With powerful Webpack support, you can even package everything in your userscript, e.g. icons and json data.

• Ability to generate userscript headers
• Ability to generate both .user.js and .meta.js

  .meta.js is used for update check containing headers only.

• Properly track files in watch mode

  Including external header files and package.json.

Installation

npm i webpack-userscript -D

Usage

webpack.config.js

Include the plugin in the webpack.config.js as the following example.

const WebpackTampermonkey = require('webpack-userscript')

module.exports = {
  plugins: [
    new WebpackTampermonkey()
  ]
}

Examples

Examples can be found under the test fixture folder.

Configuration

WebpackTampermonkey

The WebpackTampermonkey constructor has the following signature.

new WebpackTampermonkey(options)

options

Also see the schema of options.

type WebpackTampermonkeyOptions =
  WPTMOptions |
  HeaderFile |   // shorthand for WPTMOptions.headers
  HeaderProvider // shorthand for WPTMOptions.headers

WPTMOptions

interface WPTMOptions {
  headers: HeaderFile | HeaderProvider

  /**
   * Output *.meta.js or not
   */
  metajs: boolean

  /**
   * Rename all .js files to .user.js files.
   */
  renameExt: boolean

  /**
   * Prettify the header
   */
  pretty: boolean
}

HeaderFile

A path to a js or json file which exports a header object or a header provider function.

type HeaderFile = string

HeaderProvider

A function that returns a header object.

type HeaderProvider = (data: object) => HeaderObject

Note that data contains the same variables as output.filename templates.

HeaderObject

A header object.

Also see explicit-config/webpack.config.js.

type HeaderFile = object