一、前言
在VSCode市场上搜索一个PDF阅读插件，找到了下载量最高的插件。在检查了插件的源代码之后，发现它直接嵌入了pdf.js的Web界面。
图片
开发这样的插件并不复杂，只需要一些插件开发的知识。
接下来，将在这里与大家分享这个插件是如何开发的。虽然与源代码可能有些许不同，但基本原理是相同的。
二、定义自定义编辑器
默认情况下，VSCode不直接支持查看某些特定类型的文件。但是，你可以通过使用自定义编辑器（customerEditors）来扩展其功能。
通过customerEditors，你可以创建完全可自定义的读/写编辑器，以替换VSCode的标准文本编辑器，用于处理特定类型的资源。
例如，在编辑Markdown文件时，可以创建一个自定义编辑器，从而实时预览Markdown的渲染效果。
对于PDF文件的预览，同样也可以使用customerEditors功能。
首先，在插件的pacakge.json文件中定义它：
"contributes": {
"customEditors": [
{
"viewType": "dodo-reader.pdfEditor",
"displayName": "PDF Viewer",
"selector": [
{
"filenamePattern": "*.pdf"
}
]
}
]
}三、注册自定义编辑器
创建一个实现vscode.CustomEditorProvider接口的类。该接口包含了用于管理自定义编辑器（例如打开和保存）的方法。例如：
class PdfEditorProvider implements Partial {
constructor() {
// 可在此处进行初始化操作
}
resolveCustomEditor(document: CustomDocument, webviewPanel: WebviewPanel, _token: CancellationToken) {
// 基于URI创建一个自定义文档，并返回一个自定义文档对象
}
openCustomDocument(uri: vscode.Uri, openContext: vscode.CustomDocumentOpenContext, token: vscode.CancellationToken) {
// 将自定义文档与Webview面板关联，并处理编辑器内容与Webview之间的交互
}
}
// 注册你的提供程序
const myProvider = new PdfEditorProvider();
const disposable = vscode.window.registerCustomEditorProvider('dodo-reader.pdfEditor', myProvider);
context.subscriptions.push(disposable);四、改进视图提供程序
如上所述注册自定义编辑器之后，下一步就是加强PdfEditorProvider接口，以定义视图的显示方式。
显示涉及使用网络视图，而你将使用pdf.js的Web视图程序。首先，下载预构建的程序（现代浏览器），并将其提取到你的项目目录中。
图片
这个程序可以直接在浏览器中访问。在目录中启动一个服务，并打开地址：
你可以通过添加查询参数?file=fileUrl来打开PDF文件。
4.1 openCustomDocument
当打开PDF文件时，首先会调用openCustomDocument方法。你可以基于传入的URI创建一个自定义文档对象。该文档对象将包含你想要编辑的内容。在这个程序中，不进行任何处理，而是直接返回一个包含URI的对象，该对象将传递给resolveCustomEditor方法的document参数。
openCustomDocument(uri: vscode.Uri, openContext: vscode.CustomDocumentOpenContext, token: vscode.CancellationToken) {
return {
uri,
dispose: () => { }
};
}4.2 resolveCustomEditor
在resolveCustomEditor方法中，可以定义要显示的视图，程序如下。
resolveCustomEditor(document: CustomDocument, webviewPanel: WebviewPanel, _token: CancellationToken) {
webviewPanel.webview.html = 'Hello World!';
}要显示PDF文件，只需将下载的PDF程序的HTML内容替换为当前的webviewPanel.webview.html值。最初认为可以更改为：
// 嵌入一个iframe以查看PDF
webviewPanel.webview.html = `
`这个方法是最简单的，但令人意外的是，iframe没有显示内容。这可能是由于VSCode的安全策略限制造成的。
因此，在这里考虑了另一种方法：读取PDF视图主页的HTML内容，并将其赋值给webviewPanel.webview.html。
然而，这种方法可能会遇到一个问题：如何向PDF视图程序提供文件链接。
如前所述，PDF视图程序将通过查询参数“file.”获取文件链接。如果没有提供此参数，程序将读取默认链接。以下是一个相关的源代码示例：
file = params.get("file") ?? _app_options.AppOptions.get("defaultUrl");然而，直接赋值HTML文本不能通过URL提供“file”的值。这可能需要修改源代码。尽管修改源代码可能会带来一些不便，但一开始似乎也没有其他办法，所以不得不尝试一下。一种方法是改变获取“file”值的方式，直接从全局变量中获取。可以使用如下方法在HTML内容中添加“file”值：
window.file = 'https://...'然后将上述源代码修改为：
file = window.file ?? _app_options.AppOptions.get("defaultUrl");然而，就在我以为成功即将到来的时候，出现了一个红色错误：“加载PDF时出现错误。文件来源与阅览器不匹配”。
经过进一步调查，在相应的源代码中发现了一个“fileinputchange”事件监听处理程序，如下所示：
var webViewerFileInputChange = function (evt) {
if (PDFViewerApplication.pdfViewer?.isInPresentationMode) {
return;
}
const file = evt.fileInput.files[0];
PDFViewerApplication.open({
url: URL.createObjectURL(file),
originalUrl: file.name
});
};从代码中很容易看出，一旦检测到文件发生更改，就会立即调用open方法打开文件。重要的是要注意，该open方法并不验证URL是否与当前源相匹配。目前，它使用了一个blob链接。在这种情况下，我们是否可以在初始化后直接调用open方法来打开文件呢？经过一些改造，最终证明是可行的。以下是修改后的代码示例：
resolveCustomEditor(document: CustomDocument, webviewPanel: WebviewPanel, _token: CancellationToken) {
webviewPanel.webview.options = {
enableScripts: true,
localResourceRoots: [vscode.Uri.file(path.dirname(document.uri.fsPath)), this.context.extensionUri]
};
const base = vscode.Uri.joinPath(this.context.extensionUri, 'dist/web/pdf/web/')
webviewPanel.webview.html = readFileSync(path.join(base.fsPath, 'viewer.html'), 'utf8').replace('', `
`)
}对上面的关键代码进行分析：
- localResourceRoots参数：该参数的目的是定义可以通过Web URL访问的目录。在这里，需要明确定义两个目录：一个用于打开PDF文件的当前目录，另一个用于插件所在的目录。确保两者都正确定义，否则可能在访问时遇到401错误。
- tag：通过设置tag，可以为网页内部加载资源提供基本路径。确保资源能够正确加载。
- setTimeout函数：在调用程序打开文件时使用setTimeout的目的是在打开默认PDF文件后再打开所需的PDF文件。这样可以防止后面执行打开默认PDF的操作覆盖想要打开的PDF（尽管实际上会出现默认文件错误，但不会产生实质性影响）。
与之前提到的PDF插件实现相比，这种实现要简单得多，但原理基本相同。
