@violentmonkey/ui

Common UI for userscripts, working in Violentmonkey as well as other userscript managers.

Dependencies

• @violentmonkey/dom

Usage

First, include dependencies:

// ...
// @require https://cdn.jsdelivr.net/combine/npm/@violentmonkey/dom@2,npm/@violentmonkey/ui@0.7
// ...

Then use it like so, all exports can be accessed under namespace VM:

VM.showToast('hello');
VM.showToast(VM.h('div', {}, 'hello, world'));

Or use with JSX and bundlers, for example:

// .babelrc.js
{
  plugins: [
    // JSX
    ['@babel/plugin-transform-react-jsx', {
      pragma: 'VM.h',
      pragmaFrag: 'VM.Fragment',
    }],
  ],
}

VM.showToast(<div>hello, world</div>);

To initialize a project for userscript with JSX support, try generator-userscript:

$ mkdir my-script
$ cd my-script
$ npx -p https://github.com/violentmonkey/generator-userscript.git -p yo yo @violentmonkey/userscript

Toast

const toast = VM.showToast(<div>hello</div>, {
  theme: 'dark', // or 'light'
  duration: 2000, // or 0 to manually close it
});

// Manually close it
toast.close();

Panel

const panel = VM.getPanel({
  content: <div>This is a panel</div>,
  theme: 'light',
});
panel.wrapper.style.top = '100px';

// Show panel
panel.show();

// Hide panel
panel.hide();

// Allow panel to be moved by mouse dragging
panel.setMovable(true);

API

See the documentation.