feat(inventory): SkinCraft 3D viewer embed by ykns3 · Pull Request #410 · csfloat/extension

ykns3 · 2026-07-28T21:36:08Z

Summary

Adds a View in 3D action to Steam inventory items, opening the SkinCraft viewer in a modal over the page. The viewer is a persistent, sandboxed cross-origin iframe driven entirely over postMessage — the extension never re-srcs it, so switching items inside the modal is instant once warm.

How it works

gSkinCraftEmbed is the single source of truth for the boot/load lifecycle: a versioned protocol (origin-pinned in both directions, never '*'), load correlation ids so stale progress/loaded/error events can't clobber a newer load, a 20s load timeout, and pause/resume on tab visibility.
Two worlds. The page-world instance reads g_ActiveInventory and posts the clicked item plus a bounded inventory snapshot to the content-script instance, which owns the iframe. The iframe deliberately stays out of the page world, so Steam's own scripts can't reach it, its message channel, or its closed shadow root.
Item identity is the masked inspect hex from asset_properties[propertyid=6] — SkinCraft resolves it client-side, so there's no Steam GC round-trip and no dependency on a float fetch.
SkinCraftViewerModal owns one <dialog> created once and never unmounted, since unmounting would reload the embed. It renders with lit-html's render() rather than extending FloatElement: the content script builds it, and Chrome leaves customElements null in isolated worlds, so no custom element can be defined there.
Inventory strip inside the modal for moving between loaded skins without closing it, with seed/float badges from the existing float cache and card colours from Steam's own rarity/background tags. Wrapped in guard() so load-progress ticks don't re-diff every card.
WebGPU gating (webgpu_availability.ts): adapter-only probe, so the button renders only where the viewer can actually run. Three-state and pessimistic while probing, so it never appears and then fails.
Keyboard focus is handed to the iframe on open and on every inventory-strip selection, since the embed's hotkeys listen inside its own document.

Sandbox / security

sandbox="allow-scripts allow-same-origin allow-downloads", allow="fullscreen", referrerpolicy="no-referrer". Inbound messages are gated on event.origin and shape-validated at both boundaries (skincraft_embed_protocol.ts, skincraft_viewer_protocol.ts); outbound is pinned to the embed origin. The inventory snapshot is length-bounded and every field is checked before it crosses.

Behaviour notes

The 3D button also appears on other users' inventories — viewing is deliberately independent of listing eligibility, unlike List on CSFloat.
List on CSFloat now sits in a flex row alongside the new button. That's the only part of this PR that changes existing UI rather than adding to it.
Clients without a WebGPU adapter see no button at all. navigator.gpu isn't Baseline — absent before Firefox 141, platform-dependent after — against a strict_min_version of 127.

Dev notes

Local dev points skincraft_embed_origin at a local SkinCraft dev server. The prod embed allowlist has no localhost entries, and steamcommunity.com still needs adding as an allowed ancestor before this works outside dev — that SkinCraft deploy ships alongside this. Without either, the modal shows its error state; nothing else is affected.
If the dev origin serves a self-signed cert, visit it top-level once and accept it first: Chrome refuses an untrusted-cert iframe silently, with no interstitial.

Rollout & testing

Local runs of the CI gates are green: npm run build, npm run checkformat, npm test (30 tests / 5 files), plus tsc --noEmit and madge --circular (345 files, no cycles). Node 24, matching CI.
Tests cover the two protocol validators, progress clamping/monotonicity, and inventory extraction. The modal is verified by hand.
Merges cleanly into current master (branch base is master@f882f20, unchanged).

Note

Medium Risk
New cross-origin iframe and dual postMessage boundaries are security-sensitive but origin-validated and sandboxed; inventory UI changes are localized with protocol tests covering validators.

Overview
Adds a View in 3D flow on Steam inventory item panels that opens SkinCraft in a modal with a single persistent sandboxed iframe (no re-src on item switches). gSkinCraftEmbed owns the lifecycle: page world posts a validated open message + bounded inventory snapshot to the content script, which drives the embed via a versioned, origin-pinned postMessage protocol (load ids, timeouts, pause/resume on tab hide).

SkinCraftViewerModal is lit-html (not a custom element) with a closed shadow root, loading/error UI, and an optional inventory strip (seed/float from float cache, rarity styling). Items are keyed off Steam asset_properties inspect hex via new skincraft_inventory_targets helpers; float_fetcher.getCached exposes cache for strip badges.

