Image Picka 项目安装与使用教程

1. 项目目录结构及介绍

Image Picka 是一个基于 WebExtensions 技术的图像下载扩展插件，支持 Firefox 和 Chrome 浏览器。以下是项目的目录结构及其介绍：

image-picka/
├── background/
│   ├── background.js
│   └── ...
├── content/
│   ├── content.js
│   └── ...
├── icons/
│   ├── icon.png
│   └── ...
├── options/
│   ├── options.html
│   ├── options.js
│   └── ...
├── popup/
│   ├── popup.html
│   ├── popup.js
│   └── ...
├── manifest.json
├── README.md
└── ...

目录结构说明

• background/: 包含后台脚本文件，负责处理扩展的主要逻辑。
  • background.js: 后台脚本，处理扩展的核心功能。
• content/: 包含内容脚本文件，负责与网页内容交互。
  • content.js: 内容脚本，处理网页中的图像选择和下载。
• icons/: 包含扩展的图标文件。
  • icon.png: 扩展的图标文件。
• options/: 包含选项页面的文件，用户可以在此配置扩展的设置。
  • options.html: 选项页面的 HTML 文件。
  • options.js: 选项页面的 JavaScript 文件。
• popup/: 包含弹出页面的文件，用户可以通过点击扩展图标打开此页面。
  • popup.html: 弹出页面的 HTML 文件。
  • popup.js: 弹出页面的 JavaScript 文件。
• manifest.json: 扩展的配置文件，定义了扩展的基本信息、权限、脚本等。
• README.md: 项目的说明文档，包含项目的介绍、安装方法、使用说明等。

2. 项目的启动文件介绍

Image Picka 的启动文件主要是 background.js 和 content.js。

background.js

background.js 是扩展的后台脚本，负责处理扩展的核心逻辑。它监听来自内容脚本和用户界面的消息，并执行相应的操作，如启动下载任务、处理下载失败重试等。

content.js

content.js 是内容脚本，负责与网页内容交互。它会在网页加载时运行，识别网页中的图像，并提供下载功能。用户可以通过拖放、快捷键或鼠标悬停来选择图像进行下载。

3. 项目的配置文件介绍

Image Picka 的配置文件是 manifest.json，它定义了扩展的基本信息、权限、脚本等。

manifest.json

{
  "manifest_version": 2,
  "name": "Image Picka",
  "version": "1.0",
  "description": "A Firefox/Chrome extension helping you download images",
  "permissions": [
    "activeTab",
    "downloads",
    "storage",
    "webRequest",
    "webRequestBlocking",
    "<all_urls>"
  ],
  "background": {
    "scripts": ["background/background.js"]
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content/content.js"]
    }
  ],
  "browser_action": {
    "default_popup": "popup/popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "options_ui": {
    "page": "options/options.html",
    "open_in_tab": true
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

配置文件说明

• manifest_version: 指定 manifest 文件的版本，通常为 2。
• name: 扩展的名称。
• version: 扩展的版本号。
• description: 扩展的描述。
• permissions: 扩展所需的权限，如 activeTab（当前标签页）、downloads（下载）、storage（存储）等。
• background: 定义后台脚本，background.js 是后台脚本文件。
• content_scripts: 定义内容脚本，content.js 是内容脚本文件，匹配所有 URL。
• browser_action: 定义浏览器动作，包括弹出页面的 HTML 文件和图标。
• options_ui: 定义选项页面的 HTML 文件，用户可以在此配置扩展的设置。
• icons: 定义扩展的图标文件。

通过以上配置，Image Picka 能够在 Firefox 和 Chrome 浏览器中正常运行，并提供高效的图像下载和管理功能。