1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
| import * as vscode from "vscode";
const path = require("path");
const fs = require("fs");
class PagCustomDocument implements vscode.CustomDocument {
uri: vscode.Uri;
constructor(uri: vscode.Uri) {
this.uri = uri;
}
dispose(): void {
// 如果需要清理资源，可以在这里实现
}
}
class PagCustomEditorProvider
implements vscode.CustomReadonlyEditorProvider<PagCustomDocument>
{
public static readonly viewType = "pagViewer.editor";
constructor(private readonly context: vscode.ExtensionContext) {}
/**
* openCustomDocument 方法，用于打开自定义文档
*/
public openCustomDocument(
uri: vscode.Uri,
_openContext: vscode.CustomDocumentOpenContext,
_token: vscode.CancellationToken
): vscode.CustomDocument | Thenable<vscode.CustomDocument> {
// 创建并返回自定义文档实例
return new PagCustomDocument(uri);
}
/**
* resolveCustomEditor 方法，在文件被打开时触发
*/
public async resolveCustomEditor(
document: PagCustomDocument,
webviewPanel: vscode.WebviewPanel,
_token: vscode.CancellationToken
): Promise<void> {
console.log(`Opening file: ${document.uri.fsPath}`);
// vscode指令通信
vscode.commands.executeCommand("pagViewer.fileDetail", document.uri);
// 设置 Webview 选项
webviewPanel.webview.options = {
enableScripts: true,
// localResourceRoots作用：防止 WebView 意外访问到插件不该访问的本地文件系统区域。只有处在 localResourceRoots 所列出的目录中的资源，才可以被 WebView 加载，这有助于保障用户系统的安全，避免恶意代码利用 WebView 越界访问敏感文件
localResourceRoots: [
vscode.Uri.file(path.join(this.context.extensionPath, "dist")),
vscode.Uri.file(path.dirname(document.uri.fsPath)),
],
};
// 关键：将文件 URI 转为 Webview 可访问的路径
const fileUri = webviewPanel.webview.asWebviewUri(document.uri);
// console.log("uri--", fileUri.toString()); https://file%2B.vscode-resource.vscode-cdn.net/Users/xxx/vscode/pag-preview/dist/webview/pag.min.js
const htmlPath = path.join(
this.context.extensionPath,
"dist/webview/pag.html"
);
// console.log("htmlPath", htmlPath);
// 解析html内容
const htmlContent = fs.readFileSync(htmlPath, "utf-8");
const fastDiffUri = webviewPanel.webview.asWebviewUri(
vscode.Uri.file(
path.join(this.context.extensionPath, "dist/webview/pag.min.js")
)
);
const updatedHtmlContent = htmlContent.replace("./pag.min.js", fastDiffUri);
// 设置 Webview 内容
webviewPanel.webview.html = updatedHtmlContent;
// 将文件内容发送到 Webview
webviewPanel.webview.postMessage({
type: "loadFile",
fileUri: fileUri.toString(),
});
// 监听来自 Webview 的消息
webviewPanel.webview.onDidReceiveMessage((message) => {
if (message.command === "alert") {
vscode.window.showInformationMessage(message.text);
}
});
// 处理自定义编辑器生命周期
webviewPanel.onDidDispose(() => {
console.log('pag文件关闭');
vscode.commands.executeCommand("pagViewer.fileDetail");
});
}
}
export default (context: vscode.ExtensionContext) => {
console.log("PAG Custom Editor Activated!");
let disposable = vscode.window.registerCustomEditorProvider(
PagCustomEditorProvider.viewType,
new PagCustomEditorProvider(context),
{
webviewOptions: {
retainContextWhenHidden: false, // 切换标签时保留上下文
},
}
);
return disposable;
};
|