WebGPU is probed once (webgpu_availability + browser-specific webgpu_guidance); the button stays hidden while checking, shows disabled + tooltip when unavailable, and opens the viewer when an adapter is available. skincraft_embed_origin is added to all environment files. List on CSFloat is refactored into a flex row beside the new button, with the list modal rendered outside the row to avoid layout shift.

^{Reviewed by Cursor Bugbot for commit f8fcbc5. Bugbot is set up for automated code reviews on this repo. Configure here.}

…SFloat First step toward embedding the SkinCraft 3D viewer in the extension (mirroring the phoenix partner-iframe integration). Adds a "View in 3D" button to the right of "List on CSFloat" in the inventory selected-item pane, laid out side-by-side via a new .market-btn-row. Styled after SkinCraft's classic-theme primary button (the viewer's top-island "Inspect" action): brand indigo fill with the white logo mark so it stands out beside the muted List button. Shares the List gating via a new canListOnCSFloat getter; the click handler is a no-op stub until the persistent-iframe embed is wired up.

Applies the review conventions from phoenix#1669 to the extension embed. - drop the export-for-test inventory-click helper and its spec - collapse the duplicate frame-reveal methods into showFrame() - share one target builder, one Steam image helper, and named inspect/hex-colour patterns instead of repeated literals - move the shared target types beside the protocol so the service no longer imports a type from a component - split the modal CSS into skincraft_viewer_modal_styles.ts - fold isSellableOnCSFloat into canListOnCSFloat and derive the brand icon from environment.skincraft_embed_origin - point the dev embed origin at localhost

Replaces the createElement tree and the manual classList toggling with a lit-html template, keeping the imperative shell the modal needs. A FloatElement is not an option here: the content script builds this modal and Chrome leaves `customElements` null in isolated worlds, so no custom element can be defined in that context. `render()` only needs the DOM. - classMap/styleMap replace hand-built class strings and style.setProperty - createRef/ref replace the stored dialog and iframe handles - guard() around the inventory grid so progress ticks don't re-diff every card - both status blocks stay mounted and toggle `hidden`, so the item icon survives an error -> retry cycle (its fade-in needs the <img> to already exist) The iframe stays unconditional with a static src, so it is created once and only diffed after that, and the embed still boots exactly once. The service's view of the modal is unchanged.

Matches phoenix's WebGpuAvailabilityService: probe with requestAdapter() rather than trusting `navigator.gpu` to exist, since a present API still fails on outdated drivers or without hardware acceleration. The status is three-state and pessimistic while checking, so the button never appears and then fails. Clients with no `navigator.gpu` at all resolve to unavailable synchronously — that covers Firefox before 141, and the manifest supports 127+. Those users simply see no 3D button, rather than sitting through the 20s embed load timeout. Adapted to this codebase: a module singleton instead of a signals service, with the probe memoised behind settled() and started on first use so no GPU work happens at import time in the content-script world, where nothing renders.

GODrums

Looking forward to using this myself 👀

…g it

…mbed

…wering

cursor

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit f8fcbc5. Configure here.}

Step7750

Apologies for the late review! Few UI/UX comments here, perhaps suitable for a follow up.

Step7750 · 2026-07-31T21:53:08Z

+    }
+
+    dialog {
+        width: min(1120px, calc(100vw - 48px));


IMO, we can make this modal quite a bit larger.

On 1440p, it looks like so:

Step7750 · 2026-08-03T22:29:25Z

            );
        }

