Firefox preview
The Firefox preview runs a real Firefox inside the page and installs your theme into it. Reach for it when the Chrome preview is not enough and you want to see how Gecko paints the colors before you export the Firefox package.
Quick start
- Open themes.extension.dev and click the Firefox card. The preview opens at
/firefoxin a new tab and boots the engine. - Keep the editor tab open and change a color there. The Firefox window repaints with the saved theme.
How it works
A real engine, in WebAssembly. The page boots Firefox compiled to WebAssembly and installs your theme as a temporary add-on. It is a large download, so the picker only links the card where the engine can run.
It follows the editor. The editor autosaves to this browser's storage 300 ms after each edit, and the browser fires a storage event in every other tab of the same origin. The preview listens for that event, reads the saved theme, and reinstalls it. Two saves that produce the same bytes count as one theme and do not reinstall.
What it installs. The preview builds the same manifest as the Firefox export, with the twelve mapped colors and the Gecko id. The package it installs holds the manifest only, so images stay out of the preview even when the export would carry a frame image.
What it needs. The engine needs WebAssembly JavaScript Promise Integration and a desktop browser. On a phone, or where the browser lacks that integration, the picker shows "This browser cannot run the Firefox engine" and nothing is downloaded. The /firefox address is served with cross-origin isolation headers, which is why the picker opens it as a full document in a new tab.
No editor here. The page wears the editor's shell, with the breadcrumb as the way back. There are no fields on it; every edit happens in the editor tab and arrives through storage.
A first visit shows the default theme. A browser that never touched the editor, or whose storage is empty, installs the default theme.
Reference
| Requirement | Value |
|---|---|
| Address | /firefox, opened in a new tab |
| Browser | Desktop, with WebAssembly JavaScript Promise Integration |
| Theme source | The editor's saved theme in this browser's storage |
| Update path | A storage event from the editor tab |
| Installed package | manifest.json only, no images |
When it fails
- "This browser cannot run the Firefox engine." The browser does not expose WebAssembly JavaScript Promise Integration. Open the page in a current desktop Chrome.
- The Firefox card on the picker has no link. Same cause, or you are on a phone.
- The preview shows the default theme. Nothing is saved in this browser. Open the editor, make one edit, and the preview follows.
- An edit did not reach the preview. The two tabs must share the same browser profile and origin, because the bridge is a storage event. A private window does not share storage with a normal one.
- The frame image is missing in Firefox. The preview installs the manifest only. Export the Firefox ZIP to see the frame image in a Firefox install.