ChromeSnifferPlus 开源项目教程

项目的目录结构及介绍

ChromeSnifferPlus 项目的目录结构如下：

ChromeSnifferPlus/
├── _locales/
│   ├── en/
│   │   └── messages.json
│   ├── zh_CN/
│   │   └── messages.json
│   └── zh_TW/
│       └── messages.json
├── css/
│   └── style.css
├── icons/
│   ├── icon128.png
│   ├── icon16.png
│   ├── icon48.png
│   └── loading.gif
├── js/
│   ├── background.js
│   ├── content_script.js
│   ├── detector.js
│   ├── options.js
│   └── popup.js
├── manifest.json
├── options.html
└── popup.html

目录结构介绍

• _locales/：包含不同语言的本地化文件。
  • en/：英文本地化文件。
  • zh_CN/：简体中文本地化文件。
  • zh_TW/：繁体中文本地化文件。
• css/：包含样式文件。
  • style.css：主要的样式文件。
• icons/：包含扩展图标和加载动画。
  • icon128.png、icon16.png、icon48.png：不同尺寸的图标。
  • loading.gif：加载动画。
• js/：包含 JavaScript 文件。
  • background.js：后台脚本。
  • content_script.js：内容脚本。
  • detector.js：检测脚本。
  • options.js：选项页面脚本。
  • popup.js：弹出页面脚本。
• manifest.json：扩展的清单文件。
• options.html：选项页面。
• popup.html：弹出页面。

项目的启动文件介绍

ChromeSnifferPlus 的启动文件是 manifest.json。这个文件定义了扩展的基本信息和启动配置。

manifest.json 内容示例

{
  "manifest_version": 2,
  "name": "ChromeSnifferPlus",
  "version": "2.0.0",
  "description": "Sniff web framework and javascript libraries run on browsing website.",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "background": {
    "scripts": ["js/background.js"]
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["js/content_script.js"],
      "run_at": "document_start"
    }
  ],
  "permissions": [
    "activeTab",
    "tabs",
    "<all_urls>"
  ],
  "browser_action": {
    "default_icon": "icons/icon16.png",
    "default_popup": "popup.html"
  },
  "options_ui": {
    "page": "options.html",
    "chrome_style": true
  }
}

启动文件介绍

• manifest_version：指定清单文件的版本。
• name：扩展的名称。
• version：扩展的版本号。
• description：扩展的描述。
• icons：扩展的图标。
• background：后台脚本配置。
• content_scripts：内容脚本配置。
• permissions：扩展所需的权限。
• browser_action：浏览器动作配置。
• options_ui：选项页面配置。

项目的配置文件介绍

ChromeSnifferPlus 的配置文件主要是 manifest.json 和 options.html。

manifest.json

如上所述，manifest.json 是扩展的清单文件，包含了扩展的基本信息和启动配置。

options.html

options.html 是扩展的选项页面，用户可以在这里进行一些自