Every example on this page works the same way whether or not you have this extension installed and enabled — install/enable it, reload, and compare against a plain browser tab (or disable the extension and reload). Each section shows the exact code that was authored for it, extracted live from this page's own source so it can never drift out of sync with what's actually running. See the README's "Using COS today as a progressive enhancement" section for the full explanation of each technique below.
Checking…
Works as-is, no extra code needed, for both <script>
and <link>. An unrecognized
crossoriginstorage attribute is just inert HTML
attribute data to a browser that doesn't understand it.
A whole script:
⏳ Waiting for script…
A whole stylesheet:
This text should be pink — the stylesheet above loads the same way whether or not COS is available, so this always applies.
A plain fallback url() after the COS-enhanced one in
the same comma-separated list. An unrecognized
cross-origin-storage()/integrity()
modifier invalidates only its own list item, not the whole
declaration, so the fallback still applies. Order matters here — see
the README for why the COS-enhanced url() has to come
first.
In <head>:
In pe-demo-style.css:
Sample text using the loaded font (should render as color emoji either way):
🥰🌴🐢🍄🎨
This extension's polyfill recognizes type="module-cos"
and rewrites/executes it as a real module, including a literal
static import … with { crossOriginStorage }
declaration — rewritten in place before this script ever executes.
Without a COS implementation, module-cos is otherwise
inert and the script would never run at all — so an early,
always-safe detector script, placed right after it, strips the
unsupported with { crossOriginStorage } clause (a
static import can't have one until COS has already rewritten it)
and runs the result as a plain import instead. Either way, the
status below ends up reporting the same imported value — via COS
when it's available, over the network when it isn't.
A static import:
⏳ Loading…
The early detector, immediately after it:
⏳ Waiting…
Feature-detect, then choose the non-standard COS helper or plain
import() — this needs no special script type or
detector, since it degrades safely on its own either way.
A dynamic import():
⏳ Loading…