Transitioner is a wizard who lives in your browser and adds fun cross-document View Transitions to normal same-origin browser navigations.
demo.mp4
Chrome needs a transition's CSS before it creates the destination document. Runtime CSS injection is too late for fresh pages, so this extension:
- Keeps a base
@view-transition { navigation: auto; }stylesheet registered for every page. - During browser idle time, randomly selects and registers one packaged effect
stylesheet with
chrome.scripting.registerContentScripts(). - Chrome injects that selected stylesheet at
document_startinto the next matching document, letting the navigation remain a native browser transition.
The popup can override the random selection for one upcoming eligible same-origin navigation. Its choice is stored until that navigation consumes it.
-
Create
public/transitions/<name>.css. Each effect needs its own type:@view-transition { navigation: auto; types: transitioner-<name>; } :root:active-view-transition-type(transitioner-<name>)::view-transition-old(root) { animation: transitioner-<name>-out 800ms both; } :root:active-view-transition-type(transitioner-<name>)::view-transition-new(root) { animation: transitioner-<name>-in 800ms both; }
-
Add it to
transitionEffectsin utils/transitions.ts:{ label: 'My Effect', stylesheet: 'transitions/<name>.css' },
-
Run
npm run build, reload the unpacked extension, and test it. The popup selector is generated from this catalog automatically.
You can load an unpacked dev version to enable hot reloading (point the browser to .output/chrome-mv3-dev folder), even though sometimes it takes a hard reload to make the new transition work on the pages.
An interactive gallery of all transitions can be browsed by going to extension_url/tester.html. The easiest way to do it is to open the popup, inspect it and click on the hidden link right after the <body> tag.