【亲测免费】 HLS 下载器(HLS-Downloader)安装与使用教程

1. 项目目录结构及介绍

该项目是一个Web扩展程序，用于嗅探并下载HTTP Live流（HLS）媒体文件。目录结构主要包括以下部分：

• src - 源代码目录，包含了所有前端应用的组件、样式和配置。
  • components - React 组件
  • redux - 使用Redux进行状态管理的代码
  • services - 提供网络请求和其他服务的模块
• public - 静态资源目录，如HTML索引文件、图标等
• manifest.json - Chrome 扩展的配置文件
• .gitignore - Git 忽略规则
• package.json - 应用的依赖和元数据
• LICENSE - 许可证文件
• README.md - 项目说明文档

2. 项目的启动文件介绍

项目的入口点位于src/index.js。这是应用程序的主文件，它引入了React、Redux和其他必要的库，并设置了应用的基本结构。index.js负责创建Redux store，导入根组件 (App) 并将其渲染到浏览器中。

在src/redux/store.js里，配置了Redux的状态管理和中间件。App组件接收store作为属性，并将其传递给子组件以实现状态共享。

3. 项目的配置文件介绍

主要的配置文件是manifest.json，它是Chrome扩展的关键配置，包含以下信息：

• name: 扩展的名称
• version: 当前版本号
• description: 简短描述
• permissions: 扩展所需的权限，例如访问特定URL或执行脚本
• background: 背景页面配置，用于监听事件
• browser_action: 定义浏览器动作（如工具栏按钮）
• content_scripts: 内容脚本，用于注入JavaScript到网页中
• web_accessible_resources: 允许扩展访问的公共资源

此外，一些其他的配置如icons定义了扩展在浏览器中的图标，以及default_popup指定了点击按钮时显示的弹出窗口。

要安装并运行这个项目，首先确保已安装Node.js和npm。然后，克隆仓库，进入项目目录，安装依赖并运行开发服务器：

$ git clone https://github.com/puemos/hls-downloader.git
$ cd hls-downloader
$ npm install
$ npm start

这将启动一个本地开发服务器，并自动打开一个新的浏览器标签页来展示你的扩展。在Chrome的chrome://extensions/页面启用开发者模式，然后加载解压后的扩展包（Load unpacked），选择hls-downloader项目的dist目录即可测试扩展。

请注意，为了在生产环境中部署，你需要构建优化的版本：

$ npm run build

这将会生成优化过的dist目录，可以用来打包上传到Chrome网上应用店或其他平台。