cbox-chrome-extension 使用教程
1. 项目的目录结构及介绍
cbox-chrome-extension/
├── assets/
│ ├── icon.png
│ └── logo.svg
├── src/
│ ├── background.js
│ ├── content.js
│ └── popup.html
├── manifest.json
└── README.md
- assets/: 存放项目的静态资源文件,如图标和logo。
- src/: 存放项目的源代码文件,包括后台脚本、内容脚本和弹出页面。
- manifest.json: Chrome扩展的配置文件,定义了扩展的基本信息和权限。
- README.md: 项目的说明文档。
2. 项目的启动文件介绍
- background.js: 后台脚本文件,负责处理扩展的后台逻辑。
- content.js: 内容脚本文件,注入到网页中执行,处理网页内容相关的逻辑。
- popup.html: 弹出页面的HTML文件,用户点击扩展图标时显示的界面。
3. 项目的配置文件介绍
manifest.json 文件内容示例:
{
"manifest_version": 2,
"name": "cbox-chrome-extension",
"version": "1.0",
"description": "A Chrome extension for cbox.",
"icons": {
"16": "assets/icon.png",
"48": "assets/icon.png",
"128": "assets/icon.png"
},
"background": {
"scripts": ["src/background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["src/content.js"]
}
],
"browser_action": {
"default_popup": "src/popup.html",
"default_icon": "assets/icon.png"
},
"permissions": [
"activeTab",
"storage"
]
}
- manifest_version: 指定manifest文件的版本,目前为2。
- name: 扩展的名称。
- version: 扩展的版本号。
- description: 扩展的描述。
- icons: 扩展的图标路径。
- background: 后台脚本的配置,包括脚本路径和是否持久化。
- content_scripts: 内容脚本的配置,包括匹配的URL和脚本路径。
- browser_action: 浏览器动作的配置,包括弹出页面的路径和默认图标。
- permissions: 扩展需要的权限,如activeTab和storage。