Artwork: Hakurei Reimu by kageharu - Source

Szurubooru Upload Extension

⚠️ This extension is under active development. Features may change and bugs may exist. Created as a passion project for the Szurubooru community.

Overview

A Chrome extension for seamlessly uploading images to Szurubooru from various websites with automatic tag extraction, duplicate handling, and background processing.

Features

Core Functionality

• Right-click context menu for image uploads
• Extracts images from posts
• Preview modal with tag editing
• Background uploads - continue browsing while uploads process
• Duplicate post handling with tag merging and safety rating updates

Tag Management

• Automatic tag extraction from supported websites
• Tag autocomplete with category display
• Tag category mapping (artist, character, copyright, etc.)
• Default tags with configurable categories
• Tag normalization (spaces to underscores)
• Safely Updates existing tags categories, if needed

Upload Features

• Configurable Szurubooru server settings
• Default safety rating (safe/sketchy/unsafe)
• Source URL extraction and merging
• Auto-update duplicates option
• Background notifications with vertical stacking

User Experience

• Iframe modal for complete site isolation
• Notification system (newest first)
• Page navigation resilience - uploads continue if you navigate away

Supported Websites

Currently Supported

• Yande.re 🖼️🎥 - Full tag extraction, rating detection, source URLs, image and video support
• Twitter 🖼️ - Image extraction, author extraction, hashtag extraction

Planned Support

• Reddit, Imgur, Pixiv, DeviantArt, FurAffinity, Tumblr, 4chan, e621, Gelbooru, Sankaku, Danbooru

Installation

Development Build

1. Clone the repository
2. Run npm install
3. Run npm run build
4. Open Chrome and go to chrome://extensions/
5. Enable "Developer mode" (top right toggle)
6. Click "Load unpacked" and select the dist directory

Production

Automated Builds

This project uses GitHub Actions to automatically build and create downloadable extension files:

Download and Install

1. Go to the Releases page
2. Download the appropriate zip file:
   • szuru-browser-extension.zip for Chrome/Chromium
3. Extract the zip file
4. Load the extension:
   • Chrome/Chromium: Go to chrome://extensions/, enable "Developer mode", click "Load unpacked", select the extracted folder

Chrome Web Store

Coming soon - Chrome Web Store release

Configuration

1. Open extension options page
2. Server Configuration
   • Enter Szurubooru server URL
   • Add username and API key/token
   • Validate credentials
3. Default Tags
   • Add tags with categories (artist, character, copyright, general)
   • Tags are automatically applied to all uploads
4. Upload Settings
   • Set default safety rating
   • Enable/disable auto-update for duplicate posts
5. Website Modules
   • Toggle support for specific websites
   • Support level icons show what each site supports: 🖼️ (images), 🎥 (videos), or both
6. Tag Colors (optional)
   • Customize tag category colors

Usage

Page Extraction

1. Right-click on page (not an image)
2. Select "Upload to Szurubooru"
3. Extension automatically finds and extracts images and videos (if applicable)
4. Follow same upload process
5. Review extracted tags and sources
6. Add/remove tags as needed
7. Set safety rating
8. Click "Upload" - modal closes and upload processes in background

Notice: If you right click on an image from a browsing page (such as https://yande.re/post) the extension will extract tags from the current page. You need to be on the post page to extract tags properly. Working on a fix for this..

Duplicate Handling

• Manual Mode: Shows dialog with options to view existing post or update tags
• Auto Mode: Automatically merges tags and updates safety rating
• Tag Merging: New tags are added to existing post (not overwritten)
• Safety Updates: Rating can be updated during duplicate handling

Notifications

• Success: Upload completed successfully
• Duplicate: Post already exists (with update options)
• Error: Detailed error messages with suggestions
• Background: Continue browsing while uploads process

Technical Details

Architecture

• Manifest V3 compliant
• TypeScript for type safety
• Webpack for bundling
• Iframe modal for site isolation
• Background script for API communication
• Content script for page interaction

Tag Processing

• Two-step upload: Create/update tags first, then upload post
• Category validation: Ensures tags have correct categories
• Automatic merging: Combines new tags with existing ones
• Normalization: Handles spaces, special characters

Security

• API token authentication
• CORS handling via background script
• Site isolation via iframe modal (for pesky keybinds)
• No data collection - all processing happens locally and in your Szurubooru server

Development

Commands

• npm run build - Production build
• npm run build:dev - Development build
• npm run watch - Watch and rebuild during development

Project Structure

src/
├── background.ts          # API communication & message handling
├── contentScript.ts       # Page interaction & modal management
├── components/
│   └── IframeModal.ts     # Modal controller
├── utils/
│   ├── szuruAPI.ts        # Szurubooru API client
│   └── siteMapping.ts     # Website detection & extractors
├── websites/              # Website extractors
├── types/
│   └── websiteExtractor.ts # Type definitions
├── modal.html             # Modal UI
├── modal.ts               # Modal logic
├── options.html           # Options page
└── options.ts             # Options logic

Contributing

1. Fork the repository
2. Create a feature branch
3. Implement your changes
4. Add tests if applicable
5. Submit a pull request

Adding Website Support

1. Create extractor in src/websites/
2. Implement required methods (extractTags, extractImages, etc.)
3. Add to site mapping
4. Test thoroughly

License

This project is licensed under the MIT License. See the LICENSE file for details.