connect.ui

Surface-level UI: resize your popup, add context-menu items, and drive the side panel. Each part has its own capability (or none).

• Capabilities: none (setPopupSize), contextMenus (ui.menus), sidePanel (ui.sidePanel)
• Namespace: connect.ui

Walkthrough

Add a right-click action and a fit-to-content popup.

1. For a context-menu item, declare contextMenus, then create the item at background boot and handle clicks:

   connect.ui.menus.create({ id: 'save', title: 'Save', contexts: ['link'] });
   connect.ui.menus.onClicked(({ menuItemId, linkUrl }) => menuItemId === 'save' && save(linkUrl));

2. For a popup that fits its content, call setPopupSize on resize (no capability).
3. For the side panel, declare sidePanel and open() / close() it.

ui.setPopupSize(size)

Resize the open action popup. No capability — it's your own surface. The shell clamps to the manifest bounds (150–800 × 100–600) and animates unless { animate: false }.

How to use it

1. In the popup, observe your content's size.
2. Call setPopupSize({ height }) (and/or width) as it grows.

Signature — connect.ui.setPopupSize({ width?, height?, animate? })

Parameters

Returns — Promise<void>.

new ResizeObserver(() =>
  connect.ui.setPopupSize({ height: document.body.scrollHeight })
).observe(document.body);

ui.menus — context menus

Contribute items to the browsing tab's right-click menu. Capability: contextMenus. Menu items are runtime state — recreate them at background boot.

📷

Screenshot

caption: An extension's item in the page right-click menu. Capture the browser context menu with the extension's entry.

drop the image at public/docs-img/extensions/context-menu.png

ui.menus.create(item)

How to use it

1. Recreate items at background boot (they don't persist).
2. Pass a unique id, a title, and the contexts it applies to.

Signature — connect.ui.menus.create({ id, title, contexts?, enabled? })

Parameters

Returns — Promise<void>.

ui.menus.update(item)

Update an item (Chrome-style, separate from create).

How to use it

1. Pass the item id with the fields to change.

Signature — connect.ui.menus.update({ id, title?, contexts?, enabled? }) · Returns Promise<void>.

ui.menus.remove(id) · ui.menus.removeAll()

Remove one item or all of them.

How to use it

1. remove(id) for one, removeAll() to clear yours.

Returns — Promise<void>.

ui.menus.onClicked(cb)

Fires when one of your items is clicked. Delivered to your extension only; wakes a suspended background.

How to use it

1. Subscribe once (at boot).
2. Branch on menuItemId; use linkUrl / selectionText / pageUrl from the payload.

Payload

connect.ui.menus.create({ id: 'save', title: 'Save with My Extension', contexts: ['link'] });
connect.ui.menus.onClicked(({ menuItemId, linkUrl }) => {
  if (menuItemId === 'save') save(linkUrl);
});

ui.sidePanel — the side panel

Own a docked panel surface. Capability: sidePanel.

Declare the surface in the manifest and every extension that has one gets a tab on the panel rail (the slim strip on the right edge of the window) — so users can open your panel directly, without you calling anything. Clicking the tab docks your panel as a drawer; clicking it again hides it. open() / close() are for driving it from code (e.g. opening it in response to a toolbar click).

"ui": { "sidePanel": { "entry": "panel.html" } },
"capabilities": ["sidePanel"]

📷

Screenshot

caption: The panel rail on the right edge with a tab per extension, and a docked side panel open. Capture the window with an extension side panel showing.

drop the image at public/docs-img/extensions/side-panel-rail.png

ui.sidePanel.open() · ui.sidePanel.close()

How to use it

1. Declare ui.sidePanel.entry in the manifest and the sidePanel capability.
2. open() / close() to show or hide the drawer from code — or let the user open it from the panel rail.

Signature — connect.ui.sidePanel.open() / connect.ui.sidePanel.close() · Returns Promise<void>.

connect.ui.sidePanel.open();

Notes

• Context-menu items don't persist across a background restart — recreate them from runtime.onInstalled / at boot.
• The side panel's content is a normal extension surface declared in ui.sidePanel.entry; this namespace only opens/closes it.