vscode#Webview TypeScript Examples

The following examples show how to use vscode#Webview. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: util.ts    From vuerd-vscode with MIT License 7 votes vote down vote up 
export function getHtmlForWebview(
  webview: Webview,
  context: ExtensionContext
): string {
  const vuerdUri = webview.asWebviewUri(
    Uri.file(path.join(context.extensionPath, "static", "vuerd.min.js"))
  );
  const mainUri = webview.asWebviewUri(
    Uri.file(path.join(context.extensionPath, "static", "main.js"))
  );
  const nonce = getNonce();
  const cspSource = webview.cspSource;

  return /* html */ `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="Content-Security-Policy" 
      content="default-src * ${cspSource} https: 'unsafe-inline' 'unsafe-eval';
        script-src ${cspSource} blob: data: https: 'unsafe-inline' 'unsafe-eval' 'nonce-${nonce}';
        style-src ${cspSource} https: 'unsafe-inline';
        img-src ${cspSource} data: https:;
        connect-src ${cspSource} blob: data: https: http:;">          
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>vuerd</title>
    </head>
    <body>
      <script nonce="${nonce}" src=${vuerdUri}></script>
      <script nonce="${nonce}" src=${mainUri}></script>
    </body>
    </html>`;
}
Example #2
Source File: DrawioClientFactory.ts    From vscode-drawio with GNU General Public License v3.0 6 votes vote down vote up 
private getHtml(
		config: DiagramConfig,
		options: DrawioClientOptions,
		webview: Webview,
		plugins: { jsCode: string }[]
	): string {
		if (config.mode.kind === "offline") {
			return this.getOfflineHtml(config, options, webview, plugins);
		} else {
			return this.getOnlineHtml(config, config.mode.url);
		}
	}
Example #3
Source File: webviewView.ts    From vscode-todo-md with MIT License 6 votes vote down vote up 
/**
	 * Generate html template for webview.
	 */
	private _getHtmlForWebview(webview: Webview) {
		const JSUri = webview.asWebviewUri(Uri.joinPath(this._extensionUri, 'media', 'webview.js'));
		const CSSUri = webview.asWebviewUri(Uri.joinPath(this._extensionUri, 'media', 'webview.css'));
		const codiconCSSUri = webview.asWebviewUri(Uri.joinPath(this._extensionUri, 'media', 'vendor', 'codicon.css'));
		const nonce = getNonce();// Use a nonce to only allow a specific script to be run.

		const userCSSLink = $config.webview.customCSSPath ? `<link href="${webview.asWebviewUri(Uri.file($config.webview.customCSSPath))}" rel="stylesheet">` : '';

		return `<!DOCTYPE html>
			<html lang="en">
			<head>
				<meta charset="UTF-8">
				<meta name="viewport" content="width=device-width, initial-scale=1.0">
				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src 'unsafe-inline' ${webview.cspSource}; script-src 'nonce-${nonce}';">
				<link href="${codiconCSSUri}" rel="stylesheet" />
				<link href="${CSSUri}" rel="stylesheet">
				${userCSSLink}
				<title>Tasks</title>
			</head>
			<body>
				<div id="app"></div>
				<script defer nonce="${nonce}" src="${JSUri}"></script>
			</body>
			</html>`;
	}
Example #4
Source File: trivy_helpview.ts    From trivy-vscode-extension with Apache License 2.0 5 votes vote down vote up 
private view: Webview | undefined;
Example #5
Source File: DrawioClientFactory.ts    From vscode-drawio with GNU General Public License v3.0 5 votes vote down vote up 
private getOfflineHtml(
		config: DiagramConfig,
		options: DrawioClientOptions,
		webview: Webview,
		plugins: { jsCode: string }[]
	): string {
		const vsuri = webview.asWebviewUri(
			Uri.joinPath(this.extensionUri, "drawio/src/main/webapp")
		);
		const customPluginsPath = webview.asWebviewUri(
			// See webpack configuration.
			Uri.joinPath(
				this.extensionUri,
				"dist/custom-drawio-plugins/index.js"
			)
		);

		const localStorage = untracked(() => config.localStorage);

		// TODO use template engine
		// Prevent injection attacks by using JSON.stringify.
		const patchedHtml = html
			.replace(/\$\$literal-vsuri\$\$/g, vsuri.toString())
			.replace("$$theme$$", JSON.stringify(config.theme))
			.replace("$$lang$$", JSON.stringify(config.drawioLanguage))
			.replace(
				"$$chrome$$",
				JSON.stringify(options.isReadOnly ? "0" : "1")
			)
			.replace(
				"$$customPluginPaths$$",
				JSON.stringify([customPluginsPath.toString()])
			)
			.replace("$$localStorage$$", JSON.stringify(localStorage))
			.replace(
				"$$additionalCode$$",
				JSON.stringify(plugins.map((p) => p.jsCode))
			);
		return patchedHtml;
	}