diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..e0540ba --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,21 @@ +name: Deploy to GitHub Pages + +on: + push: + branches: + - main # 触发分支 + +jobs: + deploy: + runs-on: ubuntu-latest + permissions: + contents: write + steps: + - name: Checkout code + uses: actions/checkout@v3 + + - name: Deploy to GitHub Pages + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./website \ No newline at end of file diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..be02fa0 --- /dev/null +++ b/.npmignore @@ -0,0 +1,8 @@ +node_modules/ +dist/ +.git/ +.gitignore +*.log +.DS_Store +.vscode/ +.idea/ diff --git a/PUBLISH.md b/PUBLISH.md new file mode 100644 index 0000000..bf36b81 --- /dev/null +++ b/PUBLISH.md @@ -0,0 +1,59 @@ +# 发布到npm指南 + +## 发布步骤 + +1. **确保你有npm账号** + ```bash + npm login + ``` + +2. **检查包名是否可用** + ```bash + npm view create-userscript + ``` + 如果显示404错误，说明包名可用。 + +3. **发布到npm** + ```bash + npm publish + ``` + +4. **验证发布成功** + ```bash + npm view create-userscript + ``` + +## 使用方式 + +发布成功后，用户可以通过以下方式使用： + +```bash +# 方式1：使用npm create +npm create @javascript-reverse-engineering-infrastructure/userscript my-project + +# 方式2：使用npx +npx @javascript-reverse-engineering-infrastructure/create-userscript my-project +``` + +## 更新版本 + +当需要更新模板时： + +1. 修改代码 +2. 更新版本号： + ```bash + npm version patch # 补丁版本 (0.0.1 -> 0.0.2) + npm version minor # 次版本 (0.0.1 -> 0.1.0) + npm version major # 主版本 (0.0.1 -> 1.0.0) + ``` +3. 重新发布： + ```bash + npm publish + ``` + +## 注意事项 + +- 包名 `create-userscript` 需要在npm上是唯一的 +- 如果包名已被占用，需要修改 `package.json` 中的 `name` 字段 +- 建议使用语义化版本号 +- 发布前确保所有文件都在 `files` 字段中正确配置 diff --git a/README.md b/README.md index e0d9195..7968f48 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,9 @@ # UserScript Template +简体中文| [English](./README_en.md) + +官网链接： https://jsrei.github.io/userscript-template/#usage + # 一、这是什么 使用`Node.js`+`Webpack`模块化开发油猴脚本的方案，用于提升油猴开发体验，降低开发时的心智负担，让油猴脚本也能当做一个普通的模块化的前端项目来开发，要不然一个`JavaScript`文件几千行来回改本人真的有点顶不住...... @@ -12,7 +16,30 @@ # 三、快速开始 -在当前仓库（https://github.com/JSREI/userscript-template）选择“`Use this template`” --> “`Create a new repository`”，从这个模板仓库创建一个新的仓库： +## 方式一：使用npm命令创建（推荐） + +使用npm命令直接创建新项目： + +```bash +npm create @javascript-reverse-engineering-infrastructure/userscript my-userscript +``` + +或者使用npx： + +```bash +npx @javascript-reverse-engineering-infrastructure/create-userscript my-userscript +``` + +然后进入项目目录并安装依赖： + +```bash +cd my-userscript +npm install +``` + +## 方式二：从GitHub模板创建 + +在当前仓库（https://github.com/JSREI/userscript-template）选择“`Use this template`” --> “`Create a new repository`”，从这个模板仓库创建一个新的仓库： ![image-20230816233501101](README.assets/image-20230816233501101.png) @@ -91,6 +118,42 @@ npm install ![image-20230817004653299](README.assets/image-20230817004653299.png) +## Banner支持 + +项目支持在编译后的代码中添加自定义banner。在项目根目录的`banner.txt`文件中，你可以添加ASCII艺术字或其他装饰性文本： + +``` +▗▄▄▄▖▗▖ ▗▖▗▄▄▖ ▗▄▄▄▖ ▗▄▄▖ ▗▄▄▖▗▄▄▖ ▗▄▄▄▖▗▄▄▖▗▄▄▄▖ + █ ▝▚▞▘ ▐▌ ▐▌▐▌ ▐▌ ▐▌ ▐▌ ▐▌ █ ▐▌ ▐▌ █ + █ ▐▌ ▐▛▀▘ ▐▛▀▀▘ ▝▀▚▖▐▌ ▐▛▀▚▖ █ ▐▛▀▘ █ + █ ▐▌ ▐▌ ▐▙▄▄▖▗▄▄▞▘▝▚▄▄▖▐▌ ▐▌▗▄█▄▖▐▌ █ +``` + +编译时，banner内容会被自动插入到油猴脚本头部注释中，支持以下变量替换： +- `${name}` - 项目名称 +- `${version}` - 版本号 +- `${description}` - 项目描述 +- `${author}` - 作者信息 +- `${repository}` - 仓库地址 +- `${namespace}` - 命名空间 +- `${document}` - 文档地址 + +编译后的效果： +```javascript +// ==UserScript== +// @name my-project +// @version 1.0.0 +// ... +// ==/UserScript== + +// ▗▄▄▄▖▗▖ ▗▖▗▄▄▖ ▗▄▄▄▖ ▗▄▄▖ ▗▄▄▖▗▄▄▖ ▗▄▄▄▖▗▄▄▖▗▄▄▄▖ +// █ ▝▚▞▘ ▐▌ ▐▌▐▌ ▐▌ ▐▌ ▐▌ ▐▌ █ ▐▌ ▐▌ █ +// █ ▐▌ ▐▛▀▘ ▐▛▀▀▘ ▝▀▚▖▐▌ ▐▛▀▚▖ █ ▐▛▀▘ █ +// █ ▐▌ ▐▌ ▐▙▄▄▖▗▄▄▞▘▝▚▄▄▖▐▌ ▐▌▗▄█▄▖▐▌ █ + +// 你的代码... +``` + 然后就可以开心的写代码了，在编写代码的时候你可以使用`npm`命令为项目添加依赖，对于一个稍微复杂点的脚本而言很可能会引用外部的依赖： ```bash diff --git a/README_en.md b/README_en.md new file mode 100644 index 0000000..c776ebc --- /dev/null +++ b/README_en.md @@ -0,0 +1,238 @@ +# UserScript Template + +[简体中文](./README.md) | English + +# 1. What is this? + +A plan for using `Node.js` + `Webpack` for modular development of Tampermonkey scripts, aimed at improving the development experience of Tampermonkey, reducing the mental burden during development, and allowing Tampermonkey scripts to be developed like a regular modular front-end project. Otherwise, a `JavaScript` file with thousands of lines to be modified back and forth is really too much to handle... + +# 2. Advantages + +- Modular development of Tampermonkey projects can greatly enhance both the development experience and efficiency. You no longer have to worry about how to organize code within a single `JavaScript` file (Tampermonkey scripts uploaded to the Tampermonkey store must be single files without obfuscation or compression, and the JS files produced by modular development and packaging also meet the requirements for uploading). +- Hot module replacement (HMR) during development increases efficiency. By adopting the recommended development mode, Tampermonkey points to the local file address of the packaged results. When there are changes in the `JavaScript` code, it automatically compiles and packages the load, making it more efficient to modify and test code during development (those who have written Tampermonkey scripts should have experienced the frustration of spending a lot of time modifying and testing code back and forth, which is really exhausting). +- When publishing, the packaged result is a single `JavaScript` file with high readability, which complies with the Tampermonkey store's policy for listing scripts. The packaged file is ready for listing without the need for any manual processing work, making it simple, convenient, and hassle-free. + +# 3. Quick Start + +## Method 1: Using npm command (Recommended) + +Create a new project directly using npm command: + +```bash +npm create @javascript-reverse-engineering-infrastructure/userscript my-userscript +``` + +Or using npx: + +```bash +npx @javascript-reverse-engineering-infrastructure/create-userscript my-userscript +``` + +Then enter the project directory and install dependencies: + +```bash +cd my-userscript +npm install +``` + +## Method 2: Create from GitHub template + +To quickly get started with the project template, follow these steps: + +1. Go to the repository at [https://github.com/JSREI/userscript-template](https://github.com/JSREI/userscript-template). +2. Click on the "Use this template" button. +3. Then, select "Create a new repository" to create a new repository from this template. + +This process will set up a new repository for your project, using the structure and files provided by the template. If you encounter any issues with the link or the process, ensure that the link is correct and that you have a stable internet connection. If the problem persists, you may need to check for any updates or changes to the repository or try again later. + +![image-20230816233501101](README.assets/image-20230816233501101.png) + +Choose the location for the new repository and set the repository name, among other settings. Typically, it's convenient to place the new repository under your own account: + +1. After clicking "Create a new repository," you'll be prompted to choose the owner of the repository. It's common to select your own GitHub account. +2. Enter a name for your new repository that reflects its purpose or content. +3. Optionally, you can add a short description of the repository. +4. Choose whether the repository should be public or private. +5. Decide if you want to include a README file, .gitignore, and a license. +6. Click the "Create repository" button to finalize the creation process. + +This will create a new repository with the specified settings, ready for you to start your project development. + +![image-20230816235634094](README.assets/image-20230816235634094.png) + +The new repository has been created and cloned to your local machine. Then, in the root directory of the cloned project, execute the command to install the project's required dependencies: + +```bash +npm install +``` + +The installation of dependencies may take some time; please be patient and wait a moment. + +![image-20230817003339266](README.assets/image-20230817003339266.png) + +If the installation of dependencies is too slow or the downloads are not coming through, you can configure a domestic mirror source for `npm` or use `cnpm` (search for it on Google yourself). + +Then, modify the `package.json` file, replacing the relevant fields with your own, such as the name, author, repository address, and so on: + +```js +{ + "name": "userscript-foo", + "version": "0.0.1", + "main": "index.js", + "repository": "https://github.com/JSREI/userscript-template.git", + "scripts": { + // ... + }, + "author": "CC11001100 ", + "license": "MIT", + "devDependencies": { + //... + } +} +``` + +In the `userscript-headers.js` file located in the project's root directory, the default Tampermonkey headers are stored. During the `webpack` compilation, this file is placed at the beginning of the compiled file as the Tampermonkey plugin declaration: + +```js +// ==UserScript== +// @name ${name} +// @namespace ${repository} +// @version ${version} +// @description ${description} +// @document ${document} +// @author ${author} +// @match *://*/* +// @run-at document-start +// ==/UserScript== +``` + +`${name}`, `${version}`, and similar are some of the variables supported by this Tampermonkey scaffold. The principle is that during compilation, the corresponding values are obtained from `package.json` and the variables are replaced (this is called variable rendering). This way, for content that might be repeated or constantly changing, we can use a single source reference without having to set or repeatedly modify it. If the default configuration does not meet your requirements, you can directly modify this header file, for example, to add permissions: + +```js +// ==UserScript== +// @name ${name} +// @namespace ${repository} +// @version ${version} +// @description ${description} +// @document ${document} +// @author ${author} +// @match *://*/* +// @run-at document-start +// @grant GM_getValue +// @grant GM_setValue +// @grant GM_registerMenuCommand +// @grant GM.getValue +// @grant GM.setValuex +// @grant GM.registerMenuCommand +// ==/UserScript== +``` + +In addition to variable substitution, all other content will be preserved as is, this is what the compiled version looks like: + +![image-20230817004653299](README.assets/image-20230817004653299.png) + +## Banner Support + +The project supports adding custom banners to the compiled code. In the `banner.txt` file in the project root directory, you can add ASCII art or other decorative text: + +``` +▗▄▄▄▖▗▖ ▗▖▗▄▄▖ ▗▄▄▄▖ ▗▄▄▖ ▗▄▄▖▗▄▄▖ ▗▄▄▄▖▗▄▄▖▗▄▄▄▖ + █ ▝▚▞▘ ▐▌ ▐▌▐▌ ▐▌ ▐▌ ▐▌ ▐▌ █ ▐▌ ▐▌ █ + █ ▐▌ ▐▛▀▘ ▐▛▀▀▘ ▝▀▚▖▐▌ ▐▛▀▚▖ █ ▐▛▀▘ █ + █ ▐▌ ▐▌ ▐▙▄▄▖▗▄▄▞▘▝▚▄▄▖▐▌ ▐▌▗▄█▄▖▐▌ █ +``` + +During compilation, the banner content will be automatically inserted into the userscript header comments, supporting the following variable substitutions: +- `${name}` - Project name +- `${version}` - Version number +- `${description}` - Project description +- `${author}` - Author information +- `${repository}` - Repository address +- `${namespace}` - Namespace +- `${document}` - Document address + +Compiled result: +```javascript +// ==UserScript== +// @name my-project +// @version 1.0.0 +// ... +// ==/UserScript== + +// ▗▄▄▄▖▗▖ ▗▖▗▄▄▖ ▗▄▄▄▖ ▗▄▄▖ ▗▄▄▖▗▄▄▖ ▗▄▄▄▖▗▄▄▖▗▄▄▄▖ +// █ ▝▚▞▘ ▐▌ ▐▌▐▌ ▐▌ ▐▌ ▐▌ ▐▌ █ ▐▌ ▐▌ █ +// █ ▐▌ ▐▛▀▘ ▐▛▀▀▘ ▝▀▚▖▐▌ ▐▛▀▚▖ █ ▐▛▀▘ █ +// █ ▐▌ ▐▌ ▐▙▄▄▖▗▄▄▞▘▝▚▄▄▖▐▌ ▐▌▗▄█▄▖▐▌ █ + +// Your code... +``` + +Then you can happily start coding. While writing code, you can use the `npm` command to add dependencies to your project. For a slightly more complex script, it is very likely to reference external dependencies: + +```bash +npm add xxx +``` + +However, it is important to note that these dependencies will ultimately be packed into `./dist/index.js`, and this file should not be too large, so try to avoid referencing too many third-party libraries. + +At the same time, you can now organize your code in a modular way under the `src` directory, instead of struggling with a single `JavaScript` file that is thousands of lines long as before (single-file development is simply a form of mental torture...): + +![image-20230817003923075](README.assets/image-20230817003923075.png) + +When you need to test, execute: + +```bash +npm run watch +``` + +Then copy the file header from `./dist/index.js` to your Tampermonkey extension: + +![image-20230817000716664](README.assets/image-20230817000716664.png) + +And at the end, add a line to import the compiled file, noting that the `file://` followed by the address points to the absolute path of your compiled `./dist/index.js`: + +```js +// @require file://D:/workspace/userscript-template/dist/index.js +``` + +For example, here is an actual example of a Tampermonkey script used during development. The Tampermonkey script does not contain actual code but uses `require` to point to our `build` files. This way, when the code is modified and `webpack` automatically hot compiles, the `./dist/index.js` referenced in the browser is also the latest: + +```js +// ==UserScript== +// @name userscript-foo +// @namespace https://github.com/JSREI/userscript-template.git +// @version 0.0.1 +// @description +// @document +// @author CC11001100 +// @match *://*/* +// @run-at document-start +// @require file://D:/workspace/userscript-template/dist/index.js +// ==/UserScript== +(() => {})(); +``` + +Please note that when you debug using the method `// @require file://D:/workspace/userscript-template/dist/index.js`, your Tampermonkey extension should be configured to allow access to file URLs (by default, it is not allowed). Right-click on the browser plugin icon and select "Manage Extensions": + +![image-20240723005213833](./README.assets/image-20240723005213833.png) + +Make sure that the "Allow access to file URLs" switch is turned on; otherwise, `@require` will not be able to reference local files: + +![image-20240723005321887](./README.assets/image-20240723005321887.png) + +You might notice that when you run `npm run watch`, the command does not exit after compiling the code but instead enters a waiting state. Yes, just as its name suggests, it activates a `watch` mode. When you modify the source code files, `webpack` will recompile your code for you. All you need to do is directly modify your source code files, make the changes, then switch to the browser and refresh the page for the changes to take effect! (There is no automatic browser refresh introduced here. Is it necessary? To be honest, it is necessary, but I don't really know how to set it up, so let's just make do with what we have....) + +When you need to publish: + +```bash +npm run build +``` + +Then simply take the `./dist/index.js` file and publish it. + + + + + + + diff --git a/banner.txt b/banner.txt new file mode 100644 index 0000000..5c15a5d --- /dev/null +++ b/banner.txt @@ -0,0 +1,22 @@ + +▗▄▄▄▖▗▖ ▗▖▗▄▄▖ ▗▄▄▄▖ ▗▄▄▖ ▗▄▄▖▗▄▄▖ ▗▄▄▄▖▗▄▄▖▗▄▄▄▖ + █ ▝▚▞▘ ▐▌ ▐▌▐▌ ▐▌ ▐▌ ▐▌ ▐▌ █ ▐▌ ▐▌ █ + █ ▐▌ ▐▛▀▘ ▐▛▀▀▘ ▝▀▚▖▐▌ ▐▛▀▚▖ █ ▐▛▀▘ █ + █ ▐▌ ▐▌ ▐▙▄▄▖▗▄▄▞▘▝▚▄▄▖▐▌ ▐▌▗▄█▄▖▐▌ █ + + + +▗▖ ▗▖ ▗▄▄▖▗▄▄▄▖▗▄▄▖ ▗▄▄▖ ▗▄▄▖▗▄▄▖ ▗▄▄▄▖▗▄▄▖▗▄▄▄▖ +▐▌ ▐▌▐▌ ▐▌ ▐▌ ▐▌▐▌ ▐▌ ▐▌ ▐▌ █ ▐▌ ▐▌ █ +▐▌ ▐▌ ▝▀▚▖▐▛▀▀▘▐▛▀▚▖ ▝▀▚▖▐▌ ▐▛▀▚▖ █ ▐▛▀▘ █ +▝▚▄▞▘▗▄▄▞▘▐▙▄▄▖▐▌ ▐▌▗▄▄▞▘▝▚▄▄▖▐▌ ▐▌▗▄█▄▖▐▌ █ + + + +▗▄▄▄▖▗▄▄▄▖▗▖ ▗▖▗▄▄▖ ▗▖ ▗▄▖▗▄▄▄▖▗▄▄▄▖ + █ ▐▌ ▐▛▚▞▜▌▐▌ ▐▌▐▌ ▐▌ ▐▌ █ ▐▌ + █ ▐▛▀▀▘▐▌ ▐▌▐▛▀▘ ▐▌ ▐▛▀▜▌ █ ▐▛▀▀▘ + █ ▐▙▄▄▖▐▌ ▐▌▐▌ ▐▙▄▄▖▐▌ ▐▌ █ ▐▙▄▄▖ + + + diff --git a/fuck-hot-compile.sh b/fuck-hot-compile.sh new file mode 100755 index 0000000..42eb5c2 --- /dev/null +++ b/fuck-hot-compile.sh @@ -0,0 +1,43 @@ +#!/bin/bash + +# 自动安装依赖的热更新脚本 +# 使用方式：chmod +x ./fuck-hot-compile.sh && ./fuck-hot-compile.sh + +# 检测包管理器并安装依赖 +init_project() { + if command -v yarn &> /dev/null; then + echo "使用 yarn 安装依赖..." + yarn install --frozen-lockfile + elif command -v npm &> /dev/null; then + echo "使用 npm 安装依赖..." + npm ci + else + echo "错误：未检测到 yarn 或 npm，请先安装 Node.js" + exit 1 + fi +} + +# 获取构建命令 +detect_build_command() { + if [ -f yarn.lock ]; then + echo "yarn build" + else + echo "npm run build" + fi +} + +# ---------- 主流程 ---------- +init_project +build_command=$(detect_build_command) + +echo "启动热更新监听..." +while true; do + echo "[$(date +'%T')] 开始构建..." + if $build_command; then + echo "[$(date +'%T')] 构建成功 ✅" + else + echo "[$(date +'%T')] 构建失败 ❌，10秒后重试..." + sleep 10 + fi + sleep 1 +done \ No newline at end of file diff --git a/package.json b/package.json index 70e3f52..f1853b8 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,22 @@ { - "name": "userscript-foo", - "version": "0.0.1", - "description": "this is userscript's description", + "name": "@javascript-reverse-engineering-infrastructure/create-userscript", + "version": "1.0.0", + "description": "A template for developing userscripts with Node.js and Webpack", "main": "index.js", + "bin": { + "create-userscript-template": "./bin/create-userscript.js" + }, "repository": "https://github.com/JSREI/userscript-template.git", "namespace": "https://github.com/JSREI/userscript-template.git", "document": "https://github.com/JSREI/userscript-template.git", + "keywords": [ + "userscript", + "tampermonkey", + "greasemonkey", + "template", + "webpack", + "create" + ], "scripts": { "build": "webpack --config webpack.prod.js", "watch": "webpack --watch --config webpack.dev.js" @@ -16,5 +27,11 @@ "webpack": "^5.88.2", "webpack-cli": "^5.1.4", "webpack-merge": "^5.9.0" - } + }, + "files": [ + "bin/", + "template/", + "README.md", + "LICENSE" + ] } diff --git a/webpack.common.js b/webpack.common.js index 075b435..9f302bd 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -32,6 +32,21 @@ module.exports = { userscriptHeaders = userscriptHeaders.replaceAll("${document}", webpackPackageJson["document"] || ""); userscriptHeaders = userscriptHeaders.replaceAll("${author}", webpackPackageJson["author"] || ""); userscriptHeaders = userscriptHeaders.replaceAll("${repository}", webpackPackageJson["repository"] || ""); + + // 如果存在 banner 的话，则读取插入 + const bannerFilePath = "./banner.txt"; + if (fs.existsSync(bannerFilePath)) { + let banner = fs.readFileSync(bannerFilePath).toString("utf-8"); + banner = banner.replaceAll("${name}", webpackPackageJson["name"] || ""); + banner = banner.replaceAll("${namespace}", webpackPackageJson["namespace"] || ""); + banner = banner.replaceAll("${version}", webpackPackageJson["version"] || ""); + banner = banner.replaceAll("${description}", webpackPackageJson["description"] || ""); + banner = banner.replaceAll("${document}", webpackPackageJson["document"] || ""); + banner = banner.replaceAll("${author}", webpackPackageJson["author"] || ""); + banner = banner.replaceAll("${repository}", webpackPackageJson["repository"] || ""); + userscriptHeaders += "\n" + banner.split("\n").join("\n// ") + "\n"; + } + return userscriptHeaders; } }), diff --git a/website/images/image-20230816233501101.png b/website/images/image-20230816233501101.png new file mode 100644 index 0000000..357d298 Binary files /dev/null and b/website/images/image-20230816233501101.png differ diff --git a/website/images/image-20240723005213833.png b/website/images/image-20240723005213833.png new file mode 100644 index 0000000..a4d0393 Binary files /dev/null and b/website/images/image-20240723005213833.png differ diff --git a/website/images/image-20240723005321887.png b/website/images/image-20240723005321887.png new file mode 100644 index 0000000..7c11dac Binary files /dev/null and b/website/images/image-20240723005321887.png differ diff --git a/website/index.html b/website/index.html new file mode 100644 index 0000000..29a9355 --- /dev/null +++ b/website/index.html @@ -0,0 +1,1867 @@ + + + + + + UserScript Template - 现代化油猴脚本开发模板 + + + + + + +
+

