sloth 的安装和配置教程

项目的基础介绍

sloth 是一个开源的浏览器扩展，它的主要目的是通过模拟网络延迟和降低CPU速度来帮助开发者体验真实用户的网络环境。这个项目可以帮助开发者更好地理解在低性能设备或网络环境下的用户使用体验。

主要编程语言

该项目主要使用 JavaScript 进行开发，同时包含了 CSS 和 HTML 代码。

项目使用的关键技术和框架

• Chrome Devtools Protocol：用于在浏览器中模拟网络延迟和CPU降速。
• puppeteer：一个 Node 库，用于在无头浏览器环境中运行测试。

项目安装和配置的准备工作

在开始安装之前，请确保您的环境中已经安装了以下工具：

• Node.js
• npm（Node.js 包管理器）

安装步骤

1. 克隆项目 使用 Git 命令克隆项目到本地目录：

   git clone https://github.com/denar90/sloth.git
   

2. 安装依赖 进入项目目录，使用 npm 安装项目所需的依赖：

   cd sloth
   npm install
   

3. 生成扩展私钥 根据项目要求，您需要生成一个私钥和相应的扩展ID。运行以下命令生成私钥：

   openssl genrsa 2048 | openssl pkcs8 -topk8 -nocrypt -out key.pem
   

4. 生成扩展ID 接下来，生成一个扩展ID，这个ID将在后续步骤中使用：

   openssl rsa -in key.pem -pubout -outform DER | openssl base64 -A | shasum -a 256 | head -c32 | tr 0-9a-f a-p
   

5. 配置 manifest.json 在项目目录中，找到 manifest.json 文件，将生成的扩展ID填入相应的位置。

6. 加载扩展到 Chrome

   • 打开 Chrome 浏览器，进入 chrome://extensions/。
   • 启用开发者模式。
   • 点击“加载已解压的扩展”，选择项目目录。
   • 确认加载扩展。

7. 测试扩展 运行以下命令来测试扩展：

   npm run run-regular-site-demo
   npm run run-throttled-site-demo
   

   在浏览器中打开 http://localhost:8000/ 和 http://localhost:8001/ 页面，然后通过扩展应用限制条件，观察效果。

完成以上步骤后，您就可以开始使用 sloth 扩展，体验不同网络条件下的网页加载效果了。