docs: 更新README为中文文档

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
ddshi 2026-01-23 15:12:45 +08:00
parent c8fad8c4b8
commit 21a522bcaa

122
README.md
View File

@ -1,73 +1,73 @@
# React + TypeScript + Vite
# ReadMD - 网页转Markdown
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
一个Chrome浏览器扩展用于将网页内容提取并导出为Markdown文件。
Currently, two official plugins are available:
## 功能特性
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
- [@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
- **自动提取**使用Mozilla Readability算法自动识别页面主要内容
- **手动选择**:支持选中特定区域进行提取
- **图片处理**保留图片URL链接不转换为Base64
- **多种导出**:支持复制到剪贴板或下载为.md文件
- **元数据**自动提取标题、URL、描述等元信息
- **不修改原页**:提取过程不影响原始网页内容
## React Compiler
## 技术栈
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
- React 18 + TypeScript
- Vite + @crxjs/vite-plugin
- Tailwind CSS
- @mozilla/readability(内容提取)
- TurndownHTML转Markdown
## Expanding the ESLint configuration
## 安装方法
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
1. 克隆项目
```js
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```bash
git clone <项目地址>
cd readmd
```
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:
2. 安装依赖
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```bash
npm install
```
3. 构建扩展
```bash
npm run build
```
4. 在Chrome中加载扩展
- 打开 `chrome://extensions/`
- 启用「开发者模式」
- 点击「加载已解压的扩展程序」
- 选择 `dist` 文件夹
## 使用方法
1. 点击浏览器工具栏中的扩展图标
2. 点击「提取文章」自动提取页面主要内容,或选中部分内容后点击「提取选中区域」
3. 在弹窗中预览提取结果
4. 点击「复制到剪贴板」或「下载.md文件」导出
## 项目结构
```text
readmd/
├── src/
│ ├── content/ # Content Script注入到网页
│ ├── popup/ # 弹出窗口
│ ├── background/ # Service Worker
│ ├── options/ # 设置页面
│ ├── utils/ # 工具函数
│ └── types/ # TypeScript类型定义
├── manifest.json # 扩展配置
└── vite.config.ts # Vite配置
```
## License
MIT