How to Use the Extension
Follow these 4 simple steps to capture any UI component from any live webpage.
Open Target Page
Navigate to any website or web application (e.g. Bootstrap demo, dashboard, internal tool).
Click Extension Icon
Click tag-to-json in your browser toolbar to open the extraction popup.
Select Scope
Choose Full Page for the whole layout, or select a specific Element ID from the list.
Download & Use
Click Download Spec to save <id>-spec.json, ready to feed into json-to-tag!
Re-rendering the Extracted Spec in Your App:
import { buildSpecElement } from "@keshavsoft/json-to-tag";
import downloadedSpec from "./dashboard-spec.json" with { type: "json" };
// Recreate the identical native DOM tree in 1 line:
const liveElement = buildSpecElement({ inSpec: downloadedSpec });
document.getElementById("appContainer").appendChild(liveElement);Installation Instructions
Google Chrome / Brave / Edge
- Download and unzip tag-to-json-extension-v5.0.0.zip.
- Open Chrome and navigate to
chrome://extensions. - Enable Developer mode (toggle in top-right corner).
- Click Load unpacked and select the extracted folder.
- Pin the tag-to-json Inspector icon to your browser toolbar.
Mozilla Firefox
- Download tag-to-json-extension-v5.0.0.zip.
- Open Firefox and navigate to
about:debugging#/runtime/this-firefox. - Click Load Temporary Add-on....
- Select the downloaded tag-to-json-extension-v5.0.0.zip file directly.
- The add-on will immediately appear in your Firefox toolbar.
What's New in v5.0.0
Full Mixed Content Extraction
Elements with both vector icons and text labels (e.g. Bootstrap navigation buttons with <svg> and "Orders") are now extracted 100% losslessly.
Autonomous Content Script
The extension runs fully independently in an isolated execution world and does not rely on the target page loading external libraries.