Restore original functionality in webview API

Author: octref

src/extension.js

@@ -6,77 +6,81 @@ const { homedir } = require('os')
 
 const writeSerializedBlobToFile = (serializeBlob, fileName) => {
   const bytes = new Uint8Array(serializeBlob.split(','))
-  writeFileSync(fileName, new Buffer(bytes))
+  writeFileSync(fileName, Buffer.from(bytes))
 }
 
 const P_TITLE = 'Polacode 📸'
 
 /**
- * @param {vscode.ExtensionContext} context 
+ * @param {vscode.ExtensionContext} context
  */
 function activate(context) {
   const htmlPath = path.resolve(context.extensionPath, 'webview/index.html')
   const indexUri = vscode.Uri.file(htmlPath)
 
   let lastUsedImageUri = vscode.Uri.file(path.resolve(homedir(), 'Desktop/code.png'))
-  vscode.commands.registerCommand('polacode.shoot', serializedBlob => {
-    vscode.window
-      .showSaveDialog({
-        defaultUri: lastUsedImageUri,
-        filters: {
-          Images: ['png']
-        }
-      })
-      .then(uri => {
-        if (uri) {
-          writeSerializedBlobToFile(serializedBlob, uri.fsPath)
-          lastUsedImageUri = uri
-        }
-      })
-  })
+  let panel
 
   vscode.commands.registerCommand('polacode.activate', () => {
-    const panel = vscode.window.createWebviewPanel('polacode', P_TITLE, 2, {
+    panel = vscode.window.createWebviewPanel('polacode', P_TITLE, 2, {
       enableScripts: true,
-      localResourceRoots: [
-        vscode.Uri.file(path.join(context.extensionPath, 'webview'))
-      ]
-    });
-    
-    panel.webview.html = fs.readFileSync(htmlPath, 'utf-8')
+      localResourceRoots: [vscode.Uri.file(path.join(context.extensionPath, 'webview'))]
+    })
+
+    panel.webview.html = getHtmlContent(htmlPath)
 
-    // vscode.commands
-    //   .executeCommand('vscode.previewHtml', indexUri, 2, 'Polacode 📸', {
-    //     allowScripts: true,
-    //   })
-    //   .then(() => {
-    //     const fontFamily = vscode.workspace.getConfiguration('editor').fontFamily
-    //     const bgColor = context.globalState.get('polacode.bgColor', '#2e3440')
-    //     vscode.commands.executeCommand('_workbench.htmlPreview.postMessage', indexUri, {
-    //       type: 'init',
-    //       fontFamily,
-    //       bgColor
-    //     })
-    //   })
+    panel.webview.onDidReceiveMessage(({ type, data }) => {
+      switch (type) {
+        case 'shoot':
+          vscode.window
+            .showSaveDialog({
+              defaultUri: lastUsedImageUri,
+              filters: {
+                Images: ['png']
+              }
+            })
+            .then(uri => {
+              if (uri) {
+                writeSerializedBlobToFile(data.serializedBlob, uri.fsPath)
+                lastUsedImageUri = uri
+              }
+            })
+          break
+        case 'updateBgColor':
+          context.globalState.update('polacode.bgColor', data.bgColor)
+          break
+        case 'invalidPasteContent':
+          vscode.window.showInformationMessage(
+            'Pasted content is invalid. Only copy from VS Code and check if your shortcuts for copy/paste have conflicts.'
+          )
+          break
+      }
+    })
+
+    const fontFamily = vscode.workspace.getConfiguration('editor').fontFamily
+    const bgColor = context.globalState.get('polacode.bgColor', '#2e3440')
+    panel.webview.postMessage({
+      type: 'init',
+      fontFamily,
+      bgColor
+    })
   })
 
   vscode.window.onDidChangeTextEditorSelection(e => {
     if (e.selections[0] && !e.selections[0].isEmpty) {
       vscode.commands.executeCommand('editor.action.clipboardCopyAction')
-      vscode.commands.executeCommand('_workbench.htmlPreview.postMessage', indexUri, {
+      panel.postMessage({
         type: 'update'
       })
     }
   })
+}
 
-  vscode.commands.registerCommand('polacode._onmessage', ({ type, data }) => {
-    if (type === 'updateBgColor') {
-      context.globalState.update('polacode.bgColor', data.bgColor)
-    } else if (type === 'invalidPasteContent') {
-      vscode.window.showInformationMessage(
-        'Pasted content is invalid. Only copy from VS Code and check if your shortcuts for copy/paste have conflicts.'
-      )
-    }
+function getHtmlContent(htmlPath) {
+  const htmlContent = fs.readFileSync(htmlPath, 'utf-8')
+  return htmlContent.replace(/script src="([^"]*)"/g, (match, src) => {
+    const realSource = 'vscode-resource:' + path.resolve(htmlPath, '..', src)
+    return `script src="${realSource}"`
   })
 }
 

webview/index.html

@@ -1,6 +1,9 @@
 <html>
 <head>
-  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' https: data:; media-src 'none'; child-src 'self'; object-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; connect-src 'self' https:; font-src 'self' https:;">
+  <meta
+    http-equiv="Content-Security-Policy"
+    content="img-src vscode-resource: data: https:; script-src vscode-resource:; style-src 'unsafe-inline' vscode-resource:;"
+  />
   <style>
     html {
       box-sizing: border-box;