Fusion: Opportunistic Web Prototyping with UI Mashups
summary
A Chrome extension called Fusion extracts live DOM pieces from other sites, lets users crop UIs with a visual selector, and wires them into a host page via a small JavaScript “glue” program and an iframe runtime (requires a relaxed browser security flag). The Fusion Editor supplies scaffolding, helper snippets, and three widget types (sidebar, popup, inline). The authors build 7 demos — Overleaf equation preview, table restyling, firepad-backed real‑time editing, etc. — each assembled with less than 15 lines of JS glue and shown to work, but success depends on accessible DOMs and cooperating third‑party scripts.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 1:11High fidelity solutions
- 3:22Making it work
- 5:02Customizing the UI
- 5:35Selecting the Panel
- 5:50Making a New Widget
- 7:18Widget Types
- 10:10iframe
- 11:49final product
- 12:18tables
- 12:31styles
- 12:56realtime collaboration
- 13:30Demo
related talks
36mWeb components - A whirlwind tour thru the future of the web
20mWebstrates: Shareable Dynamic Media
22mExtending the Web - explore new UI surfaces with WebExtensions
50mThe Browser is a Marvelous Thing
26mLess Cruft, More Power: Leverage the Power of the Web Platform
41mCustom Markup for Working & Writing
26mAugmenting the Internet with Browser Extensions
29mEffective user interface design with HTML prototyping