Chrome 扩展 V3 入门教程
1. 项目的目录结构及介绍
chrome-extension-v3-starter/
├── LICENSE
├── README.md
├── manifest.json
├── background.js
├── content.js
├── popup/
│ ├── index.html
│ ├── style.css
│ └── script.js
└── images/
├── icon-16.png
├── icon-48.png
└── icon-128.png
- LICENSE: 项目的许可证文件。
- README.md: 项目的说明文档。
- manifest.json: Chrome 扩展的配置文件。
- background.js: 后台脚本文件。
- content.js: 内容脚本文件。
- popup/: 弹出窗口的目录,包含 HTML、CSS 和 JavaScript 文件。
- images/: 扩展所需的图标文件。
2. 项目的启动文件介绍
manifest.json
manifest.json
是 Chrome 扩展的核心配置文件,定义了扩展的基本信息和功能。以下是该文件的基本结构:
{
"manifest_version": 3,
"name": "Chrome Addon v3 Starter",
"version": "1.0",
"description": "A minimal template of a Chrome v3 addon",
"permissions": [
"activeTab",
"storage"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup/index.html",
"default_icon": {
"16": "images/icon-16.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
},
"icons": {
"16": "images/icon-16.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
background.js
background.js
是后台脚本文件,负责处理扩展的后台逻辑。以下是该文件的基本结构:
chrome.runtime.onInstalled.addListener(() => {
console.log('Extension installed');
});
popup/index.html
popup/index.html
是弹出窗口的 HTML 文件,定义了弹出窗口的界面结构。以下是该文件的基本结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Chrome Addon v3 Starter</h1>
<script src="script.js"></script>
</body>
</html>
3. 项目的配置文件介绍
manifest.json
manifest.json
文件中包含了扩展的基本信息、权限、后台脚本、弹出窗口等配置。以下是一些关键配置项的介绍:
- manifest_version: 指定 manifest 文件的版本,当前为 3。
- name: 扩展的名称。
- version: 扩展的版本号。
- description: 扩展的描述信息。
- permissions: 扩展所需的权限,例如
activeTab
和storage
。 - background: 后台脚本的配置,指定
service_worker
文件。 - action: 扩展图标点击时的行为,指定
default_popup
和default_icon
。 - icons: 扩展的图标文件路径。
通过以上配置,可以定义扩展的基本功能和行为。
以上是基于 SimGus/chrome-extension-v3-starter
项目的教程,涵盖了项目的目录结构、启动文件和配置文件的介绍。希望这些内容能帮助你更好地理解和使用该项目。