Write a toolbar

// ==BundlewareToolbar==
// @id my-counter
// @name My Counter
// @version 1.0.0
// @description A small local counter.
// @match <all_urls>
// @api 2
// ==/BundlewareToolbar==

const { Toolbar, Action, Icon, store, useStore } = Bundleware;

const counter = store({ count: 0 });

function MyCounter() {
  const [state, setState] = useStore(counter);
  return (
    <Toolbar icon={Icon.Palette} theme={{ brandColor: '#315b87' }}>
      <Toolbar.Button title={`Count: ${state.count}`} icon={Icon.Sound} onAction={() => setState({ count: state.count + 1 })} />
      <Toolbar.Button title="Details" action={<Action.OpenWindow title="Counter" target={<Details />} />} />
    </Toolbar>
  );
}

function Details(props) {
  const [state] = useStore(counter);
  return <><p>Clicked {state.count} times.</p><button onClick={props.close}>Done</button></>;
}

Bundleware.defineToolbar(<MyCounter />);