Sloth 项目启动与配置教程

1. 项目目录结构及介绍

Sloth 项目的主要目录结构如下：

.
├── chrome-extension       # 存放 Chrome 扩展的相关文件
│   ├── background.js      # 后台脚本文件
│   ├── popup.html         # 弹窗界面 HTML 文件
│   ├── popup.js           # 弹窗界面 JavaScript 文件
│   └── manifest.json      # 扩展的配置文件
├── test                    # 测试相关文件
│   ├── fixtures            # 固定测试文件
│   ├── puppeteer.js        # 使用 Puppeteer 的测试脚本
│   └── ...                 # 其他测试文件
├── demo                     # 演示相关文件
├── .gitignore               # 指定 Git 忽略的文件
├── .travis.yml              # Travis CI 持续集成配置文件
├── LICENSE                  # 开源协议文件
├── README.md                # 项目说明文件
├── package-lock.json        # npm 包依赖锁定文件
├── package.json             # npm 包配置文件
└── rollup.config.js         # Rollup 打包配置文件

• chrome-extension: 包含 Chrome 扩展的核心文件。
• test: 存放测试代码和相关测试文件。
• demo: 包含演示用的示例代码。
• .gitignore: 指定 Git 应该忽略的文件和目录。
• .travis.yml: 用于配置在 Travis CI 上进行持续集成。
• LICENSE: 项目的开源协议，本项目采用 MIT 协议。
• README.md: 项目说明文件，介绍了项目的详细信息和如何使用。
• package-lock.json 和 package.json: npm 包管理文件，用于管理项目依赖。
• rollup.config.js: Rollup 打包工具的配置文件。

2. 项目的启动文件介绍

项目的启动主要是通过 Chrome 扩展来实现的。主要的启动文件是 chrome-extension 目录下的 manifest.json 文件。

manifest.json 文件是 Chrome 扩展的配置文件，它定义了扩展的基本信息和权限。以下是一个简化的 manifest.json 文件内容示例：

{
  "manifest_version": 2,
  "name": "Sloth",
  "version": "1.0",
  "description": "An extension that slowing down network and CPU.",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "<all_urls>"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

在这个文件中，定义了扩展的名称、版本、描述、所需的权限、后台脚本、浏览器操作（如弹窗界面）等。

3. 项目的配置文件介绍

项目的配置文件主要是 rollup.config.js 和 package.json。

• rollup.config.js: Rollup 是一个 JavaScript 模块打包工具，它可以将 ES6 模块打包成能在浏览器中运行的格式。rollup.config.js 文件用于配置 Rollup 的打包行为。

• package.json: npm 包的配置文件，定义了项目的依赖、脚本和元数据等。以下是 package.json 文件的一些关键部分：

{
  "name": "sloth",
  "version": "1.0.0",
  "description": "An extension that slowing down network and CPU.",
  "main": "index.js",
  "scripts": {
    "start": "rollup -c"
  },
  "dependencies": {
    "puppeteer": "^1.20.0"
  },
  "devDependencies": {
    "rollup": "^1.27.5"
  }
}

在 scripts 部分，定义了一个 start 脚本，它使用 Rollup 通过 -c 参数来运行 rollup.config.js 配置文件进行打包。这样可以通过运行 npm start 来启动打包过程。

以上就是 Sloth 项目的目录结构、启动文件和配置文件的介绍。通过这些文件，开发者可以理解项目的基本组成和启动流程。