Package Exports

userscript-builder

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (userscript-builder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

userscript-builder

Simple tool for building userscript for tampermonkey.

Simple configuration.
Uses ES6 classes syntax.
Support css files.
No webpack
No babel
The only one third party dependency

Don't forget import css files via import 'some-css.css'. Extension is required.

Getting Started

Update Your package.json with userscript section

{
  "name": "git-name",
  "version": "0.0.0",
  "description": "Describe your user script",
  "author": "va4ok",
  "license": "MIT",
  "userscript": {
    "entry": "./src/index.js",     // Entry file
    "dev": "./dist",               // Output folder for dev builds
    "release": "./release",        // Output folder for release builds
    "fileName": "filename",        // Output filename -> filename.user.js
    "meta": {                      // Userscript meta info
      "name": "User script name",
      "namespace": "http://tampermonkey.net/",
      "homepage": "https://openuserjs.org/scripts/va4ok",
      "match": "*://*.*",
      "grant": "none",
      "require": [
        "https://some.url.1",
        "https://some.url.2"
      ]
    }
  }
}

Fields version, description, author, license will be used in output meta.

Default properties if not specified

  entry: './src/index.js',
  dev: './dist',
  release: './release',
  fileName: 'new-userscript'

  name: 'New Userscript',
  namespace: 'http://tampermonkey.net/',
  version: '0.0.0',
  description: 'try to take over the world!',
  author: 'You',
  match: 'http://*/*',
  grant: 'none'

Please visit https://www.tampermonkey.net/ for more details and options.

Prerequisites

It works with NodeJS v10.16.0 or higher. Lower versions of NodeJS wasn't tested.

Install

Install with npm:

npm install --save-dev userscript-builder

Install with yarn:

yarn add userscript-builder --dev

Build options

Dev - no version changes

npm run userscript-builder --mode dev
or
npm run userscript-builder

Release-bugfix - bugfix version will increase and commited into package.json file

npm run userscript-builder --mode bugfix
or
npm run userscript-builder --mode bug
2.7.1 -> 2.7.2

Release-minor - minor version will increase and commited into package.json file

npm run userscript-builder --mode minor
or
npm run userscript-builder --mode min
2.7.1 -> 2.8.0

Release-major - major version will increase and commited into package.json file

npm run userscript-builder --mode major
or
npm run userscript-builder --mode maj
2.7.1 -> 3.0.0

How it works

Create your entry file with selfexecuted function

import { Class1 } from './class1/class1.js';
import { StaticClass } from './static-class/static-class.js';

(function () {
  'use strict';

  const class1 = new Class1();

  class1.doSomething();
  StaticClass.saySomerthing();
})();

Use ES6 classes and imports to organize you code.

import { StaticClass } from './../static-class/static-class.js';
import './class1.css';

const CLASS1_CONST = 200;
 
 export class Class1 {
   doSomething() {
     console.log('Class 1');
   }
 }

Build your user script and publish on https://openuserjs.org

// ==UserScript==
// @name         User script name
// @namespace    http://tampermonkey.net/
// @version      0.0.1
// @description  description
// @author       va4ok
// @match        *://*.*
// @grant        none
// @source       git+https://github.com/va4ok/userscript-builder.git
// @license      MIT
// @homepage     https://openuserjs.org/scripts/va4ok
// @require      https://some.url.1
// @require      https://some.url.2
// ==/UserScript==

// src/static-class/static-class.js
class StaticClass {
  static saySomerthing() {
    console.log('static class method');
  }
}

// src/class1/class1.js
const CLASS1_CONST = 200;

class Class1 {
  doSomething() {
    console.log('Class 1');
  }
}

// ./src/index.js
let notificator;

(function () {
  'use strict';

  const class1 = new Class1();

  class1.doSomething();
  StaticClass.saySomerthing();
})();

// CSS injection
(function(){
  const $style = document.createElement('style');

  $style.innerHTML = `/* src/class1/class1.css */
.class1-container {
  transition: height 1s ease-out;
  background-color: #3dcd59;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  height: 0;
  z-index: 1000;
}`;
  document.body.appendChild($style);
})();

Running the tests

Not implemented yet.

Built With

minimist - Node arguments parser

Authors

Oleg Vaka - Initial work - va4ok

License

This project is licensed under the MIT License - see the LICENSE file for details

History

0.2.0 - Support for arrays of meta values

0.1.6 - Default file extension .js is used if extension is not defined into import line

0.1.5 - Remove source path comments in code built in release mode

0.1.4 - Remove leading dot for entry file

0.1.3 - Build progress available for css files

0.1.2 - Add examples

0.1.1 - Fix Current Working Directory using

0.1.0 - Dev and release modes support