# MyITab

**Repository Path**: ahs-0/my-itab

## Basic Information

- **Project Name**: MyITab
- **Description**: 自制组件式浏览器主页
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-12-08
- **Last Updated**: 2025-12-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# iTab - 个性化新标签页插件

一个功能丰富的浏览器新标签页插件，支持自定义背景、常用网站快捷方式、搜索引擎切换、天气信息显示和待办事项管理。

## 功能特性

### 🎨 自定义背景
- 支持上传本地图片作为背景
- 支持设置纯色背景
- 背景模糊和透明度调节
- 预设高质量背景图片

### 🔗 常用网站快捷方式
- 快速访问您最常使用的网站
- 支持添加、编辑、删除快捷方式
- 支持拖拽排序
- 自动获取网站图标

### 🔍 搜索引擎切换
- 支持多种搜索引擎（Google、Bing、百度、Yahoo、DuckDuckGo）
- 一键切换默认搜索引擎
- 快速搜索功能

### ☀️ 天气信息
- 自动定位显示当前天气
- 支持手动设置城市
- 温度单位切换（摄氏度/华氏度）
- 显示天气描述和位置

### 📝 待办事项
- 快速添加和管理待办事项
- 支持标记完成/未完成
- 简单直观的界面

## 安装方法

### 本地安装（开发版本）

1. 下载或克隆本项目到本地
2. 打开浏览器的扩展管理页面：
   - Chrome: `chrome://extensions/`
   - Firefox: `about:addons`
   - Edge: `edge://extensions/`
3. 开启「开发者模式」
4. 点击「加载已解压的扩展程序」
5. 选择项目所在的文件夹
6. 安装完成，打开新标签页即可使用

### 浏览器商店安装（未来）

- Chrome Web Store: 即将上线
- Firefox Add-ons: 即将上线
- Microsoft Edge Add-ons: 即将上线

## 使用指南

### 1. 设置背景

1. 点击页面左上角的设置按钮（⚙️）
2. 在背景设置弹窗中选择背景类型（图片或纯色）
3. 如果选择图片，可以上传本地图片或输入图片URL
4. 调整背景透明度和模糊度
5. 点击「保存」按钮应用设置

### 2. 管理快捷方式

- **添加快捷方式**：点击「常用网站」区域的「+」按钮，填写网站名称和URL
- **编辑快捷方式**：将鼠标悬停在快捷方式上，点击编辑按钮（✏️）
- **删除快捷方式**：将鼠标悬停在快捷方式上，点击删除按钮（🗑️）
- **拖拽排序**：按住快捷方式并拖动到目标位置

### 3. 切换搜索引擎

- 在搜索框上方的下拉菜单中选择您喜欢的搜索引擎
- 输入搜索内容，点击搜索按钮或按回车键进行搜索

### 4. 设置天气信息

1. 点击浏览器右上角的插件图标，打开设置页面
2. 在「天气设置」中填写您的OpenWeatherMap API密钥
   - 您需要在 [OpenWeatherMap](https://openweathermap.org/api) 免费注册获取API密钥
3. 选择位置（自动定位或手动选择城市）
4. 选择温度单位
5. 点击「保存设置」

### 5. 管理待办事项

- 在「待办事项」区域的输入框中输入任务内容
- 点击「+」按钮或按回车键添加任务
- 点击复选框标记任务完成/未完成
- 点击删除按钮（🗑️）删除任务

## 数据管理

### 导出数据

1. 打开插件设置页面
2. 在「数据管理」区域点击「导出数据」按钮
3. 选择保存位置，将配置文件保存到本地

### 导入数据

1. 打开插件设置页面
2. 在「数据管理」区域点击「导入数据」按钮
3. 选择之前导出的配置文件
4. 导入成功后，刷新新标签页查看效果

### 清除数据

1. 打开插件设置页面
2. 在「数据管理」区域点击「清除所有数据」按钮
3. 确认后，所有设置、快捷方式和待办事项将被清除

## 技术栈

- **前端框架**：原生JavaScript
- **样式**：CSS3 + Flexbox/Grid（响应式设计）
- **存储**：Chrome Storage API
- **天气API**：OpenWeatherMap API
- **图标**：Font Awesome

## 浏览器兼容性

| 浏览器 | 版本要求 |
|--------|----------|
| Chrome | 88+      |
| Firefox | 86+     |
| Edge | 88+      |
| Safari | 14+      |

## 开发说明

### 项目结构

```
itab/
├── manifest.json          # 插件配置文件
├── index.html             # 新标签页主页面
├── css/
│   ├── style.css          # 主样式文件
│   └── responsive.css     # 响应式样式
├── js/
│   ├── background.js      # 后台脚本
│   ├── content.js         # 内容脚本
│   ├── options.js         # 选项页脚本
│   └── utils/
│       ├── storage.js     # 本地存储工具
│       ├── weather.js     # 天气API工具
│       └── search.js      # 搜索引擎工具
├── options.html           # 选项页面
├── icons/                 # 插件图标
└── README.md              # 安装说明文档
```

### 开发流程

1. 克隆项目到本地
2. 在浏览器中加载开发版本（参考安装方法）
3. 修改代码后，在扩展管理页面点击「刷新」按钮
4. 刷新新标签页查看效果

## 贡献指南

欢迎提交Issue和Pull Request！

### 提交Issue

1. 描述问题或功能请求
2. 提供浏览器版本和操作系统信息
3. 如有可能，提供截图或复现步骤

### 提交Pull Request

1. Fork本项目
2. 创建功能分支
3. 提交代码更改
4. 确保代码符合项目风格
5. 提交Pull Request

## 许可证

MIT License

## 联系方式

- 项目地址：[GitHub](https://github.com/yourusername/itab)
- 问题反馈：[Issues](https://github.com/yourusername/itab/issues)

## 更新日志

### v1.0.0 (2025-12-08)

- 初始版本发布
- 支持自定义背景
- 支持常用网站快捷方式
- 支持搜索引擎切换
- 支持天气信息显示
- 支持待办事项管理
- 响应式设计，适配各种屏幕尺寸

## 致谢

- [OpenWeatherMap](https://openweathermap.org/) - 提供天气API
- [Font Awesome](https://fontawesome.com/) - 提供图标支持
- [Unsplash](https://unsplash.com/) - 提供默认背景图片

---

**享受个性化的新标签页体验！** 🚀