GLM-Image2COS

A Chrome extension that generates images via GLM Image API (Zhipu) and uploads them to Tencent Cloud COS — get permanent links instantly, all from your browser's side panel.

中文文档

---

Screenshots

Click to expand/collapse screenshots

Popup	Side Panel - AI Image Gen

Side Panel - History	Side Panel - History Detail

Side Panel - Cloud Storage	Side Panel - Settings

---

Features

• GLM Image Generation — AI-powered image generation using Zhipu's GLM Image model (glm-image), with user-configurable API Key.
• Tencent Cloud COS Integration — Auto-upload generated images to COS for permanent, shareable links.
• Side Panel UI — Clean, compact side panel interface with AI generation tools and settings management.
• User Settings — Configure your Zhipu API Key and theme preferences (light / dark / system) directly in the side panel.
• Dark Mode — system / light / dark theme switching with VueUse, synced across all extension contexts.
• Built-in WXT i18n — Native @wxt-dev/i18n module, follows the browser locale. Supports Chinese and English.
• Shared State via WXT Storage — Cross-context state synchronization through wxt/storage (API key, theme, app state).
• Element Plus with Auto Import — UI components and APIs are auto-imported on demand via unplugin-vue-components and unplugin-auto-import.
• Multi-Entry SPA Architecture — popup, options, and sidepanel each have their own Vue Router and Pinia instance, fully isolated.
• Iconify Icons — Uses @iconify/vue for a rich, customizable icon set.
• Complete DX Toolchain — ESLint (@antfu/eslint-config), TypeScript strict mode, SCSS, conventional commits (cz-git), semantic versioning (standard-version).

---

Tech Stack

Layer	Technology
Framework	WXT (Web Extension Tools)
UI	Vue 3 + Element Plus
Icons	Iconify (@iconify/vue)
State	Pinia (per-entry instance)
Routing	Vue Router 4 (Hash mode, per-entry)
i18n	@wxt-dev/i18n (WXT native)
Storage	wxt/storage (cross-context sync)
AI SDK	OpenAI Node SDK (GLM Image API compatible)
Utilities	VueUse + Lodash-es + Day.js
HTTP	Axios
Styling	SCSS + Element Plus theme customization
Linting	@antfu/eslint-config
CI/CD	GitHub Actions

---

Project Structure

GLM-Image2COS/
├── .github/workflows/          # CI/CD: lint + build + release
├── .vscode/                    # VSCode recommended extensions
├── assets/styles/              # Global SCSS: variables, dark mode, reset
├── components/                 # Shared Vue components
│   └── HelloWorld.vue
├── composables/                # Vue composables
│   └── useDarkMode.ts          # Dark mode logic with Pinia + VueUse
├── entrypoints/                # Extension entry points
│   ├── background.ts           # Service Worker: storage management & message routing
│   ├── popup/                  # Popup SPA (Product introduction)
│   │   ├── main.ts / App.vue
│   │   ├── index.html
│   │   └── style.css
│   └── sidepanel/              # Side Panel SPA (Core features)
│       ├── main.ts / App.vue / router.ts
│       ├── index.html
│       └── views/
│           ├── ToolsView.vue      # GLM Image generation tool
│           ├── HistoryView.vue    # Generation history
│           ├── CloudView.vue      # Cloud storage management
│           ├── SettingsView.vue   # API Key & theme configuration
│           └── OverviewView.vue   # Overview page
├── lib/                        # Core libraries
│   ├── glm.ts                  # GLM Image API client (OpenAI-compatible)
│   ├── cos.ts                  # Tencent Cloud COS SDK
│   ├── create-extension-app.ts # Unified Vue app factory
│   ├── element-plus.ts         # Element Plus locale resolver
│   └── i18n.ts                 # WXT i18n wrapper
├── locales/                    # i18n translation files
│   ├── en.json
│   └── zh-CN.json
├── public/icon/                # Extension icons (16/32/48/96/128)
├── screenshots/                # Preview screenshots
├── stores/                     # Pinia stores (definitions shared, instances isolated)
│   ├── app.ts                  # App state: theme, global settings
│   ├── cloud.ts                # Cloud files state
│   ├── history.ts              # Generation history state
│   └── userSettings.ts         # User settings: API Key persistence
├── utils/                      # Utilities
│   ├── messaging.ts            # Type-safe extension messaging
│   └── storage.ts              # WXT storage adapter & types
├── wxt.config.ts               # WXT configuration
├── tsconfig.json               # TypeScript configuration
├── eslint.config.mjs           # ESLint flat config
└── package.json

