AutoJoin-for-SteamGifts 项目启动与配置教程

1. 项目目录结构及介绍

AutoJoin-for-SteamGifts 项目的目录结构如下所示：

AutoJoin-for-SteamGifts/
├── css/
│   └── styles.css
├── html/
│   └── popup.html
├── js/
│   ├── background.js
│   ├── content.js
│   └── popup.js
├── media/
│   └── icons/
│       ├── icon128.png
│       ├── icon48.png
│       └── icon16.png
├── .eslintrc.json
├── .gitignore
├── .prettierrc.json
├── LICENSE
├── README.md
├── compile.sh
├── manifest.json

• css/：存放项目所需的样式文件。
• html/：包含项目的 HTML 文件，例如弹出页面。
• js/：存放项目的 JavaScript 文件，包括背景脚本、内容脚本和弹出页面脚本。
• media/：包含项目所需的媒体文件，如图标。
• .eslintrc.json：ESLint 配置文件，用于定义代码风格规则。
• .gitignore：Git 忽略文件，指定 Git 应该忽略的文件和目录。
• .prettierrc.json：Prettier 配置文件，用于代码格式化。
• LICENSE：项目的许可证文件。
• README.md：项目的自述文件，包含项目描述、使用方法和贡献指南。
• compile.sh：编译脚本，用于构建项目。
• manifest.json：Chrome 扩展的配置文件，定义了扩展的基本信息和权限。

2. 项目的启动文件介绍

项目的启动主要通过 manifest.json 文件进行配置。此文件定义了 Chrome 扩展的元数据、权限、背景脚本、弹出页面等信息。以下是一个简化的 manifest.json 示例：

{
  "manifest_version": 2,
  "name": "AutoJoin for SteamGifts",
  "version": "1.0",
  "permissions": ["activeTab"],
  "background": {
    "scripts": ["js/background.js"]
  },
  "browser_action": {
    "default_popup": "html/popup.html",
    "default_icon": {
      "16": "media/icons/icon16.png",
      "48": "media/icons/icon48.png",
      "128": "media/icons/icon128.png"
    }
  }
}

在上述配置中，name 定义了扩展的名称，version 定义了扩展的版本号，permissions 定义了扩展所需的权限，background 定义了背景脚本，browser_action 定义了扩展的浏览器操作行为，包括弹出页面和图标。

3. 项目的配置文件介绍

项目的主要配置文件为 manifest.json，其中包含了扩展所需的大部分配置信息。以下是 manifest.json 中一些关键配置项的说明：

• manifest_version：指明使用的 Manifest 文件版本。目前 Chrome 扩展支持到版本 3。
• name 和 version：扩展的名称和版本。
• permissions：扩展需要的权限，例如访问当前标签页、存储数据等。
• background：定义了扩展的背景脚本，这些脚本在扩展启动时运行，并在后台持续运行。
• browser_action：定义了扩展在浏览器工具栏上的图标和相关行为，如弹出页面和图标显示。