CSS-Used-ChromeExt 项目教程
1. 项目的目录结构及介绍
CSS-Used-ChromeExt/
├── assets/
│ ├── icon.png
│ └── logo.png
├── css/
│ └── styles.css
├── js/
│ ├── background.js
│ └── content.js
├── manifest.json
├── README.md
└── index.html
- assets/: 存放项目的静态资源文件,如图标和logo。
- css/: 存放项目的样式文件。
- js/: 存放项目的JavaScript文件,包括后台脚本和内容脚本。
- manifest.json: 项目的配置文件,定义了扩展的基本信息和权限。
- README.md: 项目的说明文档。
- index.html: 项目的入口HTML文件。
2. 项目的启动文件介绍
项目的启动文件是 index.html
,它包含了扩展的主要界面和功能。以下是 index.html
的基本结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<title>CSS Used Extension</title>
</head>
<body>
<h1>CSS Used Extension</h1>
<div id="content"></div>
<script src="js/content.js"></script>
</body>
</html>
- head: 包含了页面的元数据和样式文件的链接。
- body: 包含了页面的主要内容和脚本文件的链接。
3. 项目的配置文件介绍
项目的配置文件是 manifest.json
,它定义了扩展的基本信息和权限。以下是 manifest.json
的基本内容:
{
"manifest_version": 3,
"name": "CSS Used",
"version": "1.0",
"description": "Get all CSS rules used by the selected DOM and its descendants.",
"permissions": [
"activeTab",
"scripting"
],
"background": {
"service_worker": "js/background.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["js/content.js"]
}
],
"action": {
"default_popup": "index.html",
"default_icon": {
"16": "assets/icon.png",
"48": "assets/icon.png",
"128": "assets/icon.png"
}
}
}
- manifest_version: 指定Manifest文件的版本,当前为3。
- name: 扩展的名称。
- version: 扩展的版本号。
- description: 扩展的描述。
- permissions: 扩展所需的权限。
- background: 后台脚本的配置。
- content_scripts: 内容脚本的配置。
- action: 扩展的图标和弹出窗口的配置。
以上是 CSS-Used-ChromeExt
项目的目录结构、启动文件和配置文件的介绍。希望这份文档能帮助你更好地理解和使用该项目。