This commit is contained in:
huangzhelong.byte 2025-03-22 19:01:59 +08:00
parent 050d72034c
commit c56847a2b2
3 changed files with 101 additions and 65 deletions

1
icons/protocol.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1742640634061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1503" data-darkreader-inline-fill="" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M768 854.016h-170.016L768 170.016h170.016L768 854.016zM682.016 170.016H512l-170.016 684H512l170.016-684zM86.016 704q0 44 31.008 75.008t75.008 31.008 75.008-31.008T298.048 704t-31.008-75.008-75.008-31.008-75.008 31.008T86.016 704z m0-297.984q0 44 31.008 75.008t75.008 31.008 75.008-31.008 31.008-75.008-31.008-76-75.008-32-75.008 32-31.008 76z" p-id="1504"></path></svg>

After

Width:  |  Height:  |  Size: 733 B

View File

@ -9,7 +9,9 @@
"categories": [ "categories": [
"Other" "Other"
], ],
"activationEvents": [], "activationEvents": [
"*"
],
"main": "./dist/extension.js", "main": "./dist/extension.js",
"contributes": { "contributes": {
"commands": [ "commands": [
@ -17,7 +19,16 @@
"command": "openmcp.helloWorld", "command": "openmcp.helloWorld",
"title": "Hello World" "title": "Hello World"
} }
],
"views": {
"explorer": [
{
"id": "webview-sidebar.view",
"icon": "./icons/protocol.svg",
"name": "WebView"
}
] ]
}
}, },
"scripts": { "scripts": {
"vscode:prepublish": "npm run package", "vscode:prepublish": "npm run package",

View File

@ -1,26 +1,50 @@
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode'; import * as vscode from 'vscode';
// This method is called when your extension is activated
// Your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) { export function activate(context: vscode.ExtensionContext) {
// 注册 WebView 视图
console.log('activate');
// Use the console to output diagnostic information (console.log) and errors (console.error) const provider = new WebviewViewProvider(context.extensionUri);
// This line of code will only be executed once when your extension is activated
console.log('Congratulations, your extension "openmcp" is now active!');
// The command has been defined in the package.json file context.subscriptions.push(
// Now provide the implementation of the command with registerCommand vscode.commands.registerCommand('openmcp.helloWorld', () => {
// The commandId parameter must match the command field in package.json vscode.window.showInformationMessage('Hello World!');
const disposable = vscode.commands.registerCommand('openmcp.helloWorld', () => { })
// The code you place here will be executed every time your command is executed )
// Display a message box to the user
vscode.window.showInformationMessage('Hello World from openmcp!');
});
context.subscriptions.push(disposable); context.subscriptions.push(
vscode.window.registerWebviewViewProvider('webview-sidebar.view', provider)
);
}
class WebviewViewProvider implements vscode.WebviewViewProvider {
constructor(private readonly _extensionUri: vscode.Uri) {}
public resolveWebviewView(webviewView: vscode.WebviewView) {
webviewView.webview.options = {
enableScripts: true, // 启用 JavaScript
};
// 设置 WebView 的 HTML 内容
webviewView.webview.html = getWebviewContent();
}
}
function getWebviewContent(): string {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebView</title>
</head>
<body>
<h1>Hello, WebView!</h1>
<p>This is a custom WebView in VS Code Sidebar.</p>
</body>
</html>
`;
} }
// This method is called when your extension is deactivated
export function deactivate() {} export function deactivate() {}