Skip to main content

Popup

Enable managed popup​

In hexa-cli.config.json:

{
  "ui": {
    "popup": {
      "mode": "managed",
      "sourceDir": "ui/popup",
      "indexFile": "index.html",
      "icons": "src/assets/clip-volt-2.svg"
    }
  }
}

sourceDir points to the popup source folder. indexFile is the built HTML entry used in the manifest pipeline. parallelBuild defaults to true and runs managed popup + devtools builds in parallel during standard builds. Set parallelBuild to false to force sequential managed UI builds.

Load state from background​

import { inject } from '@hexajs-dev/common';
import { HexaUIClient } from '@hexajs-dev/ui';
import { configApi } from './api';
import { ConfigResponseMessage, GetConfigMessage } from './messages';

const hexaUIClient = inject(HexaUIClient);
const response = await hexaUIClient.sendMessage<GetConfigMessage, ConfigResponseMessage>(
  configApi.Get,
  new GetConfigMessage(Date.now())
);

if (response && !hasHexaError(response) && response.config) {
  setConfig(response.config);
}

Send partial updates​

import { inject } from '@hexajs-dev/common';
import { HexaUIClient } from '@hexajs-dev/ui';
import { configApi } from './api';
import { ConfigResponseMessage, UpdateConfigMessage } from './messages';

const hexaUIClient = inject(HexaUIClient);

hexaUIClient.sendMessage<UpdateConfigMessage, ConfigResponseMessage>(
  configApi.Update,
  new UpdateConfigMessage({ theme: 'dark' })
);

Use this pattern for popup-driven settings changes, commands, or one-off requests to background.

Notes​

  • Keep business state in background/content stores.
  • Popup should render state returned from messaging calls.
  • Prefer small request/response snippets in docs and examples rather than copying an entire popup component.