vite-tampermonkey 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +101 -0
  3. package/package.json +5 -2
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 koyori
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,101 @@
1
+ # 🚀 vite-plugin-tampermonkey
2
+
3
+ 一个专为 Vite 设计的 Tampermonkey (油猴) 脚本构建插件。让你能以开发现代 Web 应用的体验（HMR、TypeScript、Tailwind CSS）来编写 Userscript。
4
+
5
+ ## ✨ 功能特性
6
+
7
+ - **自动元数据生成**：根据配置自动生成脚本头 (`Userscript Header`)。
8
+ - **双模式开发驱动**：
9
+ - **Dev 模式**：自动生成 `user.dev.js` 指向本地服务，支持热更新（HMR）。
10
+ - **Build 模式**：生产环境构建，支持代码压缩与混淆。
11
+ - **智能资源处理**：
12
+ - **CDN 自动映射**：自动排除 `dependencies` 中的包并替换为远程 CDN 引用。
13
+ - **资源转换**：本地 `Icon` 图片自动转为 `base64` 嵌入。
14
+ - **样式深度集成**：完美支持 `tailwindcss`，自动压缩并注入到脚本中。
15
+ - **高度可定制**：灵活配置 `external` 模块、`globals` 全局变量及 `@resource` 资源。
16
+
17
+ ---
18
+
19
+ ## 📦 安装
20
+
21
+ ```bash
22
+ pnpm add -D vite-plugin-tampermonkey
23
+ ```
24
+
25
+ ## 🛠️ 快速开始
26
+
27
+ 1. 配置 package.json
28
+
29
+ 为了配合插件的开发逻辑，建议在 `scripts` 中配置如下命令：
30
+
31
+ ```json
32
+ "scripts": {
33
+ "dev": "vite build --mode development --watch",
34
+ "build": "vite build --mode production"
35
+ }
36
+ ```
37
+
38
+ 2. 配置 vite.config.ts
39
+
40
+ ```typescript
41
+ import { defineConfig } from 'vite';
42
+ import react from '@vitejs/plugin-react';
43
+ import tailwindcss from '@theme-it/vite-plugin-tailwindcss';
44
+ import tampermonkeyPlugin from 'vite-plugin-tampermonkey';
45
+
46
+ export default defineConfig(({ mode }) => {
47
+ const isDev = mode === 'development';
48
+
49
+ return {
50
+ plugins: [
51
+ tailwindcss(),
52
+ react({
53
+ // 开发模式开启自动 Runtime，生产模式建议 classic 以减小体积
54
+ jsxRuntime: isDev ? 'automatic' : 'classic',
55
+ }),
56
+ tampermonkeyPlugin({
57
+ entry: 'src/main.tsx',
58
+ // 脚本元属性 (Userscript Header)
59
+ meta: {
60
+ name: 'My Awesome Script',
61
+ namespace: '[https://midorii.cc/](https://midorii.cc/)',
62
+ match: ['[https://www.google.com/](https://www.google.com/)*'],
63
+ grant: ['GM_addStyle', 'GM_xmlhttpRequest', 'GM_setValue', 'GM_getValue'],
64
+ },
65
+ external: {
66
+ // 排除包体，自动添加 CDN 映射
67
+ modules: {
68
+ 'react': '[https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js](https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js)',
69
+ 'react-dom': '[https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js](https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js)',
70
+ },
71
+ // 全局变量映射
72
+ globals: {
73
+ 'react': 'React',
74
+ 'react-dom': 'ReactDOM',
75
+ },
76
+ // 外部资源引用 (CSS等)
77
+ resources: {
78
+ 'animate-css': '[https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css](https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css)'
79
+ }
80
+ },
81
+ }),
82
+ ],
83
+ };
84
+ });
85
+ ```
86
+
87
+ ## 💡 开发工作流
88
+
89
+ 1. 启动本地服务：运行 `pnpm dev`。
90
+ 2. 安装开发脚本：插件会在 dist 目录生成 `index.dev.user.js`。将其内容复制并粘贴到 Tampermonkey 编辑器中保存。
91
+ 3. 实时调试：修改源码并保存后，受脚本控制的页面将自动应用更改或刷新，无需手动更新脚本内容。
92
+
93
+ ## 📝 配置项说明 (Options)
94
+
95
+ | 属性 | 类型 | 描述 |
96
+ | :--- | :--- | :--- |
97
+ | **entry** | `string` | **必填**。脚本入口文件路径 (例如: `src/main.tsx`)。 |
98
+ | **meta** | `UserscriptMeta` | **必填**。油猴脚本头配置，支持所有标准的 `@match`, `@grant`, `@run-at` 等。 |
99
+ | **external.modules** | `Record<string, string>` | 需要从 Bundle 中排除的依赖及其对应的 CDN 链接。 |
100
+ | **external.globals** | `Record<string, string>` | 外部依赖对应的全局变量映射 (例如: `react` -> `React`)。 |
101
+ | **external.resources** | `Record<string, string>` | 使用 `@resource` 注入的外部资源列表，自动添加至脚本头。 |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vite-tampermonkey",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "Vite plugin for Tampermonkey / userscript builds",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -13,7 +13,8 @@
13
13
  }
14
14
  },
15
15
  "files": [
16
- "dist"
16
+ "dist",
17
+ "LICENSE"
17
18
  ],
18
19
  "scripts": {
19
20
  "build": "tsup src/index.ts --format esm,cjs --dts --clean",
@@ -22,6 +23,8 @@
22
23
  "peerDependencies": {
23
24
  "vite": "^8.0.0"
24
25
  },
26
+ "license": "MIT",
27
+ "author": "koyori",
25
28
  "devDependencies": {
26
29
  "@types/node": "^22.10.0",
27
30
  "tsup": "^8.5.1",