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