<include src="partials/header.html"></include>
[Content from partials/header.html would appear here]

HTML-Include: Include HTML in HTML

A Chrome extension that implements a polyfill for HTML transclusion using a custom <include> element, allowing you to embed HTML fragments from other files directly into your pages. Install here (v1.2.0).

🔄 Simple Includes

Include HTML fragments from other files with a simple syntax:

<include src="header.html"></include>

🔒 Cross-Origin Support

Intelligently handles CORS issues with background service worker fallback.

📦 Smart Caching

Built-in LRU caching for efficient loading of frequently used fragments.

🧩 Nested Includes

Support for nested includes up to 15 levels deep.

The page you are on is a Live Demo

This page demonstrates the HTML-Include Polyfill. The header and footer are loaded using <include> tags.

How It Works

When the extension is active, it replaces <include> tags with the content of the referenced files:

Source HTML

<!-- BEGIN include src="header.html" -->
<include src="header.html"></include>
<!-- END include -->

Rendered DOM (with extension)

<!-- BEGIN include src="header.html" -->
<header><h1>🚀 HTML‑Include...</h1>...</header>
<!-- END include -->
Try it in the Browser Console

Try adding a new include element dynamically using your browser's console:

document.body.insertAdjacentHTML('beforeend', '<include src="partials/footer.html"></include>')

This will dynamically load and insert another copy of the footer at the end of the page.

Documentation

Basic Usage

To include an HTML fragment in your page:

<include src="path/to/fragment.html"></include>

Best Practices

To make your page work even when the extension isn't installed, you can add fallback content:

<!-- BEGIN include src="header.html" -->
<include src="header.html"></include>
<!-- Add fallback content or load it with a script if extension is not active -->
<!-- END include -->

Attributes

Attribute Description
src Path to the HTML fragment to include. Can be relative or absolute.

Features

Implementation Details

The polyfill works by:

  1. Observing the DOM for <include> elements
  2. When found, fetching the HTML fragment from the src attribute
  3. Processing the fragment (resolving URLs, executing scripts)
  4. Replacing the <include> element with the processed fragment
  5. Recursively processing any nested includes

Limitations

Source Code

The extension consists of three main components:

Content Script (include.js)

Handles the transclusion logic, DOM observation, and fragment processing.

Background Service Worker (bg.js)

Provides cross-origin fetch support when the content script encounters CORS issues.

Manifest

Configures the extension, permissions, and content script injection.

The source code is available on GitHub.

Installation

This is a Chrome extension in development mode. Here's how to install it:

  1. Download the extension:
  2. Open Chrome Extensions:
    • Open Chrome and type chrome://extensions/ in the address bar
    • Press Enter
  3. Enable Developer Mode:
    • Toggle the "Developer mode" switch in the top-right corner of the extensions page
  4. Load the Extension:
    • Click "Load unpacked"
    • Navigate to the folder where you unzipped the extension
    • Select the folder (containing manifest.json) and click "Open"
  5. Verify Installation:
    • The extension should appear in your extensions list
    • Reload this page to see it in action

The extension is now installed in developer mode and should process <include> tags on any website you visit.

<include src="partials/footer.html"></include>
[Content from partials/footer.html would appear here]