WeChat Image Editor (公众号图片编辑扩展)

Overview

This skill packages a working Chrome extension (wechat-image-editor) that adds a floating
"✏️ 编辑图片" button to the bottom-right of the WeChat Official Account article editor. Clicking it
opens a full-screen image editor (powered by Fabric.js) with crop, mosaic/blur, text, arrow,
rectangle, and a colored/rounded border tool. On completion, the edited image is written into
the article (via the system clipboard + an insert attempt).

The full, ready-to-load extension source lives in assets/wechat-image-editor/.

When to use

• The user wants to edit images (crop / blur / annotate / add a colored border) for a 公众号 article.
• The user wants to build, package, install, or re-install this extension.
• The user reports a bug: editor not appearing, write-back failing, arrow/text/border misbehaving.
• The user wants to add new editing capabilities or change the "write back to WeChat" mechanism.

How to build & install (workflow)

1. Copy the bundled extension to a working folder:
   cp -r assets/wechat-image-editor/ <working-dir>/ (use Python shutil.copytree if cp is unavailable).
2. To deliver to the user, package the folder as a zip (NOT .tar.gz — Windows built-in extract
   cannot open .tar.gz). Use Python zipfile to create the archive; exclude generate_icons.js
   and generate_icons.cjs (build-only helpers).
3. Install in the browser:
   - Open chrome://extensions.
   - Enable Developer mode (top-right toggle).
   - Click Load unpacked and select the extension folder.
   - CRITICAL: after loading (or after any code change), refresh the article edit tab
   (Ctrl/⌘ + R). The injected button only appears after the page reloads.
4. Use: open an article at mp.weixin.qq.com, refresh, click the blue floating button, edit, then
   click 完成并写回公众号. Paste into the article with Ctrl/⌘ + V if auto-insert does not fire.

Core capabilities

• Crop — drag a box; the image is cropped to the selection.
• Mosaic / blur — drag a box; pixels inside are averaged into blocks (privacy-friendly).
• Text — click anywhere on the image to drop an editable text box (type immediately; font size
  slider 12–120).
• Arrow — press and drag in ANY direction; arrowhead lands at the release point (not top-down only).
• Rectangle — colored outline box for highlighting.
• Border — opens a small panel: color picker, corner radius (0 = sharp, higher = rounded), and
  thickness. Applies a colored rounded frame around the whole image (canvas expands so the frame is
  not clipped).

Shared controls: color picker, stroke width, font size, undo, clear-annotations.

Known pitfalls (do NOT repeat)

• Write-back is done via the system clipboard, NOT a synthetic paste event. Chrome ignores
  ClipboardEvent constructed in code (new DataTransfer() + dispatched paste does NOT carry the
  image). On the "完成" click (a real user gesture), write the PNG to navigator.clipboard.write
  and ALSO post the dataUrl to the parent so content.js can show a result panel + attempt insert.
  Always tell the user to Ctrl/⌘ + V as the reliable fallback.
• Arrow direction bug: never derive the arrow from the bounding-box top-left to bottom-right
  (that forces a downward arrow). Track the real mouse-down point and draw the arrow from there to
  the release point.
• Text tool must enter edit mode: after canvas.add(text); canvas.setActiveObject(text), call
  text.enterEditing() inside a setTimeout(..., 0) and focus text.hiddenTextarea. Simply adding
  an IText without entering edit mode makes the tool appear "broken" (no input box).
• Border framing: to avoid clipping, expand the canvas by the border width and shift the base
  image + all objects before drawing the rounded rect; otherwise half the stroke is cut off.
• Manifest V3 + Fabric.js: bundle lib/fabric.min.js locally (do not rely on a CDN) so the
  extension works offline. Use Fabric 5.x UMD build.
• Delivery format: ship .zip; non-technical users on Windows cannot extract .tar.gz.

Compatibility

• Verified environment: HarmonyOS (华为/鸿蒙) built-in browser. The user (未迟) confirmed it works there.
• Other browsers: Chrome / Edge and other Chromium-based browsers should work but may require
  debugging (the extension is a standard MV3 extension; differences in how a given browser handles
  navigator.clipboard.write or content-script injection are the usual suspects).

Resources

• assets/wechat-image-editor/ — the complete extension: manifest.json, content.js (injection
• write-back), editor.html / editor.js / editor.css (Fabric.js editor), background.js
  (image fetch with extension privileges to bypass CORS), popup.html / popup.js (toolbar button
  popup with a standalone try-out mode), lib/fabric.min.js, icons/, and README.md.