Catppuccin Chrome 扩展使用教程

Catppuccin Chrome 扩展使用教程

chrome👻 Soothing pastel theme for Chrome项目地址:https://gitcode.com/gh_mirrors/chrom/chrome

项目的目录结构及介绍

Catppuccin Chrome 扩展项目的目录结构如下：

catppuccin-chrome/
├── assets/
│   ├── icons/
│   └── themes/
├── manifest.json
├── popup/
│   ├── index.html
│   ├── index.js
│   └── style.css
└── README.md

• assets/: 包含扩展所需的图标和主题文件。
  • icons/: 存放扩展的图标文件。
  • themes/: 存放扩展的主题文件。
• manifest.json: 扩展的配置文件，定义了扩展的基本信息和权限。
• popup/: 包含扩展弹出窗口的文件。
  • index.html: 弹出窗口的 HTML 文件。
  • index.js: 弹出窗口的 JavaScript 文件。
  • style.css: 弹出窗口的样式文件。
• README.md: 项目的说明文档。

项目的启动文件介绍

Catppuccin Chrome 扩展的启动文件主要是 popup/index.html 和 popup/index.js。

• popup/index.html: 这是扩展的弹出窗口的 HTML 文件，定义了弹出窗口的结构和内容。
• popup/index.js: 这是弹出窗口的 JavaScript 文件，负责处理弹出窗口的逻辑和交互。

项目的配置文件介绍

Catppuccin Chrome 扩展的配置文件是 manifest.json。这个文件定义了扩展的基本信息、权限和资源路径。

{
  "manifest_version": 3,
  "name": "Catppuccin Theme",
  "version": "1.0",
  "description": "A soothing theme for Chrome",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup/index.html",
    "default_icon": {
      "16": "assets/icons/icon16.png",
      "48": "assets/icons/icon48.png",
      "128": "assets/icons/icon128.png"
    }
  },
  "icons": {
    "16": "assets/icons/icon16.png",
    "48": "assets/icons/icon48.png",
    "128": "assets/icons/icon128.png"
  },
  "theme": {
    "images": {
      "theme_frame": "assets/themes/catppuccin.png"
    },
    "colors": {
      "frame": [137, 180, 250],
      "toolbar": [245, 224, 220]
    }
  }
}

• manifest_version: 指定 manifest 文件的版本，这里是 3。
• name: 扩展的名称。
• version: 扩展的版本号。
• description: 扩展的描述。
• permissions: 扩展所需的权限，这里是 storage。
• action: 定义扩展的弹出窗口和默认图标。
• icons: 扩展的图标路径。
• theme: 定义扩展的主题，包括背景图片和颜色。

chrome👻 Soothing pastel theme for Chrome项目地址:https://gitcode.com/gh_mirrors/chrom/chrome