Stylebot 技术文档

1. 安装指南

Chrome/Edge 安装

1. 打开 Chrome 或 Edge 浏览器。
2. 访问 Chrome Web Store。
3. 点击“添加到 Chrome”或“添加到 Edge”按钮。
4. 确认安装，等待安装完成。

Firefox 安装

1. 打开 Firefox 浏览器。
2. 访问 Firefox Add-ons。
3. 点击“添加到 Firefox”按钮。
4. 确认安装，等待安装完成。

2. 项目的使用说明

基本功能

• 元素样式修改：通过 UI 操作选择并修改网页元素的样式。
• 即时保存：修改后的样式会立即保存。
• 代码编辑器：支持编写自定义 CSS 代码。
• 阅读模式：隐藏非必要的页面元素（如侧边栏、页脚和广告），使文章更易读。
• 灰度模式：开启灰度模式以减少网页对眼睛的刺激。

使用步骤

1. 安装并启用 Stylebot 扩展。
2. 打开任意网页。
3. 点击浏览器工具栏中的 Stylebot 图标。
4. 使用 UI 操作选择要修改的元素，或直接在代码编辑器中编写 CSS。
5. 保存修改，刷新页面查看效果。

3. 项目API使用文档

自定义 CSS

• 语法：使用标准的 CSS 语法。
• 示例：

  body {
    background-color: #f0f0f0;
  }
  h1 {
    color: blue;
  }
  

阅读模式

• 功能：自动隐藏非必要的页面元素。
• 使用：点击 Stylebot 界面中的“阅读模式”按钮。

灰度模式

• 功能：将网页转换为灰度显示。
• 使用：点击 Stylebot 界面中的“灰度模式”按钮。

4. 项目安装方式

开发环境搭建

Firefox

1. 克隆项目代码：

   git clone https://github.com/ankit/stylebot.git
   

2. 进入项目目录：

   cd stylebot
   

3. 安装依赖：

   yarn install
   

4. 构建并启动：

   yarn watch:firefox
   yarn start:firefox
   

Chrome/Edge

1. 克隆项目代码：

   git clone https://github.com/ankit/stylebot.git
   

2. 进入项目目录：

   cd stylebot
   

3. 安装依赖：

   yarn install
   

4. 构建并加载扩展：

   yarn watch
   

   打开 chrome://extensions 页面，启用开发者模式，加载 dist/ 目录作为扩展。

Google Drive Sync

1. 获取扩展的 redirect URL。
2. 创建 Google Cloud 项目并启用 Google Drive API。
3. 配置 OAuth 客户端 ID，并替换 get-access-token.ts 文件中的 CLIENT_ID。

发布

1. 更新 CHANGELOG 和 package.json 中的版本号。
2. 构建发布包：

   yarn build
   

3. 手动创建 zip 文件并上传至 Chrome Web Store 或 Firefox Add-ons。

5. 许可证

Stylebot 使用 MIT 许可证。