WebView Plugin API
The WebView Plugin API allows plugins to create and manage isolated WebView instances. Each WebView runs in its own execution context, separate from the main editor UI, preventing conflicts between plugin code and the host application.
Plugins have full control over the content and JavaScript executed inside the WebView,
Features:
-
Create multiple independent WebView instances.
-
Run WebViews in an isolated context.
-
Full control over HTML, CSS, and JavaScript.
-
Show WebViews as:
-
Full-screen views
-
Floating windows
-
Hidden/background instances
Bidirectional communication between the plugin and WebView
-
Execute JavaScript inside the WebView.
-
Load local files, remote URLs, or dynamically generated content.
-
Manage WebView lifecycle (create, show, hide, destroy).
Creating a WebView
const webview = await acode.webview.create({
title: "My App",
mode: "fullscreen"
});
Options
interface WebViewOptions {
title?: string;
mode?: "fullscreen" | "window" | "panel" | "hidden";
width?: number;
height?: number;
x?: number;
y?: number;
allowNavigation?: boolean;
allowDownloads?: boolean;
visible?: boolean;
}
Loading a URL
await webview.loadURL("https://example.com");
Loading HTML
await webview.loadHTML(`
<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
</body>
</html>
`);
Executing JavaScript
const result = await webview.evaluate(`
document.title = "Updated";
2 + 2;
`);
console.log(result); // 4
Plugin ↔ WebView Communication
Plugin Side
webview.onMessage((message) => {
console.log("Received:", message);
});
webview.postMessage({
type: "hello",
text: "Hello from plugin"
});WebView Side
window.webview.onMessage((message) => {
console.log(message);
});
window.webview.postMessage({
type: "ready"
});
Background WebViews
A hidden WebView can be used to run web applications, workers, or scripts without displaying UI.
const workerView = await acode.webview.create({
mode: "hidden"
});
await workerView.loadURL(
"https://example.com/background-task"
);Show it later:
Hide it again:
Floating Window Example
const webview = await acode.webview.create({
title: "Inspector",
mode: "window",
width: 500,
height: 400
});
await webview.loadURL(
"https://example.com"
);
Full-Screen Application Example
const app = await acode.webview.create({
title: "Markdown Preview",
mode: "fullscreen"
});
await app.loadHTML(`
<!DOCTYPE html>
<html>
<body>
<h1>Preview</h1>
</body>
</html>
`);
Lifecycle Management
webview.show();
webview.hide();
webview.reload();
webview.destroy();
WebView Plugin API
The WebView Plugin API allows plugins to create and manage isolated WebView instances. Each WebView runs in its own execution context, separate from the main editor UI, preventing conflicts between plugin code and the host application.
Plugins have full control over the content and JavaScript executed inside the WebView,
Features:
Create multiple independent WebView instances.
Run WebViews in an isolated context.
Full control over HTML, CSS, and JavaScript.
Show WebViews as:
Full-screen views
Floating windows
Hidden/background instances
Bidirectional communication between the plugin and WebView
Execute JavaScript inside the WebView.
Load local files, remote URLs, or dynamically generated content.
Manage WebView lifecycle (create, show, hide, destroy).
Creating a WebView
Loading a URL
Loading HTML
Executing JavaScript
Plugin ↔ WebView Communication
Plugin Side
WebView Side
Background WebViews
A hidden WebView can be used to run web applications, workers, or scripts without displaying UI.
Show it later:
Hide it again:
Floating Window Example
Full-Screen Application Example
Lifecycle Management