UserScript Template

+

现代化油猴脚本开发模板 - 支持模块化开发、热加载、npm包管理

+
+ +
+
+ +
+
+

核心特性

+
+
+
⚡
+
+

一键创建项目

+

通过 npm 命令一键创建项目，无需手动配置，开箱即用

+
+
+
+
📦
+
+

模块化开发

+

使用 Webpack 模块化管理代码，告别单文件开发的痛苦

+
+
+
+
🔄
+
+

热加载支持

+

开发时修改代码自动编译，实时预览效果

+
+
+
+
🎨
+
+

Banner 支持

+

支持自定义 ASCII 艺术字，让你的脚本更有个性

+
+
+
+
🎯
+
+

符合商店要求

+

打包后为高可读性的单文件，完全符合油猴商店上架政策

+
+
+
+
🚀
+
+

发布友好

+

一键构建发布版本，无需额外处理即可上架

+
+
+
+
+ +
+

快速开始

+
+ + +
+ +
+
    +
  1. +

    创建项目

    +
    + + +
    + +
    +

    推荐方式 - 使用 npm 命令一键创建项目：

    + 
    # 使用 npm create（推荐）
+npm create @javascript-reverse-engineering-infrastructure/userscript my-userscript
+
+# 或者使用 npx
+npx @javascript-reverse-engineering-infrastructure/create-userscript my-userscript
+
+# 进入项目目录
+cd my-userscript
+
+# 安装依赖
+npm install
    +
    + 优势： 自动配置所有必要文件，包括 webpack 配置、package.json、banner.txt 等，开箱即用！ +
    +
    + +
    +

    在 GitHub 模板仓库选择 "Use this template" 创建新仓库

    + + + + + + 前往模板仓库 + + + + + + Loading... + + + 创建项目示例 +
    +
    2. +
  2. +

    开始开发

    +

    项目创建完成后，你就可以开始开发了！项目结构如下：

    + 
    my-userscript/
