我是 VSCode 扩展的新手，正在尝试创建一个 webViewPanel，用户可以在其中向 api 发送请求，并将响应粘贴到新的文本文档中。我遇到的问题是发送请求的按钮什么都不做，它甚至没有触发
panel.webview.onDidReceiveMessagerequestTemplate扩展.js
const vscode = require('vscode');
const axios = require('axios');
function activate(context) {
let disposable = vscode.commands.registerCommand('newextension.requestTemplateText', () => {
const panel = vscode.window.createWebviewPanel(
'newextensionPanel',
'Request Template',
vscode.ViewColumn.Two,
{}
);
panel.webview.html = getWebviewContent();
// Handle messages from the webview
panel.webview.onDidReceiveMessage(async message => {
console.log("value of message: " + message)
// Check if the message contains the parameter text
switch (message.command) {
case 'requestTemplate':
text = message.text;
await requestTemplate(text);
return;
}
}, undefined, context.subscriptions);
});
context.subscriptions.push(disposable);
}
async function requestTemplate(parameter) { //<-- Method I want triggered
try {
const response = await axios.get(`https://httpbin.org/get?text=${encodeURIComponent(parameter)}`); //<-- API has not been created yet, using this for testing
vscode.workspace.openTextDocument({ content: JSON.stringify(response.data, null, 2), language: "json" }).then(doc => {
vscode.window.showTextDocument(doc, vscode.ViewColumn.One);
});
} catch (error) {
vscode.window.showErrorMessage('Error fetching data from the API');
console.error(error);
}
}
function getWebviewContent() {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Request Template Text</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline' 'unsafe-eval';">
</head>
<body>
<h1>Request Template Text</h1>
<input type="text" id="text" placeholder="Enter your coding question:"><br><br>
<button onclick="requestTemplate()">Request Template</button> <-- The button in question
<script> <-- I have tried to add this in the header but still does not work
const vscode = acquireVsCodeApi();
console.log('Sending message to extension:', { command: 'requestTemplate', text: document.getElementById('text').value });
function requestTemplate() {
const text = document.getElementById('text').value;
vscode.postMessage({
command: 'requestTemplate',
text: parameter
});
}
</script>
</body>
</html>
`;
}
exports.activate = activate;
package.json
{
"name": "newextension",
"displayName": "newExtension",
"description": "",
"version": "0.0.1",
"engines": {
"vscode": "^1.88.0"
},
"categories": [
"Other"
],
"activationEvents": ["onCommand:newextension.requestTemplateText"],
"main": "./extension.js",
"contributes": {
"commands": [
{
"command": "newextension.requestTemplateText",
"title": "Request Template Text"
}
],
"webviewPanels": [
{
"viewType": "newextensionPanel",
"title": "Request Template",
"webviewOptions": {
"retainContextWhenHidden": true
}
}
]
},
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "tsc -p ./",
"watch": "tsc -watch -p ./"
},
"devDependencies": {
"@types/node": "18.x",
"typescript": "^5.3.3",
"vscode": "^1.2.3"
},
"extensionDependencies": [],
"private": true,
"webview": {
"retainContextWhenHidden": true
}
}
在查看了rioV8提到的Typing Cat示例后，我发现我没有将
enableScripts: truevscode.window.createWebviewPanelconst panel = vscode.window.createWebviewPanel(
'newextensionPanel',
'Request Template',
vscode.ViewColumn.Two,
{enableScripts: true}
);
非常感谢@rioV8的帮助。