bingyi/vscode-extension-samples
1
0
Fork 0
mirror of https://github.com/microsoft/vscode-extension-samples.git synced 2026-04-27 16:55:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Use asWebviewUri instead of vscode-resource directly

Browse Source
This commit is contained in:
Matt Bierner
2019-09-13 16:37:37 -07:00
parent 104c10a3f2
commit 708bc30908
3 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
webview-sample/package-lock.json generated
View File

@ -31,9 +31,9 @@
"dev": true
},
"@types/vscode": {
"version": "1.33.0",
"resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.33.0.tgz",
"integrity": "sha512-JSmGiValbrcG5g20jjCfKakLiuWyrcjVezj+SEAEZ4klXQktE5EtowuGlkLVqbkiBK4iY5wy/4yW8OjecuHnjQ==",
"version": "1.38.0",
"resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.38.0.tgz",
"integrity": "sha512-aGo8LQ4J1YF0T9ORuCO+bhQ5sGR1MXa7VOyOdEP685se3wyQWYUExcdiDi6rvaK61KUwfzzA19JRLDrUbDl7BQ==",
"dev": true
},
"ansi-styles": {

4
webview-sample/package.json
View File

@ -4,7 +4,7 @@
"version": "0.0.1",
"publisher": "vscode-samples",
"engines": {
"vscode": "^1.32.0"
"vscode": "^1.38.0"
},
"categories": [
"Other"
@ -44,6 +44,6 @@
"@types/node": "^10.5.2",
"tslint": "^5.16.0",
"typescript": "^3.5.1",
"@types/vscode": "^1.32.0"
"@types/vscode": "^1.38.0"
}
}

21
webview-sample/src/extension.ts
View File

@ -137,37 +137,38 @@ class CatCodingPanel {
}
private _update() {
const z = 1 + 2;
const webview = this._panel.webview;
// Vary the webview's content based on where it is located in the editor.
switch (this._panel.viewColumn) {
case vscode.ViewColumn.Two:
this._updateForCat('Compiling Cat');
this._updateForCat(webview, 'Compiling Cat');
return;
case vscode.ViewColumn.Three:
this._updateForCat('Testing Cat');
this._updateForCat(webview, 'Testing Cat');
return;
case vscode.ViewColumn.One:
default:
this._updateForCat('Coding Cat');
this._updateForCat(webview, 'Coding Cat');
return;
}
}
private _updateForCat(catName: keyof typeof cats) {
private _updateForCat(webview: vscode.Webview, catName: keyof typeof cats) {
this._panel.title = catName;
this._panel.webview.html = this._getHtmlForWebview(cats[catName]);
this._panel.webview.html = this._getHtmlForWebview(webview, cats[catName]);
}
private _getHtmlForWebview(catGif: string) {
private _getHtmlForWebview(webview: vscode.Webview, catGifPath: string) {
// Local path to main script run in the webview
const scriptPathOnDisk = vscode.Uri.file(
path.join(this._extensionPath, 'media', 'main.js')
);
// And the uri we use to load this script in the webview
const scriptUri = scriptPathOnDisk.with({ scheme: 'vscode-resource' });
const scriptUri = webview.asWebviewUri(scriptPathOnDisk);
// Use a nonce to whitelist which scripts can be run
const nonce = getNonce();
@ -181,13 +182,13 @@ class CatCodingPanel {
Use a content security policy to only allow loading images from https or from our extension directory,
and only allow scripts that have a specific nonce.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}';">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cat Coding</title>
</head>
<body>
<img src="${catGif}" width="300" />
<img src="${catGifPath}" width="300" />
<h1 id="lines-of-code-counter">0</h1>
<script nonce="${nonce}" src="${scriptUri}"></script>