How to make it work

1. Install Chrome extension
2. Install Photoshop extension
3. Restart Photoshop and Chrome
4. Make sure that Generator plugins are allowed in Photoshop
   Edit > Preferences > Plugins > Enable Generator (other settings does not matter)
5. If plugin is corectly loaded then you will see gray menu item in: File > Generate > Phantomatic. This menu item is not clickable and it works only as indicator. Sometimes "Generate" menu item is not available when you start Photoshop. You have to open some document and wait a while.

Supported

• Update previews for all images with the same URL on website
• Update previews for multiple different images on multiple websites in multiple browser tabs
• Image tag
• CSS background-image
• Https, http, filesystem, dataurl (base64)
• PNG, JPG, GIF, BMP
• Partly supported: SVG as external file. Rasterized in Photoshop.

On the roadmap for next version

• CSS :before and :after pseudo elements
• CSS content property with image url
• CSS border-image property
• CSS list-style-image property
• Sourceset atribute.
• Apply autopreview on newly added website elements

Currently not supported

• Multiple urls in background-image CSS property
• Inlined SVG
• Formats: WebP, HEIF, TIFF, APNG
• Canvas tag
• Video tag

Preview image specification

• Always lossless PNG 32bit with alfa (transparency)
• Preview image is served from "localhost" url. This means that are not served from internet but from your own device.
• If Phantomatic is allowed for certain URL then content-security-policy headers are temporary disabled. Because some website might not allow you to show image from non-whitelisted URLs.