{"id":14989128,"url":"https://github.com/asadahimeka/vite-plugin-tm-userscript","last_synced_at":"2025-04-12T00:32:27.053Z","repository":{"id":37466845,"uuid":"484674014","full_name":"asadahimeka/vite-plugin-tm-userscript","owner":"asadahimeka","description":"A vite plugin to build userscripts mainly for Tampermonkey. 基于 vite 的 Tampermonkey 用户脚本开发构建插件。","archived":false,"fork":false,"pushed_at":"2022-11-25T02:12:25.000Z","size":221,"stargazers_count":16,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-03T16:07:40.598Z","etag":null,"topics":["tampermonkey","userscript","userscript-metadata","userscripts","vite","vite-plugin"],"latest_commit_sha":null,"homepage":"https://www.nanoka.top/posts/3a8bdf22","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/asadahimeka.png","metadata":{"files":{"readme":"README-ZH.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-23T07:07:28.000Z","updated_at":"2024-04-10T11:35:25.000Z","dependencies_parsed_at":"2023-01-21T12:00:40.157Z","dependency_job_id":null,"html_url":"https://github.com/asadahimeka/vite-plugin-tm-userscript","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asadahimeka%2Fvite-plugin-tm-userscript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asadahimeka%2Fvite-plugin-tm-userscript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asadahimeka%2Fvite-plugin-tm-userscript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asadahimeka%2Fvite-plugin-tm-userscript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asadahimeka","download_url":"https://codeload.github.com/asadahimeka/vite-plugin-tm-userscript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248501426,"owners_count":21114674,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tampermonkey","userscript","userscript-metadata","userscripts","vite","vite-plugin"],"created_at":"2024-09-24T14:17:44.374Z","updated_at":"2025-04-12T00:32:26.782Z","avatar_url":"https://github.com/asadahimeka.png","language":"TypeScript","readme":"# vite-plugin-tm-userscript\n\n![](https://img.shields.io/github/package-json/v/asadahimeka/vite-plugin-tm-userscript)\n![](https://img.shields.io/badge/license-MIT-green)\n![](https://img.shields.io/github/package-json/dependency-version/asadahimeka/vite-plugin-tm-userscript/dev/tsup)\n![](https://img.shields.io/github/package-json/dependency-version/asadahimeka/vite-plugin-tm-userscript/dev/typescript)\n\n中文 | [English](https://github.com/asadahimeka/vite-plugin-tm-userscript/blob/master/README.md)\n\n\u003e 建议使用功能更加丰富的 [vite-plugin-monkey](https://github.com/lisonge/vite-plugin-monkey)\n\n基于 `vite` 的 Tampermonkey 用户脚本开发构建插件。\n\n## 特点\n\n- 通过单独的配置文件或者 `package.json` 中的 `tmHeader` 字段来配置 Tampermonkey 的 Userscript Header\n- 构建生产时支持自动分析代码用到的 `grant`\n- 开发模式时默认导入所有 `grant`，并且把所有的 `grant` 方法加入到 `unsafeWindow`\n- 可通过简单配置，把引入的外部包 `require` 化，自动引入 UNPKG CDN，详情见下面的插件配置\n\n\u003e 鉴于最近的网络环境，jsDelivr 与 UNPKG 相对来说都比较慢，建议自行配置可用的 CDN，配置方式见下文 `externalGlobals`\n\n\u003e 常用前端 CDN 加速服务：\n\u003e\n\u003e https://www.bootcdn.cn\n\u003e\n\u003e https://cdn.baomitu.com\n\u003e\n\u003e https://staticfile.org\n\u003e\n\u003e http://cdn.bytedance.com\n\n## 使用\n\n### 安装\n\n```bash\nyarn add vite-plugin-tm-userscript -D\n# OR\nnpm install vite-plugin-tm-userscript -D\n```\n\n### 配置 `vite.config.ts`\n\n```js\nimport { defineConfig } from 'vite'\nimport Userscript from 'vite-plugin-tm-userscript'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    Userscript({\n      externalGlobals: ['vue']\n    })\n  ]\n})\n```\n\n### 配置 Userscript Header\n\n有几种方式来配置 `Userscript Header`, 优先级如下所示\n\n1. 插件的 `headers` 选项\n2. `header.config.json`\n3. `header.config.js`\n4. `header.config.txt`\n5. `package.json` 中的 `tmHeader` 字段\n\n其中 `header.config.txt` 使用 Tampermonkey 头部注释配置，不会经过处理，直接插入脚本头部作为 Header 使用\n\n其他几种格式按 json 格式配置，多个属性配置如 `match` 用数组表示，经过处理自动添加 `grant` 与 `require`\n\n示例配置见 [`example/header.config.js`](https://github.com/asadahimeka/vite-plugin-tm-userscript/blob/master/example/header.config.js)\n\n具体属性配置见 [Tampermonkey 文档](https://www.tampermonkey.net/documentation.php)\n\n## 插件配置\n\n```ts\nexport interface TMPluginOptions {\n  entry?: string;\n  autoGrant?: boolean;\n  headers?: TmHeaderConfig;\n  externalGlobals?: string[] | Record\u003cstring, string | string[]\u003e;\n}\n```\n\n### `headers`\n\n见 [配置 Userscript Header](#配置-userscript-header)\n\n示例\n\n```js\n// vite.config.js\nimport { defineConfig } from 'vite'\nimport Userscript from 'vite-plugin-tm-userscript'\n\nexport default defineConfig({\n  plugins: [\n    Userscript({\n      entry: 'main.js',\n      headers: {\n        name: 'Test',\n        namespace: 'https://www.nanoka.top',\n        author: 'asadahimeka',\n        description: 'No description',\n        source: 'https://github.com/asadahimeka/userscripts',\n        supportURL: 'https://github.com/asadahimeka/userscripts/issues',\n        license: 'MIT',\n        match: 'https://test.com/*',\n        require: 'https://lib.baomitu.com/arrive/2.4.1/arrive.min.js',\n        'run-at': 'document-start',\n      },\n    }),\n  ],\n})\n```\n\n### `externalGlobals`\n\n配置外部包，比如 `vue`，`axios` 等，减少打包体积，并且会自动声明 `require` ，如下配置：\n\n三种配置形式，可自定义 CDN，不配置 CDN 的话默认使用 UNPKG CDN\n\n```js\n// 1\nUserscript({\n  externalGlobals: ['vue']\n})\n\n// 2\nUserscript({\n  externalGlobals: {\n    'jquery': 'jQuery'\n  }\n})\n\n// 3\nUserscript({\n  externalGlobals: {\n    'jquery': ['jQuery', 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js']\n  }\n})\n\n// 转化为 =\u003e\n\nreturn {\n  rollupOptions: {\n    external: ['jquery']\n    output: {\n      globals: {\n        jquery: 'jQuery'\n      }\n    }\n  }\n}\n\n// @require https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js\n```\n\n### `autoGrant`\n\n`boolean` 类型，默认为 `true`\n\n自动分析代码中使用的 Tampermonkey 的 `grant`，并加入 Userscript Header 声明中\n\n### `entry`\n\n入口文件，默认为 `src/main.js` 或者 `src/main.ts`\n\n## 示例\n\n见 [`example`](https://github.com/asadahimeka/vite-plugin-tm-userscript/tree/master/example) 文件夹\n\n## 说明\n\n### vite 配置额外说明\n\n生产构建模式将强制配置 `config.build`:\n\n- 构建的包名为 `package.json` 的 `name` （**必须填写**）属性的驼峰模式，构建的文件名也与其相关\n- 文件打包格式为 `iife`，不压缩，不分离 `css` 文件\n- 额外配置了 `rollupOptions`，以支持其他功能\n\n### 禁止 CSP(Content-Security-Policy)\n\n在开发模式下，需要通过 `script` 标签注入 `vite` 的脚本，有些网站开启了 `CSP(Content-Security-Policy)`，导致报错，可以安装 `Chrome` 插件 [Disable Content-Security-Policy](https://chrome.google.com/webstore/detail/disable-content-security/ieelmcmcagommplceebfedjlakkhpden) 或者 [Always Disable Content-Security-Policy](https://chrome.google.com/webstore/detail/always-disable-content-se/ffelghdomoehpceihalcnbmnodohkibj)，来禁止 `CSP(Content-Security-Policy)`，**在开发时开启插件即可（其他时间记得关闭以保证网页浏览的安全性）**。\n\n也可以打开 Tampermonkey 设置 `extension://iikmkjmpaadaobahmlepeloendndfphd/options.html#nav=settings`，在 `安全` 项下把 `如果站点有内容安全策略（CSP）则向其策略:` 改为 `全部移除（可能不安全）`。\n\n![image](https://user-images.githubusercontent.com/31837214/177236988-56a9cb86-a8d7-4320-9f47-b10be9e64582.png)\n\n\n## 替代项目\n\n[gorilla](https://github.com/apsking/gorilla)\n\n[vite-plugin-tampermonkey](https://github.com/Thinker-ljn/vite-plugin-tampermonkey)\n\n[vite-plugin-monkey](https://github.com/lisonge/vite-plugin-monkey)\n\n\n## License\n\nForked from [vite-plugin-tampermonkey](https://www.npmjs.com/package/vite-plugin-tampermonkey).\n\nLicensed under the MIT license.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasadahimeka%2Fvite-plugin-tm-userscript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasadahimeka%2Fvite-plugin-tm-userscript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasadahimeka%2Fvite-plugin-tm-userscript/lists"}