Element Confetti Code Writer — implementation report

Question answered

Can a tool select a webpage element and write code for a canvas-confetti canvas with that element's dimensions?

Answer: Yes. This repository contains a load-unpacked Manifest V3 browser extension. Clicking its toolbar button starts an in-page picker; clicking an element measures its rendered border box and opens a dialog containing copyable HTML/JavaScript. The generated code creates a canvas with the captured width and height, positions it over a selector for the chosen element, creates a custom canvas-confetti instance, fires it, and removes the canvas after five seconds.

Attributable evidence and design basis

Facts from primary or authoritative sources

• Element.getBoundingClientRect() returns a DOMRect describing an element's viewport position and size. Its width and height cover the rendered border box (including padding and border). This is the API used by content.js to measure the picked element. MDN: getBoundingClientRect()
• Transforms affect the rendered dimensions returned by getBoundingClientRect(), while offsetWidth/offsetHeight represent layout dimensions and are integer-rounded. The implementation intentionally uses the rendered dimensions because the requested canvas should visually match what was picked. MDN: Determining the dimensions of elements
• The library's documented confetti.create(canvas, options) API creates an instance bound to a custom canvas. Its documentation says resize: true lets the library set and maintain the canvas bitmap size, and recommends retaining one instance rather than recreating it on the same canvas. The generated snippet creates one instance, enables resizing, and calls it once. canvas-confetti repository documentation
• The library documents disableForReducedMotion: true as disabling animation when the user prefers reduced motion. The generated code enables it. canvas-confetti repository documentation
• Chrome documents a required root manifest.json and Manifest V3 structure. The delivered manifest.json follows that structure. Chrome Extensions: Manifest file format
• Chrome documents that extension capabilities are declared through keys such as permissions and that host/content-script access can produce warnings. This implementation uses only activeTab and scripting, injecting after an explicit toolbar click rather than requesting persistent access to all sites. Chrome Extensions: Declare permissions

Facts verified directly in the deliverable

• manifest.json declares Manifest V3, an action, a service worker, and exactly two permissions: activeTab and scripting.
• service-worker.js restricts startup to HTTP(S) tabs and injects content.js only after the toolbar action is clicked.
• content.js installs capture-phase hover/click handlers, draws an isolated Shadow DOM highlight UI, calls getBoundingClientRect(), rounds each positive dimension upward, and writes those numbers into both canvas attributes and CSS dimensions.
• The picker can be cancelled with Escape, replaces an earlier picker instance when restarted, provides a clipboard fallback, and removes its UI/listeners when closed.

Inferences and rationale

• Inference: rendered border-box dimensions are the closest practical interpretation of “dimensions of the element.” Other interpretations—content box, layout box, or full scrollable content—are possible, but would make the canvas disagree with the visible picked outline in transformed or bordered cases.
• Inference: a user-initiated extension is a more generally useful “Element Picker” than a DevTools-only $0 console snippet because it supplies highlighting, selection, and output UI directly on ordinary pages.
• Inference: rounding fractional CSS pixels upward avoids clipping the selected rendered area. This means a fractional dimension can produce a canvas less than one CSS pixel larger on an axis.

Uncertainty and unanswered questions

• The task does not specify Chrome, Firefox, or a DevTools integration. The implementation targets Chrome/Chromium Manifest V3 and has not been claimed as Firefox-compatible.
• The generated selector reflects the DOM at selection time. Dynamic pages can invalidate it, duplicate IDs can make it ambiguous, and elements inside inaccessible closed shadow roots or cross-origin frames cannot be targeted from the top document.
• The generated snippet loads [email protected] from jsDelivr. It will not run offline, and a target page's Content Security Policy may block the external script or inline script. In that situation the dependency and generated JavaScript must be integrated into that page's existing build/CSP setup.
• The generated fixed positioning re-measures the target's viewport coordinates when the snippet starts. Scrolling, DOM movement, or layout changes during the five-second animation can move the target without moving the canvas; the captured canvas dimensions remain unchanged.
• Automated end-to-end browser verification was not available under the assignment's none execution/check profile. Static syntax and manifest validation are the appropriate local checks recorded for this delivery; they do not independently prove browser behavior.