Операции DOM в VSCode Webview используются для редактирования всех локальных путей

Question

Я хочу создать некоторое расширение для VSCode, используя его функцию Webview. Я хочу показать предварительный просмотр HTML как функцию моего расширения. Как я вижу в документации VSCode API WebView , пути для ресурсов должны быть зарегистрированы и отредактированы особым образом.

Я хочу загрузить HTML из файла, а затем отредактировать и зарегистрировать все пути к CSS и JS в нем, чтобы создать предварительный просмотр этого. На мой взгляд, использование некоторой DOM-манипуляции - самый простой способ его создания. Простой импорт jsdom не работает, даже если тот же пример работает в простом Node.js. Кто-нибудь сделал что-то подобное в том, как это работает хорошо? Может быть, есть какой-то другой способ решить эту проблему.

Спасибо заранее.

Answer 1

Я делал это в прошлом, и он работал так: читал этот файл (с fs в моем случае), который содержит HTML, и отображал его позже. Любые ресурсы, которые вы хотите использовать, должны передаваться в массиве localResourceRoots в качестве опции в vscode.ViewColumn .

Вот полный пример:

const panel = vscode.window.createWebviewPanel(
            'catCoding',
            'Cat Coding',
            vscode.ViewColumn.One,
            {
                // Only allow the webview to access resources in our extension's media directory
                localResourceRoots: [vscode.Uri.file(path.join(context.extensionPath, 'media'))]
            }
        );