diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
index 57f4ea6..a389d5b 100644
--- a/.github/workflows/CI.yml
+++ b/.github/workflows/CI.yml
@@ -65,13 +65,13 @@ jobs:
# Linux x86_64
- os: ubuntu-latest
target: x86_64-unknown-linux-gnu
- sys_deps: pkg-config libwebkit2gtk-4.1-dev libsoup-3.0-dev libglib2.0-dev libcairo2-dev libpango1.0-dev libatk1.0-dev libgdk-pixbuf2.0-dev libgtk-3-dev
+ sys_deps: pkg-config libwebkit2gtk-4.1-dev libsoup-3.0-dev libglib2.0-dev libcairo2-dev libpango1.0-dev libatk1.0-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxdo-dev
# Linux ARM64
- os: ubuntu-latest
target: aarch64-unknown-linux-gnu
cross_arch: arm64
- cross_sys_deps: libglib2.0-dev:arm64 libwebkit2gtk-4.1-dev:arm64 libsoup-3.0-dev:arm64 libcairo2-dev:arm64 libpango1.0-dev:arm64 libatk1.0-dev:arm64 libgdk-pixbuf2.0-dev:arm64 libgtk-3-dev:arm64
+ cross_sys_deps: libglib2.0-dev:arm64 libwebkit2gtk-4.1-dev:arm64 libsoup-3.0-dev:arm64 libcairo2-dev:arm64 libpango1.0-dev:arm64 libatk1.0-dev:arm64 libgdk-pixbuf2.0-dev:arm64 libgtk-3-dev:arm64 libxdo-dev:arm64
cross_gcc: gcc-aarch64-linux-gnu
cross_gpp: g++-aarch64-linux-gnu
cross_triplet: aarch64-linux-gnu
@@ -91,7 +91,7 @@ jobs:
- os: ubuntu-latest
target: armv7-unknown-linux-gnueabihf
cross_arch: armhf
- cross_sys_deps: libglib2.0-dev:armhf libwebkit2gtk-4.1-dev:armhf libsoup-3.0-dev:armhf libcairo2-dev:armhf libpango1.0-dev:armhf libatk1.0-dev:armhf libgdk-pixbuf2.0-dev:armhf libgtk-3-dev:armhf
+ cross_sys_deps: libglib2.0-dev:armhf libwebkit2gtk-4.1-dev:armhf libsoup-3.0-dev:armhf libcairo2-dev:armhf libpango1.0-dev:armhf libatk1.0-dev:armhf libgdk-pixbuf2.0-dev:armhf libgtk-3-dev:armhf libxdo-dev:armhf
cross_gcc: gcc-arm-linux-gnueabihf
cross_gpp: g++-arm-linux-gnueabihf
cross_triplet: arm-linux-gnueabihf
diff --git a/Cargo.toml b/Cargo.toml
index 7986885..7f120d3 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -15,6 +15,9 @@ napi-derive = "3.5.1"
tao = { version = "0.34.5", features = ["rwh_06"] }
wry = { version = "0.53.5", features = ["devtools", "fullscreen"] }
+[target.'cfg(not(target_os = "android"))'.dependencies]
+muda = { version = "0.17", features = ["libxdo"] }
+
[target.'cfg(target_os = "linux")'.dependencies]
gtk = "0.18"
glib = "0.18"
diff --git a/README.md b/README.md
index 2ac6fd1..dd8a0eb 100644
--- a/README.md
+++ b/README.md
@@ -17,15 +17,20 @@ npm install @webviewjs/webview
# Supported platforms
-| Platform | Supported |
-| ----------------------- | --------- |
-| x86_64-apple-darwin | ✅ |
-| x86_64-pc-windows-msvc | ✅ |
-| i686-pc-windows-msvc | ✅ |
-| aarch64-apple-darwin | ✅ |
-| aarch64-linux-android | ✅ |
-| armv7-linux-androideabi | ✅ |
-| aarch64-pc-windows-msvc | ✅ |
+| Platform | Supported |
+| ---------------------------- | --------- |
+| x86_64-pc-windows-msvc | ✅ |
+| i686-pc-windows-msvc | ✅ |
+| aarch64-pc-windows-msvc | ✅ |
+| x86_64-apple-darwin | ✅ |
+| aarch64-apple-darwin | ✅ |
+| x86_64-unknown-linux-gnu | ✅ |
+| i686-unknown-linux-gnu | ✅ |
+| aarch64-unknown-linux-gnu | ✅ |
+| armv7-unknown-linux-gnueabihf| ✅ |
+| aarch64-linux-android | ✅ |
+| armv7-linux-androideabi | ✅ |
+| x86_64-unknown-freebsd | ✅ |
# Examples
@@ -45,6 +50,129 @@ webview.loadUrl('https://nodejs.org');
app.run();
```
+## Menu System
+
+WebviewJS provides a cross-platform menu system that works on macOS, Windows, and Linux.
+
+### Basic Menu Setup
+
+```js
+import { Application, initMenuSystem } from '@webviewjs/webview';
+
+// Initialize menu system (recommended, especially for macOS)
+initMenuSystem();
+
+const app = new Application();
+
+// Set global application menu
+app.setMenu({
+ items: [
+ {
+ label: "File",
+ submenu: {
+ items: [
+ { id: "new", label: "New", accelerator: "CmdOrCtrl+N" },
+ { id: "open", label: "Open", accelerator: "CmdOrCtrl+O" },
+ { role: "separator" },
+ { id: "quit", label: "Quit", accelerator: "CmdOrCtrl+Q" }
+ ]
+ }
+ },
+ {
+ label: "Edit",
+ submenu: {
+ items: [
+ { role: "copy" },
+ { role: "paste" },
+ { role: "cut" },
+ { role: "selectall" }
+ ]
+ }
+ }
+ ]
+});
+
+const window = app.createBrowserWindow();
+const webview = window.createWebview({ url: 'https://nodejs.org' });
+
+app.run();
+```
+
+### Menu Event Handling
+
+```js
+import { Application, WebviewApplicationEvent } from '@webviewjs/webview';
+
+const app = new Application();
+
+// Handle menu events
+app.bind((event) => {
+ if (event.event === WebviewApplicationEvent.CustomMenuClick) {
+ const menuEvent = event.customMenuEvent;
+ console.log(`Menu item clicked: ${menuEvent.id}`);
+ console.log(`From window: ${menuEvent.windowId}`);
+
+ // Handle specific menu items
+ switch (menuEvent.id) {
+ case 'new':
+ console.log('Creating new document...');
+ break;
+ case 'open':
+ console.log('Opening file...');
+ break;
+ case 'quit':
+ app.exit();
+ break;
+ }
+ }
+});
+
+// Set up menu...
+app.setMenu({ /* ... */ });
+```
+
+### Window-Specific Menus
+
+```js
+const app = new Application();
+
+// Create window with custom menu
+const window = app.createBrowserWindow({
+ title: "Custom Window",
+ menu: {
+ items: [
+ {
+ id: "window-action",
+ label: "Window Action",
+ accelerator: "Ctrl+W"
+ }
+ ]
+ }
+});
+
+// Or check if window has a menu
+if (window.hasMenu()) {
+ console.log('This window has a menu');
+}
+```
+
+### Menu Item Options
+
+- **`id`**: Unique identifier for the menu item (used in events)
+- **`label`**: Display text for the menu item
+- **`enabled`**: Whether the item is clickable (default: true)
+- **`accelerator`**: Keyboard shortcut (e.g., "CmdOrCtrl+N", "Alt+F4")
+- **`submenu`**: Nested menu items
+- **`role`**: Predefined menu items with built-in behavior
+
+### Predefined Menu Roles
+
+- **`"copy"`**: Standard copy action
+- **`"paste"`**: Standard paste action
+- **`"cut"`**: Standard cut action
+- **`"selectall"`**: Select all text action
+- **`"separator"`**: Visual separator line
+
## IPC
```js
@@ -120,7 +248,15 @@ webview.reload();
For more details on closing applications and cleaning up resources, see the [Closing Guide](./docs/CLOSING_GUIDE.md).
-Check out [examples](./examples) directory for more examples, such as serving contents from a web server to webview, etc.
+Check out [examples](./examples) directory for more examples:
+
+- **[menu-system.mjs](./examples/menu-system.mjs)** - Comprehensive menu system demonstration with all features
+- **[window-menus.mjs](./examples/window-menus.mjs)** - Window-specific vs global menu examples
+- **[http/](./examples/http/)** - Serving content from a web server to webview
+- **[transparent.mjs](./examples/transparent.mjs)** - Transparent window example
+- **[close-example.mjs](./examples/close-example.mjs)** - Graceful application closing
+
+Run any example with: `node examples/menu-system.mjs` (after building the project)
# Building executables
@@ -141,7 +277,7 @@ You can pass `--resources ./my-resource.json` to include additional resources in
- [Bun](https://bun.sh/) >= 1.3.0
- [Rust](https://www.rust-lang.org/) stable toolchain
-- [Node.js](https://nodejs.org/) >= 18 (for testing)
+- [Node.js](https://nodejs.org/) >= 24 (for testing)
## Setup
diff --git a/examples/menu-system.mjs b/examples/menu-system.mjs
new file mode 100644
index 0000000..52b7eb5
--- /dev/null
+++ b/examples/menu-system.mjs
@@ -0,0 +1,296 @@
+import { Application, initMenuSystem, WebviewApplicationEvent } from '../index.js';
+
+// Initialize menu system (recommended, especially for macOS)
+initMenuSystem();
+
+const app = new Application();
+
+// Set up menu event handler
+app.bind((event) => {
+ if (event.event === WebviewApplicationEvent.CustomMenuClick) {
+ const menuEvent = event.customMenuEvent;
+ console.log(`Menu item clicked: "${menuEvent.id}" from window ${menuEvent.windowId}`);
+
+ // Handle specific menu items
+ switch (menuEvent.id) {
+ case 'new':
+ console.log('📄 Creating new document...');
+ break;
+ case 'open':
+ console.log('📂 Opening file...');
+ break;
+ case 'save':
+ console.log('💾 Saving file...');
+ break;
+ case 'about':
+ console.log('ℹ️ About this application...');
+ break;
+ case 'preferences':
+ console.log('⚙️ Opening preferences...');
+ break;
+ case 'quit':
+ console.log('👋 Goodbye!');
+ app.exit();
+ break;
+ case 'reload':
+ console.log('🔄 Reloading webview...');
+ // In a real app, you would reload the webview here
+ break;
+ case 'devtools':
+ console.log('🔧 Opening developer tools...');
+ // In a real app, you would toggle devtools here
+ break;
+ default:
+ console.log(`Unhandled menu item: ${menuEvent.id}`);
+ }
+ } else if (event.event === WebviewApplicationEvent.ApplicationCloseRequested) {
+ console.log('Application close requested');
+ app.exit();
+ } else if (event.event === WebviewApplicationEvent.WindowCloseRequested) {
+ console.log('Window close requested');
+ }
+});
+
+// Set up comprehensive application menu
+app.setMenu({
+ items: [
+ // File menu
+ {
+ label: "File",
+ submenu: {
+ items: [
+ {
+ id: "new",
+ label: "New",
+ accelerator: "CmdOrCtrl+N",
+ enabled: true
+ },
+ {
+ id: "open",
+ label: "Open...",
+ accelerator: "CmdOrCtrl+O"
+ },
+ { role: "separator" },
+ {
+ id: "save",
+ label: "Save",
+ accelerator: "CmdOrCtrl+S"
+ },
+ {
+ id: "save-as",
+ label: "Save As...",
+ accelerator: "CmdOrCtrl+Shift+S"
+ },
+ { role: "separator" },
+ {
+ id: "quit",
+ label: "Quit",
+ accelerator: "CmdOrCtrl+Q"
+ }
+ ]
+ }
+ },
+
+ // Edit menu with predefined roles
+ {
+ label: "Edit",
+ submenu: {
+ items: [
+ { role: "cut" },
+ { role: "copy" },
+ { role: "paste" },
+ { role: "selectall" },
+ { role: "separator" },
+ {
+ id: "preferences",
+ label: "Preferences...",
+ accelerator: "CmdOrCtrl+,"
+ }
+ ]
+ }
+ },
+
+ // View menu
+ {
+ label: "View",
+ submenu: {
+ items: [
+ {
+ id: "reload",
+ label: "Reload",
+ accelerator: "CmdOrCtrl+R"
+ },
+ {
+ id: "devtools",
+ label: "Developer Tools",
+ accelerator: "F12"
+ },
+ { role: "separator" },
+ {
+ label: "Zoom",
+ submenu: {
+ items: [
+ {
+ id: "zoom-in",
+ label: "Zoom In",
+ accelerator: "CmdOrCtrl+Plus"
+ },
+ {
+ id: "zoom-out",
+ label: "Zoom Out",
+ accelerator: "CmdOrCtrl+-"
+ },
+ {
+ id: "zoom-reset",
+ label: "Actual Size",
+ accelerator: "CmdOrCtrl+0"
+ }
+ ]
+ }
+ }
+ ]
+ }
+ },
+
+ // Help menu
+ {
+ label: "Help",
+ submenu: {
+ items: [
+ {
+ id: "about",
+ label: "About Menu Example"
+ },
+ {
+ id: "docs",
+ label: "Documentation",
+ accelerator: "F1"
+ }
+ ]
+ }
+ }
+ ]
+});
+
+console.log('🎯 Menu System Example');
+console.log('📋 Try the following:');
+console.log(' • Click on menu items to see event handling');
+console.log(' • Use keyboard shortcuts (Ctrl+N, Ctrl+O, etc.)');
+console.log(' • Try copy/paste with Ctrl+C/Ctrl+V');
+console.log(' • Use Ctrl+Q or File > Quit to exit');
+console.log('');
+
+// Create main window
+const window = app.createBrowserWindow({
+ title: "Menu System Example",
+ width: 800,
+ height: 600
+});
+
+// Create webview with example content
+const webview = window.createWebview({
+ html: `
+
+
+ Menu System Example
+
+
+
+
+
🎯 Menu System Example
+
This example demonstrates the cross-platform menu system in WebviewJS.
+
+
📋 Available Menus:
+
+
+
+
+
+
+
+
+
+
✨ Try It Out:
+
1. Click on the menu items above to trigger events
+
2. Use keyboard shortcuts for quick access
+
3. Test copy/paste with the text area below:
+
+
+
+
Check the console to see menu events being handled!
+
+
🌟 Features Demonstrated:
+
+ - ✅ Cross-platform menu system
+ - ✅ Keyboard accelerators/shortcuts
+ - ✅ Nested submenus
+ - ✅ Predefined menu roles (copy, paste, etc.)
+ - ✅ Custom menu items with IDs
+ - ✅ Menu event handling and dispatch
+ - ✅ Menu separators
+ - ✅ Enabled/disabled menu items
+
+
+
🪟 Window 1
+
Custom Menu:
+
• Window 1 → Window 1 Action (Ctrl+1)
+
• Window 1 → Close Window (Ctrl+W)
+
• Edit → Copy, Paste
+
+
This window has its own menu!
+
Try the menu items above 👆
+
+
🪟 Window 2
+
Different Menu:
+
• Window 2 → Window 2 Action (Ctrl+2)
+
• Window 2 → Close Window (Ctrl+W)
+
• Tools → Select All, Special Tool
+
+
This window has a different menu!
+
Compare with Window 1 👈
+
+
🌍 Window 3
+
Global Menu:
+
• App → Global Action (Ctrl+G)
+
• App → Quit (Ctrl+Q)
+
+
This window uses the global menu!
+
Set with app.setMenu()
+