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 中的内容复制到油猴脚本中即可发布。
预览图片