A vite plugin to build userscripts mainly for Tampermonkey.
npm install vite-plugin-tm-userscriptvite.
tmHeader field in package.json
grant when building for production
grant by default in development mode, and add all grant methods to unsafeWindow
require and automatically imported UNPKG CDN, see the plugin configuration below for details
bash
yarn add vite-plugin-tm-userscript -D
OR
npm install vite-plugin-tm-userscript -D
`
$3
`js
import { defineConfig } from 'vite'
import Userscript from 'vite-plugin-tm-userscript'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
Userscript({
externalGlobals: ['vue']
})
]
})
`
$3
There are five ways to configure Userscript Header, the priority is as follows
1. Plugin option headers
2. header.config.json
3. header.config.js
4. header.config.txt
5. tmHeader field in package.json
Among them, header.config.txt uses Tampermonkey header annotation configuration, will not be processed, directly inserted into the script header
The other four formats are configured in json format, and multiple attribute configurations such as match are represented by an array, and grant and require are automatically added after processing
See example/header.config.js for example configuration
For specific property configuration, see Tampermonkey Documentation
Plugin Configuration
`ts
export interface TMPluginOptions {
entry?: string;
autoGrant?: boolean;
headers?: TmHeaderConfig;
externalGlobals?: string[] | Record;
}
`
$3
See Configure Userscript Header
For example
`js
// vite.config.js
import { defineConfig } from 'vite'
import Userscript from 'vite-plugin-tm-userscript'
export default defineConfig({
plugins: [
Userscript({
entry: 'main.js',
headers: {
name: 'Test',
namespace: 'https://www.nanoka.top',
author: 'asadahimeka',
description: 'No description',
source: 'https://github.com/asadahimeka/userscripts',
supportURL: 'https://github.com/asadahimeka/userscripts/issues',
license: 'MIT',
match: 'https://test.com/*',
require: 'https://lib.baomitu.com/arrive/2.4.1/arrive.min.js',
'run-at': 'document-start',
},
}),
],
})
`
$3
Configure external packages, such as vue, axios, etc., to reduce the package size, and automatically declare require
Three configuration forms, CDN can be customized, if CDN is not configured, UNPKG CDN is used by default
`js
// 1
Userscript({
externalGlobals: ['jquery']
})
// 2
Userscript({
externalGlobals: {
'jquery': 'jQuery'
}
})
// 3
Userscript({
externalGlobals: {
'jquery': ['jQuery', 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js']
}
})
// =>
return {
rollupOptions: {
external: ['jquery']
output: {
globals: {
jquery: 'jQuery'
}
}
}
}
// @require https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js
`
$3
boolean type, defaults to true
Automatically analyze the Tampermonkey grant used in the code and add it to the Userscript Header declaration
$3
Entry file, default is src/main.js or src/main.ts
Example
See the example folder
Notice
$3
Production build mode will force the configuration of config.build:
- Camel case of the name (required) attribute of the package name package.json to build, and the file name to build is also related to it
- The file packaging format is iife, no compression, no separation of css files
- Additionally configured rollupOptions to support other features
$3
In development mode, the script of vite needs to be injected through the script tag. Some websites have enabled CSP(Content-Security-Policy), resulting in an error. You can install the Chrome plugin Disable Content-Security-Policy or Always Disable Content-Security-Policy, to disable CSP(Content-Security-Policy), open the plug-in during development (remember to close it at other times to ensure the security of web browsing).
Also, you can change Tampermonkey options(open extension://iikmkjmpaadaobahmlepeloendndfphd/options.html#nav=settings) at Security, set Modify existing content security policy (CSP) headers to Remove entirely (possibly unsecure)`.