Library Detector for Chrome 开源项目教程
1. 项目的目录结构及介绍
Library-Detector-for-Chrome/
├── _locales/
│ ├── en/
│ │ └── messages.json
│ └── zh_CN/
│ └── messages.json
├── css/
│ └── style.css
├── icons/
│ ├── icon128.png
│ ├── icon16.png
│ ├── icon48.png
│ └── icon64.png
├── js/
│ ├── background.js
│ ├── content.js
│ └── popup.js
├── lib/
│ └── libraries.js
├── manifest.json
└── popup.html
_locales/
: 包含不同语言的本地化文件。css/
: 包含样式文件style.css
。icons/
: 包含扩展图标文件。js/
: 包含 JavaScript 文件,如background.js
,content.js
, 和popup.js
。lib/
: 包含库检测的核心逻辑文件libraries.js
。manifest.json
: 项目的配置文件。popup.html
: 扩展的弹出页面。
2. 项目的启动文件介绍
项目的启动文件主要是 manifest.json
,它定义了扩展的基本信息和启动配置。
{
"manifest_version": 2,
"name": "Library Detector",
"version": "4.10.0",
"description": "Detects the JavaScript libraries running on a page",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"permissions": [
"activeTab"
],
"background": {
"scripts": ["js/background.js"],
"persistent": false
},
"browser_action": {
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_title": "Library Detector",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["js/content.js"],
"run_at": "document_end"
}
],
"web_accessible_resources": [
"lib/libraries.js"
]
}
manifest_version
: 指定 manifest 文件的版本。name
: 扩展的名称。version
: 扩展的版本号。description
: 扩展的描述。icons
: 扩展的图标。permissions
: 扩展所需的权限。background
: 后台脚本配置。browser_action
: 浏览器动作配置,包括图标、标题和弹出页面。content_scripts
: 内容脚本配置,指定在哪些页面运行以及运行时机。web_accessible_resources
: 可访问的资源文件。
3. 项目的配置文件介绍
项目的配置文件是 manifest.json
,它包含了扩展的所有配置信息,如名称、版本、权限、后台脚本、浏览器动作和内容脚本等。具体内容已在上一节详细介绍。