webext-dialog
v0.1.1
Published
Prompt popup library built for webextensions
Downloads
5
Readme
webext-dialog
A dialog service built with popups.
Installation
npm install webext-dialogPermission
This library doesn't use extra permissions. Only browser.tabs and browser.windows are used.
Usage examples
The dialog UI is built inside a popup. You have to create an HTML file and load the setup script. For example, create my-dialog.html:
<html>
<script type="module">
import "webext-dialog/popup"; // suppose your bundler can handle this correctly
</script>
</html>In extension scripts, you can use it like:
import {createDialogService} from "webext-dialog";
const dialog = createDialogService({path: "my-dialog.html"});
await dialog.alert("Alert");
console.log(await dialog.confirm("Are you sure?"));
console.log(await dialog.prompt("Write some text", "default value"));There are also pre-built bundles that can be included as scripts directly. Example:
my-dialog.html
<html>
<script src="path/to/webext-dialog/dist/browser/webext-dialog-popup.js"></script>
<html>manifest.json
{
background: {
scripts: [
"path/to/webext-dialog/dist/browser/webext-dialog.js",
"background.js"
]
}
}background.js
const dialog = webextDialog.createDialogService({ // access the module with global variable
path: "my-dialog.html"
});
await dialog.alert("Alert");API Reference
webext-dialog exports following members:
createDialogService- create a dialog service.
webext-dialog/popup exports nothing. By importing this module, it setups dialog UI and event handler that will work with the dialog service.
createDialogService
createDialogService({
path: String,
getMessage: (key: String) => String,
width?: Number,
height?: Number
}) => DialogServicepath should point to your popup HTML. See the usage part for more examples.
getMessage accepts a key and return an i18n string. This library uses following keys:
| Key | Default message | |--------|-----------------| | ok | OK | | cancel | Cancel |
width and height decides the size of the popup. Default: 520, 320.
DialogService
open
async open({
width?: Number,
height?: Number,
default?: any,
prompt?: Boolean,
buttons: Array<{text: String, value?: any}>,
message: String
}) => DialogResultwidth and height would overwrite default width and height.
default is the default value that will be returned when the popup is closed without clicking any button.
If prompt is true then display a <textarea> in the dialog.
buttons array is used to build button bar. text is the content of the button and value will be returned when clicked. If value is undefined and prompt is true, it will use the value of <textarea>.
message is the dialog message.
alert, confirm, prompt
async alert(text)
async confirm(text) => Boolean
async prompt(text, defaultValue) => String | nullThey work like builtin prompts.
Changelog
0.1.1 (Mar 11, 2021)
- Fix: packaging issue.
0.1.0 (Mar 11, 2021)
- First release.