@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
// ...
Copy

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

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

Toast

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

// Manually close it
toast.close();
Copy

Panel

const panel = VM.getPanel({
  content: VM.h('div', {}, 'This is a panel'),
  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);
Copy

SolidJS

It is recommended to initialize a userscript project using generator-userscript and use solid-js.

import { render } from 'solid-js/web';

const panel = VM.getPanel({ theme: 'light' });
panel.wrapper.style.top = '100px';
render(() => <MyPanel />, panel.body);
panel.show();
Copy

JSX for @violentmonkey/dom

Not recommended as it is not compatible with solid-js integrated in generator-userscript.

Use with JSX and bundlers, for example:

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

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

API