+├── src/                 # 源代码目录
+│   ├── index.js        # 入口文件
+│   ├── foo_module/     # 示例模块
+│   └── bar_module/     # 示例模块
+├── dist/               # 编译输出目录
+├── banner.txt          # Banner 文件
+├── userscript-headers.js # 油猴脚本头部配置
+├── webpack.*.js        # Webpack 配置
+└── package.json        # 项目配置
    +
    3. +
  3. +

    启动开发模式

    +

    在项目目录下运行以下命令启动开发服务，支持热重载：

    +
    + + +
    +
    +
    + + +
    +
    + 
    npm run watch
    +
    +
    + 
    yarn watch
    +
    +
    +
    + 
    ./fuck-hot-compile.sh
    +

    + 说明： 这是一个简单的 shell 脚本，用于在遇到 hot watch 不工作时的替代方案 +

    +
    +

    此命令会监听源文件变化并自动重新编译。

    +
    4. +
  4. +

    构建发布

    + 
    npm run build
    +
    5. +
+
+ +
+
    +
  1. +

    创建项目

    +

    在 GitHub 模板仓库选择 "Use this template" 创建新仓库

    + + + + + + 前往模板仓库 + + + + + + Loading... + + + 创建项目示例 +
    2. +
  2. +

    安装依赖

    + 
    git clone [你的仓库地址]
