# z-chrome-yapi

**Repository Path**: psvmc/z-chrome-yapi

## Basic Information

- **Project Name**: z-chrome-yapi
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-06
- **Last Updated**: 2026-07-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# YApi 页面优化

Chrome 扩展（Manifest V3），用于增强 [YApi](https://github.com/YMFE/yapi) 接口管理页面的使用体验。

默认适配域名：`https://api.xhkjedu.com/`，也可在扩展设置中修改为其他 YApi 实例地址。

## 功能

- **接口列表排序**：左侧接口树与右侧表格按名称升序排列（支持 `1、2、10` 这类数字前缀的自然排序）
- **列显示控制**：可勾选显示/隐藏「接口名称、接口路径、接口分类、状态、Tag」
- **表格宽度优化**：隐藏列不再占用列宽，剩余列自动撑满表格
- **页面布局优化**：接口页去除底部留白，左侧树与右侧内容区支持独立滚动
- **隐藏 Footer**：隐藏 YApi 页面底部 footer 区域

## 安装（开发调试）

1. 克隆或下载本项目到本地
2. 打开 Chrome，访问 `chrome://extensions/`
3. 开启右上角 **开发者模式**
4. 点击 **加载已解压的扩展程序**
5. 选择本项目根目录（包含 `manifest.json` 的文件夹）

加载成功后，访问已配置的 YApi 域名即可生效。

## 配置

点击浏览器工具栏中的扩展图标，打开设置面板：

| 配置项 | 说明 |
|--------|------|
| YApi 域名 | 你的 YApi 服务地址，如 `https://api.xhkjedu.com/` |
| 接口列表排序 | 开启后，左侧分类/接口与右侧表格按名称排序 |
| 显示列 | 勾选需要在右侧表格中显示的列 |

修改后点击 **保存**。若更换了域名，需刷新 YApi 页面后生效。

## 打包发布

扩展发布包只需包含 `manifest.json` 和 `src/` 目录，不需要 README、脚本或 `.analysis/` 等开发文件。

### 方式一：使用打包脚本（推荐）

在项目根目录执行：

```powershell
.\scripts\package.ps1
```

会在 `dist/` 目录生成 `z-chrome-yapi-v1.0.0.zip`（文件名与项目目录名一致）。

指定版本号：

```powershell
.\scripts\package.ps1 -Version 1.0.1
```

### 方式二：Chrome 自带打包

1. 打开 `chrome://extensions/`，开启 **开发者模式**
2. 点击 **打包扩展程序**
3. **扩展程序根目录** 选择本项目根目录
4. **私有密钥文件** 首次留空（会生成 `.pem` 文件，用于后续增量更新）
5. 点击 **打包扩展程序**，得到 `.crx` 和 `.pem` 文件

> 注意：`.pem` 私钥请妥善保管，丢失后无法对同一扩展 ID 发布更新包。

### 方式三：手动压缩

将以下内容打成 zip（**zip 根目录直接是 `manifest.json`**，不要多套一层文件夹）：

```
manifest.json
src/
  background.js
  content.js
  content.css
  page-hook.js
  popup.html
  popup.js
  popup.css
```

## 分发安装

### 给其他用户安装 zip 包

1. 将 `dist/z-chrome-yapi-x.x.x.zip` 发给对方
2. 对方解压到本地文件夹
3. 在 `chrome://extensions/` 中 **加载已解压的扩展程序**，选择解压后的文件夹

### 安装 crx 包

将 `.crx` 文件拖入 `chrome://extensions/` 页面（部分 Chrome 版本可能限制非商店 crx 安装）。

## 项目结构

```
z-chrome-yapi/
├── manifest.json          # 扩展清单（MV3）
├── src/
│   ├── background.js      # Service Worker：注册 content scripts
│   ├── content.js         # 内容脚本：列样式、布局修复、配置注入
│   ├── content.css        # 内容样式：表格、布局、footer 隐藏
│   ├── page-hook.js       # 页面脚本（MAIN world）：拦截 API 响应并排序
│   ├── popup.html         # 设置面板
│   ├── popup.js
│   └── popup.css
├── scripts/
│   └── package.ps1        # 打包脚本
├── dist/                  # 打包输出目录（自动生成，已忽略）
├── .analysis/             # 本地分析临时文件（已忽略，勿提交）
└── README.md
```

## 技术说明

- **排序实现**：`page-hook.js` 在页面主环境拦截 `XMLHttpRequest` / `fetch`，对 `/api/interface/list`、`list_menu`、`list_cat`、`getCatMenu` 等接口响应做排序后返回
- **列隐藏**：`content.js` 动态注入 CSS，并重置 Ant Design Table 的 `colgroup` 列宽
- **配置存储**：使用 `chrome.storage.sync` 跨设备同步设置
- **多域名支持**：通过 `chrome.scripting.registerContentScripts` 按用户配置的域名动态注册脚本

## 常见问题

**保存设置后没生效？**  
刷新 YApi 页面。若刚修改了域名，需确认新域名已授权并重新加载页面。

**排序没生效？**  
确认设置里「接口列表排序」已开启，并硬刷新页面（Ctrl+Shift+R）。

**换了一台 YApi 服务器？**  
在扩展设置中修改「YApi 域名」并保存，然后刷新目标站点。

## 版本

当前版本：`1.0.0`（见 `manifest.json`）

## 许可证

本项目仅供内部使用，按需自行维护与分发。