ChatShot

Capture ChatGPT/Gemini conversations, generate beautiful share cards or long images (local rendering, privacy-safe).

# Answer Share (Chrome Extension) > Generate beautiful share cards or long images from ChatGPT / Gemini conversations with one click. All rendering is done locally with Canvas - no upload required. ## Key Features - ✅ Select text or automatically capture the **last answer** on the page - ✅ Generate two formats: **Card** (perfect for social media) & **Long Image** (for complete sharing) - ✅ Two entry points: floating button (bottom-right corner) & right-click context menu - ✅ Customizable theme gradients, dimensions, source/timestamp display via options (`chrome://extensions` → Options) - ✅ No backend dependencies - everything runs locally in your browser - ✅ Multi-language support (Chinese & English) ## Supported Sites (Default) - ChatGPT: `https://chat.openai.com/*`, `https://chatgpt.com/*` - Gemini: `https://gemini.google.com/*`, `https://ai.google.com/*` > If DOM structure changes, use **"selected text"** mode as a fallback. The extension attempts to auto-detect the last answer. ## Installation 1. Open `chrome://extensions` in Chrome and enable **Developer mode** 2. Click **"Load unpacked"** and select this project directory 3. Visit ChatGPT or Gemini pages: - Use the **"Generate Share Image"** floating button in the bottom-right corner - Or right-click and select: `Answer Share: Generate card/long image from selected text` 4. Images are automatically downloaded as PNG files. You can also copy to clipboard (requires user gesture) ## Implementation Highlights - **Manifest V3** with `content_scripts` for UI injection and `service_worker` for context menus - **Canvas rendering** for cards and long images with custom **CJK-friendly line breaking** (mixed CJK/English text) - **Auto-pagination** for long content (default max height: 16000px per page, configurable) - **Download via `a[download]`** with ObjectURL - no extra permissions needed - **Local-only rendering** - no data upload, privacy-friendly - **Internationalization** - Supports multiple languages using Chrome i18n API ## Customization - Modify theme colors, dimensions, max height, and source/timestamp display in `options.html` - To support additional sites, add DOM selectors in the `getLastAnswerText()` function in `content.js` - To add more languages, create new `_locales/{locale}/messages.json` files ## Project Structure ``` . ├── _locales/ # Internationalization │ ├── zh_CN/ # Chinese (Simplified) │ │ └── messages.json │ └── en/ # English │ └── messages.json ├── assets/ # Icons and resources │ ├── icon16.png │ ├── icon48.png │ └── icon128.png ├── manifest.json # Extension manifest ├── popup.html # Popup UI ├── popup.js # Popup logic ├── options.html # Options page ├── options.js # Options logic ├── service_worker.js # Background service worker ├── content.js # Content script (main logic) └── styles.css # Styles ``` ## Adding New Languages 1. Create a new directory: `_locales/{language_code}/` 2. Copy `_locales/en/messages.json` to the new directory 3. Translate the `message` fields (keep `description` in English) 4. Supported language codes: `ja` (Japanese), `ko` (Korean), `fr` (French), `de` (German), `es` (Spanish), etc. Example for Japanese: ```bash mkdir -p _locales/ja cp _locales/en/messages.json _locales/ja/messages.json # Edit _locales/ja/messages.json and translate messages ``` ## Technical Details ### Canvas Rendering - Custom text wrapping algorithm handles mixed CJK and Latin characters - Supports emoji and special characters - Automatic font fallback for missing glyphs ### Privacy & Security - No external API calls - No data collection or tracking - All processing happens in the browser - Images never leave your device ### Performance - Efficient DOM querying with caching - Lazy rendering for large content - Optimized Canvas operations - Minimal memory footprint ## Browser Compatibility - Chrome/Chromium 88+ - Microsoft Edge 88+ - Brave Browser - Other Chromium-based browsers with Manifest V3 support ## Troubleshooting **Q: The floating button doesn't appear** - Make sure you're on a supported site - Try refreshing the page - Check if the extension is enabled in `chrome://extensions` **Q: Generated image is cut off** - Increase "Max single image height" in options - Use "Long Image" format instead of "Card" **Q: Can't detect the last answer** - Select the text manually first - Site DOM structure may have changed - use text selection mode **Q: Language doesn't match my browser** - Check your Chrome language settings: `chrome://settings/languages` - Extension uses browser's primary language - Supported: Chinese (zh-CN), English (en) ## Development ```bash # Install dependencies (for icon generation) npm install # Generate icons (optional) node generate_icons.js # Preview icons in browser open preview_icons.html ``` ## Publishing 1. Update version in `manifest.json` 2. Generate icons if needed 3. Test in Chrome with developer mode 4. Create a ZIP file excluding development files: ```bash zip -r answer-share.zip . -x "*.git*" "*.md" "generate_icons.*" "preview_icons.html" "node_modules/*" ``` 5. Upload to [Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/devconsole) ## License MIT ## Contributing Issues and pull requests are welcome! Please ensure: - Code follows existing style - Test on both ChatGPT and Gemini - Update both English and Chinese documentation - Add i18n strings for new user-facing text ## Changelog ### v0.1.0 (Initial Release) - Basic card and long image generation - ChatGPT and Gemini support - Customizable themes and dimensions - Multi-language support (Chinese & English) - Local-only rendering for privacy