132 lines
3.2 KiB
Markdown
132 lines
3.2 KiB
Markdown
# 安装指南
|
||
|
||
## 安装步骤
|
||
|
||
### 1. 准备图标文件（可选）
|
||
|
||
插件需要图标文件才能正常显示。如果你暂时没有图标，可以：
|
||
- 跳过这一步，浏览器会使用默认图标
|
||
- 或者创建三个 PNG 文件：
|
||
- `icon16.png` (16x16)
|
||
- `icon48.png` (48x48)
|
||
- `icon128.png` (128x128)
|
||
|
||
### 2. 在 Chrome/Edge/Brave 中安装
|
||
|
||
1. 打开浏览器
|
||
2. 访问扩展管理页面：
|
||
- Chrome: 在地址栏输入 `chrome://extensions/`
|
||
- Edge: 在地址栏输入 `edge://extensions/`
|
||
- Brave: 在地址栏输入 `brave://extensions/`
|
||
|
||
3. 开启右上角的"开发者模式"开关
|
||
|
||
4. 点击"加载已解压的扩展程序"按钮
|
||
|
||
5. 选择 `browser-extension` 文件夹（包含 manifest.json 的文件夹）
|
||
|
||
6. 插件安装完成！
|
||
|
||
### 3. 使用插件
|
||
|
||
1. 访问目标网站（你的项目）
|
||
|
||
2. 打开开发者工具（F12），在控制台可以看到：
|
||
```
|
||
✅ XHR 解密插件已启动
|
||
```
|
||
|
||
3. 触发一些请求后，控制台会输出解密信息：
|
||
```
|
||
🔓 XHR 解密 [POST] /api/example
|
||
🔑 密钥: 1234567890123456
|
||
📤 请求: { ... }
|
||
📥 响应: { ... }
|
||
```
|
||
|
||
4. 点击浏览器工具栏中的插件图标，打开弹窗查看所有解密记录
|
||
|
||
## 注意事项
|
||
|
||
### 重要：解密功能需要从页面获取解密函数
|
||
|
||
由于项目代码没有暴露解密工具，插件需要从页面环境获取解密函数。有以下几种方案：
|
||
|
||
#### 方案1：从页面模块系统获取（推荐）
|
||
|
||
插件会尝试注入脚本到页面，访问页面的模块系统来获取 `Decrypt` 函数。
|
||
|
||
如果这种方式不起作用，需要：
|
||
|
||
#### 方案2：修改插件添加 CryptoJS 支持
|
||
|
||
1. 下载 CryptoJS 库：https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js
|
||
|
||
2. 将 CryptoJS 库放入 `browser-extension` 文件夹
|
||
|
||
3. 修改 `manifest.json`，添加：
|
||
```json
|
||
"web_accessible_resources": [
|
||
{
|
||
"resources": ["crypto-js.min.js"],
|
||
"matches": ["<all_urls>"]
|
||
}
|
||
]
|
||
```
|
||
|
||
4. 修改 `content-script.js`，在开头加载 CryptoJS：
|
||
```javascript
|
||
// 从本地加载 CryptoJS
|
||
const script = document.createElement('script');
|
||
script.src = chrome.runtime.getURL('crypto-js.min.js');
|
||
script.onload = function() {
|
||
// CryptoJS 加载完成
|
||
};
|
||
document.head.appendChild(script);
|
||
```
|
||
|
||
#### 方案3：临时修改项目代码（不推荐）
|
||
|
||
如果需要最简单的方式，可以临时修改项目代码暴露解密工具：
|
||
|
||
在 `src/utils/request.ts` 的末尾添加：
|
||
```typescript
|
||
if (typeof window !== 'undefined') {
|
||
(window as any).__DECRYPT_TOOLS__ = {
|
||
Decrypt,
|
||
Encrypt,
|
||
getMap: () => map,
|
||
getKey: (url: string, uuid: string) => {
|
||
return map?.[url + '/' + uuid]?.timestampKey;
|
||
}
|
||
};
|
||
}
|
||
```
|
||
|
||
## 故障排查
|
||
|
||
### 插件没有反应
|
||
|
||
1. 检查控制台是否有错误信息
|
||
2. 确认页面已完全加载
|
||
3. 检查是否有 XHR 请求发生
|
||
|
||
### 解密失败
|
||
|
||
1. 检查是否能从页面获取解密函数
|
||
2. 查看控制台的错误信息
|
||
3. 尝试使用方案2或方案3
|
||
|
||
### 插件图标不显示
|
||
|
||
1. 确认图标文件存在
|
||
2. 检查 manifest.json 中的图标路径
|
||
3. 重新加载插件
|
||
|
||
## 卸载
|
||
|
||
1. 访问扩展管理页面
|
||
2. 找到"XHR 请求解密工具"
|
||
3. 点击"移除"按钮
|
||
|