Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mysteryblokhed/webpack-ts-userscript
A template to create UserScripts using TypeScript and Webpack. Mirrored from https://gitlab.com/MysteryBlokHed/webpack-ts-userscript
https://github.com/mysteryblokhed/webpack-ts-userscript
greasemonkey template typescript userscript webpack
Last synced: about 1 month ago
JSON representation
A template to create UserScripts using TypeScript and Webpack. Mirrored from https://gitlab.com/MysteryBlokHed/webpack-ts-userscript
- Host: GitHub
- URL: https://github.com/mysteryblokhed/webpack-ts-userscript
- Owner: MysteryBlokHed
- License: mit
- Created: 2021-10-18T22:28:35.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-04T00:24:28.000Z (7 months ago)
- Last Synced: 2024-04-28T03:19:02.699Z (7 months ago)
- Topics: greasemonkey, template, typescript, userscript, webpack
- Language: TypeScript
- Homepage:
- Size: 115 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# webpack-ts-userscript
A template to create UserScripts using TypeScript and Webpack.
## Customizing the template
### Changing UserScript info
The UserScript's name, description, version, and author are all retrieved from the project's `package.json`.
Anything else such as the site to match and the grants are changed from the [Webpack Config].
There's a call to `genBanner` that can be used to change the values added to the banner.
To add a single value, add a string key and value. To add multiple values for
the same key (eg. multiple `@match`'s), use an array as the value.
Example:
```javascript
const banner = genBanner({
name: 'my-userscript',
version: '0.1.0',
match: ['*://example.com/*', 'https://*.foo.com/bar*'],
})
/* Above example becomes: */
// ==UserScript==
// @name my-userscript
// @version 0.1.0
// @match *://example.com/*
// @match https://*.foo.com/bar*
// ==/UserScript==
```
### Creating a release commit
To create a commit for a release version, run `pnpm run release`.
This will re-build the UserScript in production mode, add all files with `git add .`,
and prompt you to add a version to the commit message.
You can then create a new tag and release for your project with an optimized UserScript.
## Building
### Setup
Building this project requires Node.js and pnpm.
To install dependencies, run:
```sh
pnpm install
```
### Building files
To build the project, run:
```sh
pnpm run build
```
To automatically build when a source file is modified, run:
```sh
pnpm run dev
```
Building will result in JavaScript files in the `build/` directory (these can be ignored)
and a file ending in `.user.js` in the root of the project.
This is the built UserScript.
## Installation
Open the UserScript from the repository as raw with a UserScript extension installed,
and you should be prompted to install it. You can install a locally built version
by dragging and dropping the file into a new browser tab.
## License
This project was created from [a template](https://gitlab.com/MysteryBlokHed/webpack-ts-userscript)
licensed under the MIT license
([LICENSE](https://gitlab.com/MysteryBlokHed/webpack-ts-userscript/-/blob/main/LICENSE)
or ).
[webpack config]: webpack.config.js