A Chrome extension that applies dithering algorithms to all images on a webpage, converting them to black and white with various artistic effects.

• Multiple Algorithms: Choose between Floyd-Steinberg error diffusion and Bayer ordered dithering
• One-Click Processing: Dither all images on the current page with a single button click
• Reversible: Restore original images anytime
• Fast Processing: Uses Web Workers for non-blocking image processing
• Privacy-Focused: All processing happens locally in your browser

1. Clone this repository:

   git clone https://github.com/eupthere/dither.git
   cd dither

2. Install dependencies:

   npm install

3. Build the extension:

   npm run build

4. Load the extension in Chrome:

   • Open chrome://extensions/
   • Enable "Developer mode"
   • Click "Load unpacked"
   • Select the dither-chrome-extension folder

1. Navigate to any webpage with images
2. Click the Dither extension icon in your toolbar
3. Select an algorithm from the dropdown:
   • Original (Restore): Restore images to their original state
   • Floyd-Steinberg: Error diffusion dithering with smooth gradients
   • Bayer (Ordered): Pattern-based dithering with a textured look
4. Click "Apply Dithering"
5. All processable images on the page will be converted to dithered black and white

The extension uses a multi-component architecture:

• Popup: User interface for selecting algorithms and triggering dithering
• Content Script: Injected into web pages to identify and process images
• Web Worker: Performs CPU-intensive dithering calculations off the main thread
• Algorithms: Implements Floyd-Steinberg and Bayer dithering techniques

1. Content script identifies all <img> elements on the page
2. For each image, it extracts pixel data to a canvas
3. Pixel data is sent to a dedicated Web Worker
4. Worker applies the selected dithering algorithm
5. Processed image is converted to a blob and replaces the original
6. Original image URLs are preserved for restoration

Error diffusion dithering that distributes quantization error to neighboring pixels, creating smooth gradients and natural-looking results.

Pattern-based dithering using a threshold matrix, producing a distinctive crosshatch texture reminiscent of newspaper prints.

• Minimum Image Size: Images smaller than ×ばつ32 pixels are skipped
• CORS Restrictions: Cross-origin images without proper CORS headers cannot be processed due to browser security policies. This is a fundamental browser limitation that affects any client-side image processing extension.
  • You may see Access-Control-Allow-Origin errors in the console for some images
  • These errors are expected and the extension gracefully skips these images
  • Only images from the same domain or servers that send CORS headers can be dithered
  • This cannot be bypassed without requesting invasive host_permissions which would require "Read and change all your data on all websites" permission

# Development build with watch mode
npm run dev
# Production build
npm run build

dither-chrome-extension/
├── manifest.json # Extension manifest
├── popup/ # Extension popup UI
│ ├── popup.html
│ └── popup.js
├── content/ # Content script
│ └── content.js
├── worker/ # Web Worker for image processing
│ ├── dither.worker.js
│ └── algorithms/
│ ├── floydSteinberg.js
│ └── bayer.js
├── dist/ # Built bundles (generated)
└── rollup.config.js # Build configuration

MIT

Contributions are welcome! Feel free to open issues or submit pull requests.