UserScript Template

使用 Node.js + Webpack 模块化开发油猴脚本的高效方案

核心特性

📦

模块化开发

不再需要在单个 JavaScript 文件中组织代码，而是采用WebPack模块化管理代码，提升开发体验与效率

🔄

热加载支持

开发时修改代码自动编译打包加载，让测试更高效

🎯

符合商店要求

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

🚀

发布友好

打包后生成高可读性的单文件脚本，完全符合油猴商店的上架要求，无需额外处理

快速开始

  1. 创建项目

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

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

  2. 安装依赖

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

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