Library Detector for Chrome 开源项目教程

Library Detector for Chrome 开源项目教程

Library-Detector-for-Chrome🔍 Extension that detects which JavaScript libraries are running on a page项目地址:https://gitcode.com/gh_mirrors/li/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，它包含了扩展的所有配置信息，如名称、版本、权限、后台脚本、浏览器动作和内容脚本等。具体内容已在上一节详细介绍。

Library-Detector-for-Chrome🔍 Extension that detects which JavaScript libraries are running on a page项目地址:https://gitcode.com/gh_mirrors/li/Library-Detector-for-Chrome