Gopeed-Chrome-Extension 开源项目教程
1. 项目的目录结构及介绍
Gopeed-Chrome-Extension 项目的目录结构如下:
Gopeed-Chrome-Extension/
├── assets/
│ ├── icon-128.png
│ ├── icon-48.png
│ └── icon-16.png
├── background.js
├── content.js
├── manifest.json
├── options.html
├── options.js
├── popup.html
└── popup.js
目录结构介绍
assets/
: 存放扩展图标的目录。icon-128.png
,icon-48.png
,icon-16.png
: 不同尺寸的扩展图标。
background.js
: 后台脚本文件,负责处理扩展的后台逻辑。content.js
: 内容脚本文件,注入到网页中执行的脚本。manifest.json
: 扩展的清单文件,包含扩展的基本信息和配置。options.html
: 扩展的选项页面。options.js
: 选项页面的脚本文件。popup.html
: 扩展的弹出页面。popup.js
: 弹出页面的脚本文件。
2. 项目的启动文件介绍
项目的启动文件主要是 manifest.json
和 background.js
。
manifest.json
manifest.json
是 Chrome 扩展的清单文件,它定义了扩展的基本信息和配置。以下是该文件的部分内容:
{
"manifest_version": 2,
"name": "Gopeed Downloader",
"version": "1.0",
"description": "A simple downloader extension for Chrome",
"icons": {
"16": "assets/icon-16.png",
"48": "assets/icon-48.png",
"128": "assets/icon-128.png"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "assets/icon-16.png",
"48": "assets/icon-48.png",
"128": "assets/icon-128.png"
}
},
"permissions": [
"downloads"
]
}
background.js
background.js
是扩展的后台脚本文件,负责处理扩展的后台逻辑。以下是该文件的部分内容:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.downloads.download({
url: tab.url,
filename: 'downloaded_file.txt'
});
});
3. 项目的配置文件介绍
项目的配置文件主要是 manifest.json
。
manifest.json
manifest.json
文件中包含了扩展的各种配置信息,如名称、版本、图标、后台脚本、浏览器动作、权限等。以下是该文件的部分内容:
{
"manifest_version": 2,
"name": "Gopeed Downloader",
"version": "1.0",
"description": "A simple downloader extension for Chrome",
"icons": {
"16": "assets/icon-16.png",
"48": "assets/icon-48.png",
"128": "assets/icon-128.png"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "assets/icon-16.png",
"48": "assets/icon-48.png",
"128": "assets/icon-128.png"
}
},
"permissions": [
"downloads"
]
}
通过这些配置,Chrome 浏览器可以正确加