{"id":14989061,"url":"https://github.com/eished/tampermonkey-template","last_synced_at":"2025-04-12T00:31:52.097Z","repository":{"id":50637047,"uuid":"519525149","full_name":"Eished/tampermonkey-template","owner":"Eished","description":"Webpack+TypeScript 油猴脚本开发模板，支持本地开发，在线热刷新，Tampermonkey template，油猴开发框架，以斗鱼直播自动切换清晰度作为示例的油猴脚本开发模板","archived":false,"fork":false,"pushed_at":"2023-06-21T16:46:07.000Z","size":252,"stargazers_count":67,"open_issues_count":0,"forks_count":17,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T20:51:14.445Z","etag":null,"topics":["greasyfork","tampermonkey","typescript","userscript","violentmonkey","webpack"],"latest_commit_sha":null,"homepage":"https://iknow.fun/tags/Tampermonkey/","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/Eished.png","metadata":{"files":{"readme":"readme.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-30T13:34:08.000Z","updated_at":"2025-03-07T03:37:30.000Z","dependencies_parsed_at":"2024-09-15T15:20:43.528Z","dependency_job_id":null,"html_url":"https://github.com/Eished/tampermonkey-template","commit_stats":{"total_commits":69,"total_committers":1,"mean_commits":69.0,"dds":0.0,"last_synced_commit":"9e2658beb5a9ea555e31d8e74ac04387de02514f"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eished%2Ftampermonkey-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eished%2Ftampermonkey-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eished%2Ftampermonkey-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eished%2Ftampermonkey-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Eished","download_url":"https://codeload.github.com/Eished/tampermonkey-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248501356,"owners_count":21114662,"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":["greasyfork","tampermonkey","typescript","userscript","violentmonkey","webpack"],"created_at":"2024-09-24T14:17:38.708Z","updated_at":"2025-04-12T00:31:51.814Z","avatar_url":"https://github.com/Eished.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"以斗鱼直播自动切换清晰度作为示例的油猴脚本开发模板\r\n\r\n使用此模板发开油猴脚本的[视频教程](https://www.bilibili.com/video/BV1oB4y1478c) or [文字教程](https://iknow.fun/2022/08/03/vscode-webpack-typescript-you-hou-kai-fa-huan-jing-da-jian-ben-di-diao-shi-shi-shi-re-shua-xin-zi-dong-gou-jian-he-fa-bu/)\r\n\r\n使用此模板[创建油猴脚本项目](https://github.com/Eished/monkey-template/generate)\r\n\r\n## 特性\r\n\r\n- [x] 配置简单，和前端工程化开发框架一致的开发体验\r\n- [x] 支持本地网页自动热刷新和目标网站自动热刷新\r\n- [x] 支持本地模拟目标网站，网页加载速度快，大幅提高开发效率\r\n- [x] 使用 TypeScript + ESlint 实现类型检查、错误修正、智能补全和自动格式化\r\n- [x] 支持使用 `@require` 引入依赖，减小脚本大小\r\n- [x] 支持 Tampermonkey API 提示和自动补全\r\n- [x] 第一次运行时自动安装新油猴脚本\r\n\r\n## 开发环境\r\n\r\n`Node.js 14+`\r\n\r\n`npm or yarn`\r\n\r\n## 开发语言\r\n\r\n`TypeScript` or `JavaScript`\r\n\r\n## 修改配置文件\r\n\r\n先在 Chrome 浏览器管理扩展程序页 `chrome://extensions/` 内，点击油猴插件详情，打开允许访问文件网址选项。\r\n\r\n然后修改开发环境油猴头文件信息：[`config/dev.meta.json`](config/dev.meta.json) 内下述代码改为自己存放项目的文件路径。\r\n\r\n```json\r\n\"require\": [\"file://\u003c你的文件路径\u003e/tampermonkey-template/dist/douyu.dev.user.js\"]\r\n```\r\n\r\n\u003e 油猴头文件默认配置在 [`config/common.meta.json`](config/common.meta.json)，按需修改。\r\n\r\n## 启动项目\r\n\r\n安装依赖：`npm install` or `yarn install`\r\n\r\nVSCode 内 `ctrl + shift + B` 选择 `start \u0026 dev`\r\n\r\n\u003e `ctrl shift B` 选择 `start \u0026 dev` 实际运行了两个命令，单独运行也可以：\r\n\u003e\r\n\u003e - `npm run start` devServer 提供 web 服务和网页热刷新功能\r\n\u003e\r\n\u003e - `npm run dev` 生成脚本，让 tampermonkey 使用\r\n\r\n### 自动安装脚本：\r\n\r\n第一次启动项目时，将会自动安装油猴脚本，但安装完要去编辑器内把头文件以外的内容删除，不然会运行两次脚本。（操作：选中并剪切头文件-\u003e然后全选-\u003e粘贴，覆盖掉其它内容）\r\n\r\n### 或手动安装：\r\n\r\n[`dist/douyu.dev.user.js`](dist/douyu.dev.user.js) 复制油猴**头文件**，在浏览器油猴插件新建脚本，粘贴进去，刷新浏览器打开的本地页面，看到可选择的清晰度选项时油猴脚本即正常运行。\r\n\r\n## 开发和调试脚本\r\n\r\n### 本地调试方法 1：\r\n\r\n把目标网站的静态资源 `html、css、JavaScript` 等下载到本地，复制到 `public` 文件夹下，插入到 `index.html` 即可本地调试脚本静态功能。\r\n\r\n### 本地调试方法 2（本模板采用的方法）：\r\n\r\n如果不能下载，需要先分析其运行逻辑，在 [`src/mock`](src/mock) 文件夹内添加模拟运行逻辑，以方便本地调试。\r\n\r\n\u003e 不需要模拟可以删除 mock 文件夹并在 [`src/index.ts`](src/index.ts) 中移除引入。\r\n\r\n### 开发脚本：\r\n\r\n在 [`src/app.ts`](src/app.ts) 内开发自己的油猴脚本。\r\n\r\n\u003e 确保 `app.ts` 的默认导出函数是入口函数，否则可能影响 webpack 打包。\r\n\r\n### 在线调试\r\n\r\n本地调试目标网站 API 网络请求时会有跨域问题，涉及网络请求的脚本需要使用在线调试。\r\n\r\n注意：在目标网站上调试时不能关闭本地调试的网页窗口，目标网站自动热刷新依赖于本地网页运行的油猴脚本。\r\n\r\n## 发布项目\r\n\r\n### 自动发布\r\n\r\n默认上传到 GitHub 触发 Actions 自动构建到主分支的 [`dist/`](dist/) 目录下，使用 Greasyfork 自动发布参考[视频教程](https://www.bilibili.com/video/BV1oB4y1478c)。\r\n\r\n### 手动发布\r\n\r\n运行 `npm run build`\r\n\r\n生成文件文件：[`dist/douyu.user.js`](dist/douyu.user.js)\r\n\r\n## 适应其它网站\r\n\r\n修改油猴头文件 [`config/common.meta.json`](config/common.meta.json) 的 `match` 内容\r\n\r\n```json\r\n\"match\": \"*://*.\u003c目标网站\u003e/*\",\r\n```\r\n\r\n## 修改输出文件名\r\n\r\n修改 [`package.json`](package.json) 里面 `filename=\u003c新文件名\u003e`\r\n\r\n```json\r\n \"scripts\": {\r\n    \"start\": \"xxxxx --env filename=douyu.dev.user.js\", // 开发环境脚本的文件名\r\n    \"dev\": \"xxxxx --env filename=douyu.dev.user.js\", // 开发环境脚本的文件名\r\n    \"build\": \"xxxx --env filename=douyu.user.js\", // 生产环境脚本的文件名\r\n  },\r\n```\r\n\r\n## 引入 CSS\r\n\r\n默认支持 css 和 less，参考 [`src/mock/douyu.less`](src/mock/douyu.less)\r\n\r\n## 安装依赖\r\n\r\n`npm install \u003c安装的包名\u003e` 或者 `yarn add \u003c安装的包名\u003e`，Webpack 会自动将依赖打包进 [`dist/douyu.user.js`](dist/douyu.user.js)。\r\n\r\n### 排除依赖项减小脚本大小\r\n\r\n脚本大小不能超过 2.0 MB。如果您的脚本接近此限制，可能需考虑：\r\n\r\n- 将 URI、JSON 等非代码数据移出脚本。\r\n- 使用 `@require` 或 [webpack 的 `externals` 选项](https://webpack.js.org/configuration/externals/)加载库。\r\n\r\n以 `jquery` 举例：\r\n\r\n```bash\r\n# 安装jquery\r\nnpm install jquery\r\n# 安装jquery类型声明作为开发依赖\r\nnpm install @types/jquery -D\r\n```\r\n\r\n[`config/common.meta.json`](https://github.com/Eished/tampermonkey-template/blob/externals/config/common.meta.json)\r\n\r\n```javascript\r\n\"require\": [\"https://code.jquery.com/jquery-3.6.3.slim.min.js\"] // 版本要和 package.json 中的对应\r\n```\r\n\r\n[`config/webpack.prod.js`](https://github.com/Eished/tampermonkey-template/blob/externals/config/webpack.prod.js)\r\n\r\n```javascript\r\nbaseOptions.externals = {\r\n  jquery: '$', // 排除项\r\n};\r\n```\r\n\r\n### 启用代码压缩：\r\n\r\n\u003e 注意：提交到 Greasy Fork 的代码不得混淆或最小化。如果脚本使用了 WebPack 之类的工具打包，则必须以非最小化的形式输出，保留空白和变量名。\r\n\r\n开启代码压缩：[`config/webpack.config.base.js`](config/webpack.config.base.js)\r\n\r\n```javascript\r\noptimization: {\r\n  minimize: true,\r\n  ...\r\n}\r\n```\r\n\r\n## 使用网站已有的全局变量\r\n\r\n[`src/global.d.ts`](src/global.d.ts)\r\n\r\n```typescript\r\ndeclare global {\r\n  //  在这里声明要用到的全局函数或变量\r\n}\r\n```\r\n\r\n## 在线网页热刷新的实现\r\n\r\n受到 `scriptcat` 后台脚本与油猴脚本通信方式的启发，使用 `GM_addValueChangeListener` 来实现在线调试自动热刷新。\r\n\r\n本地修改文件后会更新 `localhost` 网页，`localhost` 网页的油猴脚本会修改 `refresh` 的值，在线网页运行的油猴脚本会监听这个值的变化来刷新自己。\r\n\r\n## HMR 热模块替换\r\n\r\n由于油猴插入的 JavaScript 运行在油猴环境，不支持 HMR，仅支持 live reload 热重载，默认开启热重载。\r\n\r\n在本地模拟环境中的 JavaScript 是 webpack 打包的，支持 HMR，需要大量本地模拟时可自行开启 HMR。\r\n\r\n开启 HMR：[`config/webpack.dev.js`](config/webpack.dev.js)\r\n\r\n```javascript\r\nbaseOptions.devServer = {\r\n  ...\r\n  hot: true,\r\n  liveReload: false,\r\n  ...\r\n};\r\n```\r\n\r\n## 使用 JavaScript 开发\r\n\r\n将文件后缀改为 `.js` 即可\r\n\r\n[`.eslintrc.js`](.eslintrc.js) 加入规则，用于忽略未定义的值报错以兼容油猴 API\r\n\r\n```javascript\r\n  rules: {\r\n    ...\r\n    'no-undef': 'off',\r\n  },\r\n```\r\n\r\n如果想让 JavaScript 支持类型检查，在 `tsconfig.json` 修改 `\"checkJs\": true`\r\n\r\n## 一些实用的库\r\n\r\n跨域网络请求参考：[`src/lib/ajax.ts`](src/lib/ajax.ts)\r\n\r\n消息通知参考：[`src/lib/message.ts`](src/lib/message.ts)\r\n\r\n\u003e 不需要则可以删除 lib 文件夹。\r\n\r\n## 参考项目及其文档\r\n\r\nhttps://github.com/the1812/Bilibili-Evolved\r\n\r\nhttps://github.com/Eished/jkforum_helper\r\n\r\nhttps://github.com/lisonge/vite-plugin-monkey\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feished%2Ftampermonkey-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feished%2Ftampermonkey-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feished%2Ftampermonkey-template/lists"}