+        if (this.canListOnCSFloat || this.show3dButton) {


We should have more of a gap between the float/paint seed and the action buttons:

Step7750 · 2026-08-03T22:30:05Z

+
        if (isSellableOnCSFloat(this.asset.description)) {
-            containerChildren.push(html`${this.renderListOnCSFloat()} ${this.renderFloatMarketListing()}`);
+            containerChildren.push(this.renderFloatMarketListing());


Because these are added as separate children to the container, it causes new-line overflows when it doesn't need to be:

Step7750 · 2026-08-03T22:30:54Z

+
        if (isSellableOnCSFloat(this.asset.description)) {
-            containerChildren.push(html`${this.renderListOnCSFloat()} ${this.renderFloatMarketListing()}`);
+            containerChildren.push(this.renderFloatMarketListing());


We should keep the CSFloat Market action button in a similar spot regardless of whether the item is listed or not.

Right now, the button is on the left if not listed and on the right otherwise.

ykns3 added 9 commits July 20, 2026 15:08

feat(inventory): embed persistent SkinCraft viewer

b4fac11

fix(inventory): animate SkinCraft viewer dialog

fff89a6

fix(inventory): prevent stale SkinCraft item icons

f82c1c3

feat(inventory): add responsive SkinCraft item navigation

76572b9

feat(inventory): refine SkinCraft inventory navigation

8aaead3

ykns3 requested review from GODrums and Step7750 July 28, 2026 21:36

ykns3 marked this pull request as ready for review July 28, 2026 21:55

cursor Bot reviewed Jul 28, 2026

View reviewed changes

Comment thread src/lib/components/common/skincraft_viewer_modal.ts

fix(inventory): keep SkinCraft error UI visible on load failure

e19a47d

cursor Bot reviewed Jul 28, 2026

View reviewed changes

Comment thread src/lib/services/skincraft_embed.ts

Comment thread src/lib/services/skincraft_embed.ts

Comment thread src/lib/services/skincraft_inventory_targets.ts Outdated

ykns3 added 5 commits July 28, 2026 18:21

fix(inventory): harden SkinCraft embed load-state transitions

f5fee5b

fix(inventory): tolerate a missing Steam asset properties map

43017d8

fix(inventory): harden SkinCraft embed load lifecycle edge cases

4d29f89

fix(inventory): only close the SkinCraft modal on real backdrop clicks

dc4fc1f

fix(inventory): resolve selected-item properties from inventory maps

3da4ca4

cursor Bot reviewed Jul 28, 2026

View reviewed changes

Comment thread src/lib/services/skincraft_embed.ts

fix(inventory): make the SkinCraft load timeout terminal

587fd98

cursor Bot reviewed Jul 28, 2026

View reviewed changes

Comment thread src/lib/services/skincraft_embed.ts

fix(inventory): correlate terminal SkinCraft events by load id

0afeb89

GODrums requested changes Jul 31, 2026

View reviewed changes

ykns3 added 5 commits July 31, 2026 20:19

refactor(inventory): nest the 3D button styles

16f22b4

fix(inventory): render the list modal outside the market button row

253001d

refactor(inventory): split viewer message type checks from validation

74f8461

refactor(common): generalize the SkinCraft viewer modal, add logo header

a7df2c5

feat(inventory): disable the 3D button with guidance instead of hidin…

3362c60

…g it

cursor Bot reviewed Aug 1, 2026

View reviewed changes

Comment thread src/lib/services/skincraft_inventory_targets.ts

fix(inventory): use the appwide property fallback for strip targets

20c1c96

cursor Bot reviewed Aug 1, 2026

View reviewed changes

Comment thread src/lib/services/skincraft_embed.ts

fix(inventory): reload the embed frame on retry after a failed boot

7ae9bc2

ykns3 requested a review from GODrums August 3, 2026 05:59

GODrums approved these changes Aug 3, 2026

View reviewed changes

Comment thread src/lib/components/common/skincraft_logo.ts Outdated

Comment thread src/lib/utils/webgpu_guidance.ts Outdated

Comment thread src/lib/utils/webgpu_guidance.ts Outdated

ykns3 added 2 commits August 3, 2026 15:31

Merge remote-tracking branch 'origin/master' into feat/skincraft-3d-e…

aa02b9c

…mbed

refactor(common): address review — hosted logo, single chrome:// scheme

1404b5d

cursor Bot reviewed Aug 3, 2026

View reviewed changes

Comment thread src/lib/services/skincraft_embed.ts

fix(inventory): reload the embed frame when a booted viewer stops ans…

f8fcbc5

…wering

cursor Bot reviewed Aug 3, 2026

View reviewed changes

Comment thread src/lib/components/common/skincraft_viewer_modal.ts

ykns3 merged commit b53b227 into master Aug 3, 2026
4 checks passed

ykns3 deleted the feat/skincraft-3d-embed branch August 3, 2026 20:22

Step7750 reviewed Aug 3, 2026

View reviewed changes

ykns3 mentioned this pull request Aug 4, 2026

fix(inventory): scale 3D modal with viewport, unify market action row #412

Merged

Uh oh!

Conversation

ykns3 commented Jul 28, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

How it works

Sandbox / security

Behaviour notes

Dev notes

Rollout & testing

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

GODrums left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Step7750 left a comment

Choose a reason for hiding this comment

Uh oh!

Step7750 Jul 31, 2026

Choose a reason for hiding this comment

Uh oh!

Step7750 Aug 3, 2026

Choose a reason for hiding this comment

Uh oh!

Step7750 Aug 3, 2026

Choose a reason for hiding this comment

Uh oh!

Step7750 Aug 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ykns3 commented Jul 28, 2026 •

edited by cursor Bot

Loading