2.0.0 • Published 5 years ago

webpack-tampermonkey v2.0.0

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

webpack-tampermonkey

Build Status JavaScript Style Guide npm Gitmoji

A Webpack4+ plugin for userscript projects.

It was a project prototype before v1.*, but it shows no flexibility and not customizable until it is a webpack plugin. For example, it did not support multiple scripts in a single project in v1.*. See issue #1.

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-tampermonkey -D

Usage

webpack.config.js

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

const WebpackTampermonkey = require('webpack-tampermonkey')

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.

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