Skip to main content

Build Your First Extension

This section walks you through a complete, minimal HexaJS extension that you can run in a browser immediately.

The extension does exactly two things:

  • It injects a small eye button on every page using a content-side Shadow DOM view.
  • It toggles grayscale on and off for that specific page when you click the eye button.

The popup is intentionally simple and visual-only. It mirrors the style of the feature and helps you verify UI wiring without adding extra messaging complexity.

What you will build​

  • A @Content entry that initializes and disposes page UI correctly.
  • A content @Injectable service that owns grayscale state for the current page.
  • A @View + HexaView pair that renders a React eye toggle in Shadow DOM.
  • A minimal managed popup built with React.

Why this tutorial matters​

It covers the most important HexaJS concepts for first-time extension authors:

  • Context boundaries (content vs popup vs background)
  • Proper lifecycle cleanup
  • Shadow DOM UI that does not clash with host-page CSS
  • Small, testable responsibilities in each class
  1. Read Create a Grayscale Extension
  2. Continue with Designing Popup
  3. Finish with Running and Debugging