在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文件。
当打开PDF文件时，首先会调用openCustomDocument方法。你可以基于传入的URI创建一个自定义文档对象。该文档对象将包含你想要编辑的内容。在这个程序中，不进行任何处理，而是直接返回一个包含URI的对象，该对象将传递给resolveCustomEditor方法的document参数。
openCustomDocument(uri: vscode.Uri, openContext: vscode.CustomDocumentOpenContext, token: vscode.CancellationToken) { return { uri, dispose: () => { } };}在resolveCustomEditor方法中，可以定义要显示的视图，程序如下。
resolveCustomEditor(document: CustomDocument, webviewPanel: WebviewPanel, _token: CancellationToken) { webviewPanel.webview.html = 'Hello World!';}要显示PDF文件，只需将下载的PDF程序的HTML内容替换为当前的webviewPanel.webview.html值。最初认为可以更改为：
// 嵌入一个iframe以查看PDFwebviewPanel.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('', ` `)}对上面的关键代码进行分析：
与之前提到的PDF插件实现相比，这种实现要简单得多，但原理基本相同。
本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-77691-0.html手把手教你开发自己的VSCode插件
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
