Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
🎉 Init v2.
  • Loading branch information
MomoCow committed Mar 28, 2019
1 parent 0988738 commit 56d50ac
Show file tree
Hide file tree
Showing 20 changed files with 2,431 additions and 5,584 deletions.
17 changes: 17 additions & 0 deletions .eslintrc.json
@@ -0,0 +1,17 @@
{
"env": {
"commonjs": true,
"es6": true,
"node": true
},
"extends": "standard",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018
},
"rules": {
}
}
9 changes: 9 additions & 0 deletions .travis.yml
@@ -0,0 +1,9 @@
language: node_js
node_js:
- node
- 8
- 10

script:
- npm run lint
- npm test
80 changes: 12 additions & 68 deletions README.md
@@ -1,72 +1,16 @@
# webpack-tampermonkey
A webpack project prototype for user-scripts of Tampermonkey.
[![Build Status](https://travis-ci.org/momocow/webpack-tampermonkey.svg?branch=master)](https://travis-ci.org/momocow/webpack-tampermonkey)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
[![npm](https://img.shields.io/npm/v/webpack-tampermonkey.svg)](https://www.npmjs.com/webpack-tampermonkey)
[![Gitmoji](https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat-square)](https://gitmoji.carloscuesta.me/)

> An init helper is WIP.
A Webpack4+ plugin for userscript projects.

## Features
- Writing userscript in a Node.js fashion.
> e.g. `require` or ES6 `import`/`export`
> According to the ES6 support of your target browser, you may want to use Webpack babel-loader to tranlate the codes. You can modify `webpack.config.js` yourself to customize the project.
- Css files supported.
> `GM_addStyle(require('path/to/css')) // easily inject CSS rules`
- Image files supported.
> `document.createElement('img').src = require('path/to/image')`
- Built-in scripts for watching code changes, building userscript, and copying the output userscript to your clipboard.
> After saving every file, you can just go to Tampermonkey to add or modify a script and paste your userscript to the editor.
## Usage
- Clone this repository
`git clone https://github.com/momocow/webpack-tampermonkey.git`
- Copy everythind under `src/` to your project folder
- Install dependencies
`npm install`
- Fill in the `package.json` properly (see [Headers](#headers))
- Start coding from `<your-project>/src/index.js`

> IMPORTANT! The project folder is required to contain the git folder, i.e. `.git/`
## Headers
- Tampermonkey headers are specified in the `header` field in `package.json` as key-value pairs
- Values of Tampermonkey headers can be either a `string` or an `array`.
- e.g. `grant` can have multiple values; therefore, you can config as the following.
```
// package.json
{
"name": "my-user-script", //required
"version": "0.0.0", //required
"description": "*", //required
"main": "*", //required
"header": {
"grant": [
"GM_setClipboard",
"GM_addStyle"
]
},
... (other fields)
}
```
> 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](https://github.com/momocow/webpack-tampermonkey/issues/1).
## Image files supported
Images files can be packaged into the bundle automatically by `require('/path/to/image')` in your source code, where images can be `.png`, `.jpg` or `.gif` files. Requiring css files will get a base-64 encoded string of the image.

Then you can provide such base-64 encoded string as the `src` of an `<img>` element.

## CSS files supported
Css files can be packaged into the bundle automatically by `require('/path/to/your.css')` in your source code. Requiring css files will get a string of css content.

To inject it into the webpage, first ensure you have `"grant": "GM_addStyle"` in your `header` field.
Then call `GM_addStyle(css_string)` where `css_string` is the string requiring from the css file.

## Commands
### Build
Run webpack once.
- `npm run build`
### Versioning
All the following commands will tick the version in the `package.json`, packaging distributable, and commit all.
- `npm run major`
- `npm run minor`
- `npm run patch`
### Development
Watch, automatically package distributable, and copy the distributable into your clipboard (which can be pasted into Tampermonkey) for fast testing.
- `npm run watch`
## 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.
26 changes: 0 additions & 26 deletions bin/tm.js

This file was deleted.

0 comments on commit 56d50ac

Please sign in to comment.