# octopus-image-preview

**Repository Path**: github-9819409/octopus-image-preview

## Basic Information

- **Project Name**: octopus-image-preview
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-14
- **Last Updated**: 2026-05-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 章鱼图片助手（Octopus Image Assistant）

[中文](#中文) | [English](#english)

## 中文

一个用于“收集 + 预览 + 批量下载”网页图片的浏览器插件。支持从当前页面（含常见懒加载、`srcset`、背景图等）提取图片地址，并提供图片预览器与 Popup 工具面板。

### 功能

- 右键菜单
  - 在图片上右键：`章鱼：预览图片`（从当前图片开始预览）
  - 在页面空白处右键：`章鱼：预览本页图片`（预览整页图片）
- 图片预览器（页面内覆盖层）
  - ← / → 切换图片，滚轮缩放，ESC 关闭
  - 单张下载 / 加入待下载列表 / 一键下载待下载列表
  - 旋转、翻转等操作（基于 Ant Design Image 预览能力）
- Popup 面板
  - 一键隐藏/显示网页中的图片
  - 一键下载当前页全部图片（支持文件名前缀与命名规则）
  - 导出图片 URL 为 CSV
  - 统计信息：图片总数、格式分布等
  - 页面截图：可见区域截图、整页截图（拼接），并在预览器中查看
  - 下载站点 favicon

### 使用方法

- 预览图片：在网页图片上右键选择 `章鱼：预览图片`，或在页面空白处右键选择 `章鱼：预览本页图片`
- 下载图片：在预览器里点击下载按钮，或将多张加入“待下载列表”后统一下载
- Popup 工具：点击浏览器工具栏中的扩展图标打开 Popup

### 开发与构建

#### 安装依赖

```bash
pnpm install
```

#### 本地开发

```bash
pnpm dev
```

也可以指定浏览器：

```bash
pnpm dev:edge
pnpm dev:firefox
```

#### 构建与打包

```bash
pnpm build
pnpm zip
```

也可以分别构建：

```bash
pnpm build:edge
pnpm build:firefox
```

#### 手动加载到浏览器（构建产物）

- Chrome / Edge
  - 打开 `chrome://extensions/`（Edge 为 `edge://extensions/`）
  - 开启“开发者模式”
  - 选择“加载已解压的扩展程序”，指向构建输出目录（通常在 `.output/` 下，对应 `chrome-*` / `edge-*`）
- Firefox
  - 打开 `about:debugging#/runtime/this-firefox`
  - “临时载入附加组件”，选择构建输出目录（通常在 `.output/` 下，对应 `firefox-*`）内的 `manifest.json`

### 权限说明

- `contextMenus`：添加右键菜单入口
- `downloads`：下载图片、favicon、导出文件
- `activeTab` / `tabs` / `webNavigation` / `scripting`：读取当前页信息、跨 frame 收集图片、执行截图与注入逻辑
- `host_permissions: <all_urls>`：允许在任意站点启用（用于抓取图片与发送请求获取内容类型等）

### 技术栈

- WXT
- React 18 + TypeScript
- Ant Design 5（UI）
- TailwindCSS（样式）

### 隐私

插件的图片收集、预览与下载逻辑均在本地浏览器环境内完成，不主动上传任何数据到第三方服务。

### License

未声明（Unspecified）。

---

## English

A browser extension for collecting, previewing, and batch-downloading images from the current page. It extracts image URLs from common sources (lazy-load attributes, `srcset`, CSS backgrounds, etc.), and provides an in-page viewer plus a Popup toolbox.

### Features

- Context menu
  - Right-click an image: `章鱼：预览图片` (starts from the selected image)
  - Right-click the page: `章鱼：预览本页图片` (previews all images on the page)
- In-page image viewer (overlay)
  - Navigate with ← / →, zoom with mouse wheel, close with ESC
  - Download current image / add to a download queue / batch download the queue
  - Rotate / flip and more (powered by Ant Design Image preview)
- Popup panel
  - Hide/show images on the page
  - Download all images on the current page (with filename prefix and naming rule)
  - Export image URLs to CSV
  - Stats: total count, format distribution, etc.
  - Screenshots: visible area and full-page (stitched), then preview in the viewer
  - Download site favicon

### Usage

- Preview images: right-click an image and choose `章鱼：预览图片`, or right-click the page and choose `章鱼：预览本页图片`
- Download: use the download button in the viewer, or batch download via the queue
- Popup toolbox: click the extension icon in the browser toolbar

### Development & Build

#### Install

```bash
pnpm install
```

#### Dev

```bash
pnpm dev
```

Target specific browsers:

```bash
pnpm dev:edge
pnpm dev:firefox
```

#### Build & Zip

```bash
pnpm build
pnpm zip
```

Or build per browser:

```bash
pnpm build:edge
pnpm build:firefox
```

#### Load unpacked (build output)

- Chrome / Edge
  - Open `chrome://extensions/` (Edge: `edge://extensions/`)
  - Enable Developer mode
  - Load unpacked and select the output directory (usually under `.output/`, like `chrome-*` / `edge-*`)
- Firefox
  - Open `about:debugging#/runtime/this-firefox`
  - Load Temporary Add-on and choose the `manifest.json` inside the output directory (usually under `.output/`, like `firefox-*`)

### Permissions

- `contextMenus`: add context menu entries
- `downloads`: download images, favicon, and exported files
- `activeTab` / `tabs` / `webNavigation` / `scripting`: collect images across frames, capture screenshots, and run injected logic
- `host_permissions: <all_urls>`: enable on any site (for image extraction and MIME sniffing requests)

### Tech Stack

- WXT
- React 18 + TypeScript
- Ant Design 5
- TailwindCSS

### Privacy

All collection/preview/download logic runs locally in your browser. The extension does not proactively upload data to third-party services.

### License

Unspecified.