Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
Showing
20 changed files
with
2,431 additions
and
5,584 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
{ | ||
"env": { | ||
"commonjs": true, | ||
"es6": true, | ||
"node": true | ||
}, | ||
"extends": "standard", | ||
"globals": { | ||
"Atomics": "readonly", | ||
"SharedArrayBuffer": "readonly" | ||
}, | ||
"parserOptions": { | ||
"ecmaVersion": 2018 | ||
}, | ||
"rules": { | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
language: node_js | ||
node_js: | ||
- node | ||
- 8 | ||
- 10 | ||
|
||
script: | ||
- npm run lint | ||
- npm test |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
Oops, something went wrong.