Parsing the Web: Extracting Structured Presentation Data from JSON-LD schemas

When compiling reading feeds, feed summarizers usually treat web content as unstructured prose. Page scripts are stripped, CSS layers are discarded, and only plain-text paragraphs are passed to AI models. However, websites frequently contain highly structured datasets designed for search indexes. Forcing an AI model to read, parse, and reformat structures like recipe ingredients, cast lists, or product specifications is inefficient, expensive, and risks model hallucinations.

With OmniBrief, we designed a presentation layout subsystem that runs concurrently with our AI summarizer. By extracting Schema.org metadata blocks (typically written in JSON-LD formats) directly from page scripts, OmniBrief renders rich, interactive UI components for recognized schemas-bypassing LLM context limits and API costs completely.

Part of the engineering behind OmniBrief.

The Presentation-Only Layer Architecture

To keep the application modular and performant, Schema.org extraction is treated strictly as a visual presentation enhancement. The extracted JSON data is saved as a companion file (schema.json) in the page's local folder. It is never appended to the summarizer prompts. This keeps context windows tight and eliminates model fees for metadata extraction.

OmniBrief registers parser engines using two matching lookup tables: SCHEMA_HANDLERS (for page extraction) and RENDER_HANDLERS (for UI rendering). This makes adding support for a new schema as simple as dropping two functions into our registries without altering core display code.

// Registry definition structure in OmniBrief
const SCHEMA_HANDLERS = {
  'Recipe': (json) => ({
    ingredients: json.recipeIngredient || [],
    instructions: (json.recipeInstructions || []).map(step => step.text || step),
    prepTime: json.prepTime,
    cookTime: json.cookTime,
    yield: json.recipeYield
  }),
  'Product': (json) => ({
    name: json.name,
    price: json.offers?.price || json.offers?.[0]?.price,
    currency: json.offers?.priceCurrency || json.offers?.[0]?.priceCurrency,
    availability: json.offers?.availability,
    rating: json.aggregateRating?.ratingValue
  })
};

Rendering Custom Presentation Tabs

By extracting schema properties, OmniBrief adapts its UI dynamically to match the content type:

• 🍳 Recipes: The AI summary panel changes to a tabbed view: Summary / Ingredients / Method, showing instructions in structured list items.
• 🛍️ Products: Real-time price tag elements, currency codes, ratings, and stock status are displayed in the header.
• 📅 Events: Location maps, venue names, ticket URLs, and formatted date-times are displayed.
• 🎬 TV & Movies: Detailed cast tables, directors, network badges, and trailer links are rendered.

The Video Embed Sandboxing Challenge

Many video-focused pages include schema markers containing embed URLs (embedUrl) like YouTube, Vimeo, or internal video networks. A naive approach is to render these links inside an iframe (<iframe src="...">).

However, video uploader permissions can restrict embeds to specific domain allow-lists. When loaded inside an extension's origin (e.g. chrome-extension://...), the iframe blocks playbacks, showing blank screens. OmniBrief handles this gracefully:

1. If the source is a direct media file (.mp4 or .m3u8), it mounts a native <video> container.
2. If the source is embed-only, it intercepts click events and opens the original watch page in a new window, bypassing iframe permission failures entirely.

Conclusion: Structured Design and Cost Control

By leveraging JSON-LD structured schemas, OmniBrief converts flat web pages into rich, interactive user components. This native presentation layer provides precise data representation and saves valuable AI compute, ensuring that local-first, privacy-first software remains lightning-fast.