# xxl-dir-plugin

**Repository Path**: heyzeng/xxl-dir-plugin

## Basic Information

- **Project Name**: xxl-dir-plugin
- **Description**: XXL开源社区官网目录插件，方便学习XXL-JOB、XXL-SSO、XXL-CONF、XXL-API等项目
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: https://www.xuxueli.com
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-03
- **Last Updated**: 2025-10-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# XXL-JOB 文档优化浏览器插件

这是一个用于优化 XXL-JOB 文档阅读体验的浏览器插件。它将文档目录固定在左侧，内容居中显示，提供更好的阅读体验。

## 功能特性

✨ **左侧固定目录** - 目录始终显示在页面左侧，方便快速导航  
📱 **响应式设计** - 适配不同屏幕尺寸  
🎯 **智能高亮** - 自动高亮当前阅读章节  
🔄 **折叠/展开** - 点击按钮可以折叠或展开目录  
🎨 **美观界面** - 现代化的 UI 设计，舒适的阅读体验  
⚡ **平滑滚动** - 点击目录项平滑跳转到对应章节  

## 安装方法

### Chrome / Edge / Opera 浏览器

1. 下载本插件的所有文件到本地文件夹
2. 打开浏览器，进入扩展程序管理页面：
   - Chrome: `chrome://extensions/`
   - Edge: `edge://extensions/`
   - Opera: `opera://extensions/`
3. 开启右上角的 **"开发者模式"**
4. 点击 **"加载已解压的扩展程序"** 按钮
5. 选择本插件所在的文件夹
6. 安装完成！

### Firefox 浏览器

1. 下载本插件的所有文件到本地文件夹
2. 将 `manifest.json` 中的 `manifest_version` 改为 `2`（如果需要）
3. 打开浏览器，进入 `about:debugging#/runtime/this-firefox`
4. 点击 **"临时加载附加组件"**
5. 选择 `manifest.json` 文件
6. 安装完成！

## 使用说明

1. 安装插件后，访问 XXL-JOB 文档网站：https://www.xuxueli.com/xxl-job/
2. 页面会自动应用优化布局
3. 左侧显示文档目录，中间显示内容
4. 点击左上角的折叠按钮（☰）可以隐藏/显示目录
5. 点击目录项可以快速跳转到对应章节
6. 当前阅读的章节会在目录中自动高亮显示

## 文件说明

```
xxl-job-optimizer/
├── manifest.json      # 插件配置文件
├── content.js         # 内容脚本（负责页面布局优化）
├── styles.css         # 样式文件（定义界面样式）
├── README.md          # 说明文档
└── icons/             # 图标文件夹（可选）
    ├── icon16.png
    ├── icon48.png
    └── icon128.png
```

## 图标说明

插件需要以下尺寸的图标（可选，如果没有图标，可以从 manifest.json 中删除 icons 字段）：
- 16x16 像素 - 用于扩展程序页面的图标
- 48x48 像素 - 用于扩展程序管理页面
- 128x128 像素 - 用于 Chrome Web Store

## 自定义配置

如果需要调整样式，可以编辑 `styles.css` 文件：

- **目录宽度**：修改 `.xxljob-toc-container` 的 `width` 属性
- **内容最大宽度**：修改 `.xxljob-content-container` 的 `max-width` 属性
- **颜色主题**：修改各个选择器的颜色值
- **字体大小**：修改 `font-size` 属性

## 兼容性

- ✅ Chrome 88+
- ✅ Edge 88+
- ✅ Opera 74+
- ✅ Firefox 85+（需要调整 manifest 版本）

## 技术栈

- **Manifest V3** - 最新的浏览器扩展标准
- **纯 JavaScript** - 无需任何框架或依赖
- **CSS3** - 现代化的样式设计

## 贡献

欢迎提交 Issue 和 Pull Request！

## 更新日志

### v1.0.0 (2025-10-02)
- ✨ 初始版本发布
- ✨ 支持左侧固定目录
- ✨ 支持折叠/展开功能
- ✨ 支持平滑滚动和智能高亮
- ✨ 响应式设计

## 联系方式

如有问题或建议，欢迎反馈！