图看(PicSee)-图像预览下载插件

图看(PicSee)-图像预览下载插件

By fantasy
web extension js

看看图 (PicSee) 插件

PicSee PicSee

📌 插件简介

图看 (PicSee) 是一款功能强大的浏览器图片下载插件，可以快速检测、预览和下载网页中的图片。

✨ 核心功能

1. 智能图片检测

  • 自动检测：打开插件后自动检测当前页面所有图片
  • 实时显示：以卡片形式展示检测到的图片
  • 图片信息：显示图片尺寸、文件类型等详细信息

2. 灵活的过滤功能

  • 尺寸过滤：通过进度条设置最小宽度和高度
  • 文件类型过滤：支持按文件类型（如 jpg、png、gif 等）过滤
  • 实时过滤：调整过滤条件时实时更新结果

3. 多种下载方式

  • 批量下载：一键下载所有选中的图片（单独文件）
  • 打包下载：将选中的图片打包为 ZIP 文件下载
  • 自定义文件名：ZIP 文件名自动包含页面标题、图片数量和日期

4. 图片预览

  • 全屏预览：点击图片打开全屏预览
  • 缩略图导航：底部缩略图栏快速切换图片
  • 缩放功能：支持鼠标滚轮缩放预览图片
  • 信息叠加：显示图片 URL、尺寸等信息

5. 界面功能

  • 弹出窗口：支持在独立窗口中打开插件
  • 主题切换：内置浅色/暗黑主题
  • 设置面板：可自定义弹出窗口大小和卡片模糊程度

📖 使用方法

基本使用流程

  1. 打开插件：点击浏览器工具栏中的插件图标
  2. 检测图片：插件自动检测当前页面图片
  3. 选择图片：勾选要下载的图片
  4. 应用过滤（可选）：设置过滤条件筛选图片
  5. 开始下载：点击”批量下载”或”打包下载”按钮

高级功能

  • 弹出窗口：点击”弹出窗口打开”按钮在独立窗口操作
  • 主题设置：点击⚙️按钮进入设置页面切换主题
  • 尺寸调整：在设置中调整弹出窗口大小

🎨 技术特点

界面设计

  • 现代化 UI：采用简洁美观的卡片式布局
  • 响应式设计：适配不同屏幕尺寸
  • 主题支持：浅色/暗黑主题自动切换
  • 流畅动画：滑块、按钮等元素有平滑过渡效果

技术实现

  • Chrome 扩展 API：充分利用 Chrome 扩展能力
  • JSZip 库：实现图片打包下载功能
  • 现代 JavaScript：使用 ES6+ 语法
  • 模块化设计：代码结构清晰，易于维护

🌟 适用场景

  • 设计师：快速收集网页中的参考图片
  • 内容创作者：批量下载图片素材
  • 开发者：分析网页图片结构
  • 普通用户：方便地保存网页中的图片

📁 项目结构

├── assets/            # 插件图标
├── libs/              # 第三方库（如 JSZip）
├── popup/             # 弹出窗口相关文件
├── background.js      # 后台脚本
├── content.js         # 内容脚本
├── imagepage.html     # 独立弹出窗口
├── settings.html      # 设置页面
├── manifest.json      # 插件配置文件
└── README.md          # 说明文档

核心文件说明

文件 功能描述
manifest.json 插件配置文件，定义插件基本信息、权限和功能
background.js 后台脚本，处理下载逻辑和文件名生成
content.js 内容脚本，在网页中执行，用于检测和提取图片
popup/popup.js 弹出窗口脚本，提供用户交互界面
imagepage.html 独立弹出窗口，提供更大的操作空间
settings.html 设置页面，提供用户自定义选项

🔧 安装方法

  1. 下载插件源代码到本地
  2. 打开浏览器扩展管理页面（通常在 chrome://extensions/）
  3. 开启「开发者模式」
  4. 点击「加载已解压的扩展程序」
  5. 选择插件源代码目录
  6. 插件安装完成，会在浏览器工具栏显示插件图标

📋 权限说明

插件需要以下权限来正常工作：

  • downloads：用于下载文件
  • downloads.shelf：用于显示下载栏
  • downloads.open：用于打开下载的文件
  • contextMenus：用于添加右键菜单
  • tabs：用于操作标签页
  • scripting：用于在网页中执行脚本
  • storage：用于存储用户设置
  • unlimitedStorage：用于存储大量数据

🚀 版本历史

  • v1.0.0：初始版本
  • v1.1.0：添加图片预览功能
  • v1.2.0：实现打包下载为 ZIP 文件
  • v1.3.0：添加主题切换和设置面板
  • v1.4.0：优化界面布局和交互体验
  • v1.5.0：添加缩略图导航和图片缩放功能
  • v1.6.0：改进过滤功能，使用滑块控件
  • v1.7.0：修复图片格式获取问题，增强URL解析能力
    • 修复了特殊URL格式（如 th?id=filename.jpg）的文件格式识别问题
    • 增强了 getFilenameFromUrl 函数，支持从查询参数中提取文件名
    • 增强了 getFileTypeFromUrl 函数，添加多层提取逻辑
    • 增强了 isImageUrl 函数，改进文件扩展名检查
    • 添加了 downloadUrl 字段，确保使用原始链接下载
    • 改进了文件名生成逻辑，使用 页面名称_索引_宽高.格式 格式
    • 修复了批量下载和打包下载时的URL处理问题
  • v1.7.1：修复数据URL处理问题
    • 增强了 getFileTypeFromUrl 函数，支持处理数据URL（base64编码）
    • 改进了文件名生成逻辑，避免使用完整的base64字符串作为文件名
    • 修复了包含数据URL图片时ZIP文件无法打开的问题
    • 清理了扩展名处理逻辑，移除可能的额外参数或内容
  • v2.0.0：界面优化和功能增强（2026-04-12）
    • 修复按钮文字未完全显示问题
    • 统一按钮样式为btn-16，适配黑白主题
    • 暗色主题组件配色更新，统一为暗蓝色
    • 进度条文字布局调整，嵌入到进度条左端
    • 弹出页面样式与默认页面统一
    • 实现实时显示检测到的图片，提升用户体验
    • 状态信息显示位置调整，移至标题栏正中间
    • 标题栏样式适配黑白主题，添加平滑过渡效果
    • 所有页面的最小过滤宽高配置为130
    • 暗色主题图片上的勾选颜色与进度条颜色一致