---

Getting Started

Prerequisites

• Node.js >= 18
• Bun >= 1.0 (recommended)

Install

bun install

This will also run wxt prepare automatically via postinstall to generate i18n types and WXT type declarations.

Development

# Chrome (default)
bun run dev

# Firefox
bun run dev:firefox

After starting, load the extension in your browser:

Browser	Steps
Chrome	Open chrome://extensions → Enable "Developer mode" → "Load unpacked" → Select .output/chrome-mv3
Firefox	Open about:debugging#/runtime/this-firefox → "Load Temporary Add-on" → Select .output/firefox-mv3/manifest.json

Build

# Chrome
bun run build

# Firefox
bun run build:firefox

# Build and zip both
bun run zip
bun run zip:firefox

Output is in the .output/ directory.

Configuration

After loading the extension, open the side panel and navigate to Settings to configure your Zhipu API Key. The key is persisted locally and used for all GLM Image API calls.

---

Architecture

Side Panel App

The primary user interface is the Side Panel, which provides the following main views:

Route	View	Description
/	OverviewView	Overview page with basic info and entries
/tools	ToolsView	AI image generation — enter prompts and generate images via GLM Image API
/history	HistoryView	Generation history — view, delete, download, or upload to cloud
/cloud	CloudView	Cloud storage management — manage objects uploaded to Tencent Cloud COS
/settings	SettingsView	Configure API Key, COS settings, and theme

GLM Image API Integration

The extension communicates with the Zhipu GLM Image API through an OpenAI-compatible client (lib/glm.ts). The API Key is user-configurable and stored in userSettingsStore, following the standard WXT storage pattern for cross-context sync.

Cross-Context State Sync

Shared application state (theme, API key, COS settings, etc.) is persisted through WXT Storage (wxt/storage). Each UI entry's Pinia store watches storage changes and stays in sync:

┌──────────┐   ┌──────────┐
│  Popup   │   │Sidepanel │
│ (Pinia)  │   │ (Pinia)  │
└────┬─────┘   └────┬─────┘
     │              │
     │  wxt/storage │
     └──────┬───────┘
            │
    ┌───────┴───────┐
    │  Background   │
    │ (Service Wkr) │
    └───────────────┘

i18n with WXT Native Module

Translations are defined in locales/*.json and follow the browser's UI language. No runtime language switching — WXT i18n maps to chrome.i18n / browser.i18n natively.

---

Scripts

Command	Description
bun run dev	Start dev server (Chrome)
bun run dev:firefox	Start dev server (Firefox)
bun run build	Build for production (Chrome)
bun run build:firefox	Build for production (Firefox)
bun run zip	Build and create .zip for Chrome
bun run zip:firefox	Build and create .zip for Firefox
bun run lint	Run ESLint
bun run lint:fix	Run ESLint with auto-fix
bun run format	Run ESLint with auto-fix
bun run typecheck	Run TypeScript type checking
bun run commit	Interactive conventional commit (cz-git)
bun run release	Bump version and generate CHANGELOG

---

ROADMAP

Planned features and improvements:

• GLM Image 历史记录管理 — 管理 GLM Image 生成的图片历史记录，支持查看、删除和重新生成。
  Image generation history management — view, delete, and regenerate past results.
• 集成 Tencent Cloud COS — 将生成的图片自动上传至腾讯云 COS，获取永久可分享的链接。
  Integrate Tencent Cloud COS for automatic image uploads and permanent shareable links.
• 优化 Side Panel UI 设计 — 改进 sidepanel 的界面设计和交互体验。
  Optimize the side panel UI design and user experience, and optimize the popup.
• Chrome 通知弹窗中的复制链接 — 在 Chrome 通知中直接提供复制图片链接的功能。
  Implement copy-link functionality in Chrome notification popups.

---

Contributing

This project uses conventional commits with cz-git for standardized commit messages.

bun run commit

Follow the prompts to select the type (feat, fix, docs, etc.) and scope. The commit message will be automatically formatted.

To release a new version:

bun run release        # Auto-detect version bump
bun run release:patch  # 0.0.x
bun run release:minor  # 0.x.0
bun run release:major  # x.0.0

This will:

1. Bump the version in package.json
2. Generate / update CHANGELOG.md
3. Create a git tag (v*)
4. Trigger the GitHub Actions release workflow

---

Recommended IDE Setup

• VS Code + Volar (recommended extension auto-suggested in .vscode/extensions.json)

---

License

MIT