开源项目 create-chrome-extension
使用教程
create-chrome-extension项目地址:https://gitcode.com/gh_mirrors/cr/create-chrome-extension
1. 项目的目录结构及介绍
create-chrome-extension/
├── src/
│ ├── background/
│ │ └── index.js
│ ├── content/
│ │ └── index.js
│ ├── popup/
│ │ ├── index.html
│ │ └── index.js
│ ├── styles/
│ │ └── main.css
│ └── manifest.json
├── package.json
└── README.md
src/
: 项目的源代码目录。background/
: 存放后台脚本文件。index.js
: 后台脚本的主文件。
content/
: 存放内容脚本文件。index.js
: 内容脚本的主文件。
popup/
: 存放弹出窗口的文件。index.html
: 弹出窗口的HTML文件。index.js
: 弹出窗口的JavaScript文件。
styles/
: 存放样式文件。main.css
: 主要的CSS样式文件。
manifest.json
: Chrome扩展的配置文件。
package.json
: 项目的依赖和脚本配置文件。README.md
: 项目的说明文档。
2. 项目的启动文件介绍
src/background/index.js
: 后台脚本的主文件,负责处理扩展的后台逻辑。src/content/index.js
: 内容脚本的主文件,负责在网页上下文中执行的逻辑。src/popup/index.js
: 弹出窗口的JavaScript文件,负责处理弹出窗口的交互逻辑。
3. 项目的配置文件介绍
src/manifest.json
: Chrome扩展的配置文件,定义了扩展的基本信息、权限、资源和启动文件等。
{
"manifest_version": 3,
"name": "Create Chrome Extension",
"version": "1.0",
"description": "A boilerplate for creating Chrome extensions.",
"permissions": [
"storage"
],
"background": {
"service_worker": "background/index.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content/index.js"]
}
],
"action": {
"default_popup": "popup/index.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}
manifest_version
: 指定Manifest文件的版本,当前为3。name
: 扩展的名称。version
: 扩展的版本号。description
: 扩展的描述。permissions
: 扩展所需的权限。background
: 后台脚本的配置。content_scripts
: 内容脚本的配置。action
: 扩展图标点击时的弹出窗口配置。icons
: 扩展的图标配置。
create-chrome-extension项目地址:https://gitcode.com/gh_mirrors/cr/create-chrome-extension