Skip to content

Commit ca6bb64

Browse files
CC11001100CC11001100
committed
完善README页面：添加中英文README文档，更新首页描述
- 创建详细的英文README.md，包含项目介绍、解决的问题、使用场景等 - 创建中文README.zh-CN.md，提供完整的中文文档 - 更新网页首页描述，更清楚地说明工具解决Chrome复制cURL命令的问题 - 说明工具适用于导入Postman、Apifox、Coze插件等外部系统的场景
1 parent e333d81 commit ca6bb64

File tree

3 files changed

+290
-67
lines changed

3 files changed

+290
-67
lines changed

‎README.md‎

Lines changed: 143 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,146 @@
1-
# React + TypeScript + Vite
2-
3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4-
5-
Currently, two official plugins are available:
6-
7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9-
10-
## Expanding the ESLint configuration
11-
12-
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13-
14-
```js
15-
export default tseslint.config([
16-
globalIgnores(['dist']),
17-
{
18-
files: ['**/*.{ts,tsx}'],
19-
extends: [
20-
// Other configs...
21-
22-
// Remove tseslint.configs.recommended and replace with this
23-
...tseslint.configs.recommendedTypeChecked,
24-
// Alternatively, use this for stricter rules
25-
...tseslint.configs.strictTypeChecked,
26-
// Optionally, add this for stylistic rules
27-
...tseslint.configs.stylisticTypeChecked,
28-
29-
// Other configs...
30-
],
31-
languageOptions: {
32-
parserOptions: {
33-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
34-
tsconfigRootDir: import.meta.dirname,
35-
},
36-
// other options...
37-
},
38-
},
39-
])
1+
# cURL Filter
2+
3+
[中文文档](README.zh-CN.md) | English
4+
5+
A powerful web-based tool for filtering and editing cURL commands with configurable rules. Perfect for cleaning up cURL commands copied from browser developer tools before importing them into external systems.
6+
7+
## 🚀 Live Demo
8+
9+
Visit: [https://jsrei.github.io/curl-filter/](https://jsrei.github.io/curl-filter/)
10+
11+
## 🎯 Problem Solved
12+
13+
When you copy a request as cURL from Chrome DevTools (or other browsers), it includes many default headers and parameters that you might not need:
14+
15+
- Unnecessary headers like `User-Agent`, `Accept-Language`, `Accept-Encoding`, etc.
16+
- Browser-specific headers like `sec-ch-ua`, `sec-fetch-*` headers
17+
- Authentication cookies that shouldn't be shared
18+
- Redundant query parameters
19+
20+
This tool helps you clean up these cURL commands by applying configurable filtering rules.
21+
22+
## 🔧 Use Cases
23+
24+
- **API Testing Tools**: Clean cURL commands before importing into Postman, Apifox, Insomnia
25+
- **Coze Plugin Development**: Prepare clean API requests for plugin configuration
26+
- **Documentation**: Generate clean cURL examples for API documentation
27+
- **Security**: Remove sensitive headers and cookies from shared cURL commands
28+
- **Automation**: Standardize cURL commands for scripts and CI/CD pipelines
29+
30+
## ✨ Features
31+
32+
- **Smart Filtering**: Remove unwanted headers, query parameters, and form data
33+
- **Configurable Rules**: Create custom filtering rules with regex patterns
34+
- **Real-time Preview**: See filtering results as you type
35+
- **History Management**: Keep track of your filtering history
36+
- **Export/Import**: Save and share your filtering rules
37+
- **Responsive Design**: Works on desktop and mobile devices
38+
39+
## 🛠️ Installation
40+
41+
### Prerequisites
42+
43+
- Node.js 18+
44+
- npm or yarn
45+
46+
### Local Development
47+
48+
1. Clone the repository:
49+
```bash
50+
git clone https://github.com/JSREI/curl-filter.git
51+
cd curl-filter
52+
```
53+
54+
2. Install dependencies:
55+
```bash
56+
npm install
57+
```
58+
59+
3. Start the development server:
60+
```bash
61+
npm run dev
62+
# or use the provided script
63+
./start.sh
4064
```
4165

42-
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
43-
44-
```js
45-
// eslint.config.js
46-
import reactX from 'eslint-plugin-react-x'
47-
import reactDom from 'eslint-plugin-react-dom'
48-
49-
export default tseslint.config([
50-
globalIgnores(['dist']),
51-
{
52-
files: ['**/*.{ts,tsx}'],
53-
extends: [
54-
// Other configs...
55-
// Enable lint rules for React
56-
reactX.configs['recommended-typescript'],
57-
// Enable lint rules for React DOM
58-
reactDom.configs.recommended,
59-
],
60-
languageOptions: {
61-
parserOptions: {
62-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
63-
tsconfigRootDir: import.meta.dirname,
64-
},
65-
// other options...
66-
},
67-
},
68-
])
66+
4. Open your browser and visit `http://localhost:25519`
67+
68+
### Build for Production
69+
70+
```bash
71+
npm run build
6972
```
73+
74+
The built files will be in the `dist` directory.
75+
76+
## 📖 Usage
77+
78+
1. **Paste cURL Command**: Copy a cURL command from your browser's developer tools and paste it into the input field.
79+
80+
2. **Configure Rules**: Click "Rule Management" to set up filtering rules:
81+
- Remove specific headers (e.g., `User-Agent`, `Accept-Language`)
82+
- Filter query parameters
83+
- Clean form data
84+
- Remove JSON body fields
85+
86+
3. **Apply Filters**: Click "Apply Filter Rules" to process your cURL command.
87+
88+
4. **Copy Result**: Use the copy button to copy the cleaned cURL command.
89+
90+
### Example
91+
92+
**Before filtering:**
93+
```bash
94+
curl 'https://api.example.com/users?page=1' \
95+
-H 'accept: application/json' \
96+
-H 'accept-language: en-US,en;q=0.9,zh-CN;q=0.8' \
97+
-H 'cache-control: no-cache' \
98+
-H 'sec-ch-ua: "Chrome";v="120"' \
99+
-H 'sec-fetch-dest: empty' \
100+
-H 'user-agent: Mozilla/5.0...'
101+
```
102+
103+
**After filtering:**
104+
```bash
105+
curl 'https://api.example.com/users?page=1' \
106+
-H 'accept: application/json' \
107+
-H 'cache-control: no-cache'
108+
```
109+
110+
## 🔧 Configuration
111+
112+
The tool supports various filtering rules:
113+
114+
- **Header Filters**: Remove or modify HTTP headers
115+
- **Query Parameter Filters**: Clean URL parameters
116+
- **Form Data Filters**: Filter form fields
117+
- **JSON Body Filters**: Remove JSON properties
118+
- **Custom Patterns**: Use regex for advanced filtering
119+
120+
## 🤝 Contributing
121+
122+
Contributions are welcome! Please feel free to submit a Pull Request.
123+
124+
1. Fork the repository
125+
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
126+
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
127+
4. Push to the branch (`git push origin feature/AmazingFeature`)
128+
5. Open a Pull Request
129+
130+
## 📄 License
131+
132+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
133+
134+
## 🙏 Acknowledgments
135+
136+
- Built with React, TypeScript, and Vite
137+
- UI components from Material-UI
138+
- Deployed on GitHub Pages
139+
140+
## 📞 Support
141+
142+
If you have any questions or need help, please:
143+
144+
1. Check the [Issues](https://github.com/JSREI/curl-filter/issues) page
145+
2. Create a new issue if your problem isn't already reported
146+
3. Provide detailed information about your use case

‎README.zh-CN.md‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
# cURL 过滤器
2+
3+
中文 | [English](README.md)
4+
5+
一个强大的基于Web的工具，用于通过可配置规则过滤和编辑cURL命令。非常适合清理从浏览器开发者工具复制的cURL命令，然后导入到外部系统中。
6+
7+
## 🚀 在线演示
8+
9+
访问：[https://jsrei.github.io/curl-filter/](https://jsrei.github.io/curl-filter/)
10+
11+
## 🎯 解决的问题
12+
13+
当你从Chrome开发者工具（或其他浏览器）复制请求为cURL时，它会包含许多你可能不需要的默认请求头和参数：
14+
15+
- 不必要的请求头，如 `User-Agent`、`Accept-Language`、`Accept-Encoding` 等
16+
- 浏览器特定的请求头，如 `sec-ch-ua`、`sec-fetch-*` 请求头
17+
- 不应该共享的认证cookie
18+
- 冗余的查询参数
19+
20+
这个工具通过应用可配置的过滤规则来帮助你清理这些cURL命令。
21+
22+
## 🔧 使用场景
23+
24+
- **API测试工具**：在导入到Postman、Apifox、Insomnia之前清理cURL命令
25+
- **Coze插件开发**：为插件配置准备干净的API请求
26+
- **文档编写**：为API文档生成干净的cURL示例
27+
- **安全考虑**：从共享的cURL命令中移除敏感的请求头和cookie
28+
- **自动化脚本**：为脚本和CI/CD流水线标准化cURL命令
29+
30+
## ✨ 功能特性
31+
32+
- **智能过滤**：移除不需要的请求头、查询参数和表单数据
33+
- **可配置规则**：使用正则表达式创建自定义过滤规则
34+
- **实时预览**：输入时即可看到过滤结果
35+
- **历史管理**：跟踪你的过滤历史记录
36+
- **导出/导入**：保存和分享你的过滤规则
37+
- **响应式设计**：在桌面和移动设备上都能正常工作
38+
39+
## 🛠️ 安装
40+
41+
### 前置要求
42+
43+
- Node.js 18+
44+
- npm 或 yarn
45+
46+
### 本地开发
47+
48+
1. 克隆仓库：
49+
```bash
50+
git clone https://github.com/JSREI/curl-filter.git
51+
cd curl-filter
52+
```
53+
54+
2. 安装依赖：
55+
```bash
56+
npm install
57+
```
58+
59+
3. 启动开发服务器：
60+
```bash
61+
npm run dev
62+
# 或使用提供的脚本
63+
./start.sh
64+
```
65+
66+
4. 打开浏览器访问 `http://localhost:25519`
67+
68+
### 生产构建
69+
70+
```bash
71+
npm run build
72+
```
73+
74+
构建文件将在 `dist` 目录中。
75+
76+
## 📖 使用方法
77+
78+
1. **粘贴cURL命令**：从浏览器开发者工具复制cURL命令并粘贴到输入框中。
79+
80+
2. **配置规则**：点击"规则管理"设置过滤规则：
81+
- 移除特定请求头（如 `User-Agent`、`Accept-Language`）
82+
- 过滤查询参数
83+
- 清理表单数据
84+
- 移除JSON请求体字段
85+
86+
3. **应用过滤**：点击"应用过滤规则"处理你的cURL命令。
87+
88+
4. **复制结果**：使用复制按钮复制清理后的cURL命令。
89+
90+
### 示例
91+
92+
**过滤前：**
93+
```bash
94+
curl 'https://api.example.com/users?page=1' \
95+
-H 'accept: application/json' \
96+
-H 'accept-language: en-US,en;q=0.9,zh-CN;q=0.8' \
97+
-H 'cache-control: no-cache' \
98+
-H 'sec-ch-ua: "Chrome";v="120"' \
99+
-H 'sec-fetch-dest: empty' \
100+
-H 'user-agent: Mozilla/5.0...'
101+
```
102+
103+
**过滤后：**
104+
```bash
105+
curl 'https://api.example.com/users?page=1' \
106+
-H 'accept: application/json' \
107+
-H 'cache-control: no-cache'
108+
```
109+
110+
## 🔧 配置
111+
112+
工具支持各种过滤规则：
113+
114+
- **请求头过滤**：移除或修改HTTP请求头
115+
- **查询参数过滤**：清理URL参数
116+
- **表单数据过滤**：过滤表单字段
117+
- **JSON请求体过滤**：移除JSON属性
118+
- **自定义模式**：使用正则表达式进行高级过滤
119+
120+
## 🤝 贡献
121+
122+
欢迎贡献！请随时提交Pull Request。
123+
124+
1. Fork 仓库
125+
2. 创建你的功能分支 (`git checkout -b feature/AmazingFeature`)
126+
3. 提交你的更改 (`git commit -m 'Add some AmazingFeature'`)
127+
4. 推送到分支 (`git push origin feature/AmazingFeature`)
128+
5. 打开一个Pull Request
129+
130+
## 📄 许可证
131+
132+
本项目基于MIT许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。
133+
134+
## 🙏 致谢
135+
136+
- 使用React、TypeScript和Vite构建
137+
- UI组件来自Material-UI
138+
- 部署在GitHub Pages上
139+
140+
## 📞 支持
141+
142+
如果你有任何问题或需要帮助，请：
143+
144+
1. 查看 [Issues](https://github.com/JSREI/curl-filter/issues) 页面
145+
2. 如果你的问题还没有被报告，创建一个新的issue
146+
3. 提供关于你的使用场景的详细信息

‎src/components/CurlFilter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ const CurlFilter: React.FC = () => {
294294
cURL 过滤器
295295
</Typography>
296296
<Typography variant="body1" color="text.secondary" className="subtitle">
297-
使用可配置的规则过滤cURL命令，支持请求头、查询参数、表单数据和JSON请求体
297+
清理Chrome复制的cURL命令中的冗余请求头和参数，便于导入Postman、Apifox、Coze插件等外部系统
298298
</Typography>
299299
</Box>
300300
<Tooltip title="查看源代码">

0 commit comments

Comments
 (0)