+cd [项目目录]
+yarn install
    +
    3. +
  3. +

    启动热编译

    +

    在项目目录下运行以下命令启动开发服务：

    +
    + + +
    +
    +
    + + +
    +
    + 
    npm run watch
    +
    +
    + 
    yarn watch
    +
    +
    +
    + 
    ./fuck-hot-compile.sh
    +

    + 说明： 这是一个简单的 shell 脚本，用于在遇到 hot watch 不工作时的替代方案 +

    +
    +

    此命令会监听源文件变化并自动重新编译。

    +
    4. +
  4. +

    构建发布

    + 
    yarn build
    +
    5. +
+
+
+ + + +
+

油猴本地调试指南

+

在开发过程中，您需要在油猴中创建一个指向本地文件的脚本。具体步骤如下：

+ +
    +
  1. +

    创建新脚本

    +

    在油猴扩展中创建新脚本，复制以下基础配置：

    + 
    // ==UserScript==
+// @name         [你的脚本名称]
+// @namespace    [你的仓库地址]
+// @version      0.0.1
+// @description  [脚本描述]
+// @author       [作者名称]
+// @match        *://*/*
+// @run-at       document-start
+// @require      file://[本地项目路径]/dist/index.js
+// ==/UserScript==
+
+(() => {})();
    +
    2. + +
  2. +

    配置文件访问权限

    +
    +
    +
    +
    + + + +
    + 注意： 开发时需要在油猴扩展设置中允许访问文件网址，否则无法使用本地文件调试。 +
    +
    +
    +

    请按照以下步骤开启文件网址访问权限：

    +
      +
    1. 在浏览器插件图标上右键，选择"管理扩展程序"：
      2. + 管理扩展程序 +
    2. 确保"允许访问文件网址"开关是打开的：
      3. + 允许访问文件网址 +
    +

    完成以上设置后，即可使用本地文件进行开发调试。

    +
    +
    +
    +
    +
    3. + +
  3. +

    启动热编译

    +

    在项目目录下运行以下命令启动开发服务：

    +
    + + +
    +
    +
    + + +
    +
    + 
    npm run watch
    +
    +
    + 
    yarn watch
    +
    +
    +
    + 
    ./fuck-hot-compile.sh
    +

    + 说明： 这是一个简单的 shell 脚本，用于在遇到 hot watch 不工作时的替代方案 +

    +
    +

    此命令会监听源文件变化并自动重新编译。

    +
    4. + +
  4. +

    开发调试

    +

    现在您可以：

    +
      +
    • 修改 src 目录下的源代码
      • +
    • 保存后自动重新编译
      • +
    • 刷新浏览器页面查看效果
      • +
    +

    源码修改会自动编译到 dist/index.js，油猴脚本会自动加载最新编译结果。

    +
    5. +
+ +
+ 提示： 开发完成后，执行 npm run build 或 yarn build 生成发布文件，然后将 dist/index.js 中的内容复制到油猴脚本中即可发布。 +
+
+
+ +
+

© 2025 UserScript Template. All rights reserved.

+
+ +
+
+ + 预览图片 +
+
+ + + + \ No newline at end of file