@violentmonkey/ui

!License

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

Dependencies

- @violentmonkey/dom

Usage

First, include dependencies:

``js
// ...
// @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:

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

$3

`js
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();
`

$3

`js
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);
`

$3

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

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

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

$3

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

Use with JSX and bundlers, for example:

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

`js
VM.showToast(

);
``

API