Bubble Clean Zen 项目使用教程

1. 目录结构及介绍

Bubble Clean Zen 项目的目录结构如下：

bubble-clean-zen/
├── chrome/
│   ├── css/
│   ├── images/
│   ├── js/
│   └── manifest.json
├── LICENSE
├── README.md
└── Screen.Recording.2025-02-28.005515.mp4

• chrome/：这个目录包含了浏览器扩展的所有核心文件。

  • css/：存放扩展使用的样式文件。
  • images/：存放扩展使用的图片资源。
  • js/：存放扩展使用的 JavaScript 脚本文件。
  • manifest.json：扩展的配置文件，定义了扩展的基本信息和权限。

• LICENSE：项目的开源协议文件，本项目采用 MIT 协议。

• README.md：项目的说明文件，包含了项目的介绍、使用方法和配置说明。

• Screen.Recording.2025-02-28.005515.mp4：可能是项目示例视频，用于展示扩展的效果。

2. 项目的启动文件介绍

项目的启动文件是 chrome/manifest.json，以下是文件的基本内容：

{
  "manifest_version": 3,
  "name": "Bubble Clean Zen Browser",
  "version": "1.0",
  "description": "Personal Zen Theme for Browser",
  "permissions": ["storage", "tabs"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "background": {
    "service_worker": "js/background.js"
  },
  "browser_action": {
    "default_title": "Bubble Clean Zen"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

这个文件定义了浏览器扩展的名称、版本、描述、权限、行为、背景脚本以及图标等。

3. 项目的配置文件介绍

项目的配置文件主要是 chrome/manifest.json，它包含了扩展所需的所有配置信息：

• manifest_version：定义了 manifest 文件使用的版本。
• name：扩展的名称。
• version：扩展的版本号。
• description：扩展的描述。
• permissions：扩展需要的权限，例如存储和标签页操作。
• action：定义扩展的图标和弹窗页面。
• background：定义扩展的背景脚本。
• browser_action：扩展在浏览器工具栏上的行为。
• icons：扩展在不同尺寸下的图标。

在 chrome/js/background.js 文件中也可能包含了一些配置信息，用于控制扩展的行为和功能。

请确保在修改配置文件后，按照扩展的官方文档进行相应的测试，以确保扩展能够按预期工作。