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. 开始开发

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

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

  3. 启动开发模式

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

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

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

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

  4. 构建发布

    npm run build

  1. 创建项目

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

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

  2. 安装依赖

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

  3. 启动热编译

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

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

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

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

  4. 构建发布

    yarn build

油猴本地调试指南

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

  1. 创建新脚本

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

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

(() => {})();

  2. 配置文件访问权限

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

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

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

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

  3. 启动热编译

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

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

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

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

  4. 开发调试

    现在您可以：

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

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

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