diff --git a/vsc/assets/RA-white-transp.png b/vsc/assets/RA-white-transp.png new file mode 100644 index 0000000..b5f1da9 Binary files /dev/null and b/vsc/assets/RA-white-transp.png differ diff --git a/vsc/package.json b/vsc/package.json index f2e8bc6..55a23a3 100644 --- a/vsc/package.json +++ b/vsc/package.json @@ -12,6 +12,24 @@ "activationEvents": [], "main": "./dist/extension.js", "contributes": { + "viewsContainers": { + "activitybar": [ + { + "id": "ra-aid-view", + "title": "RA.Aid", + "icon": "assets/RA-white-transp.png" + } + ] + }, + "views": { + "ra-aid-view": [ + { + "type": "webview", + "id": "ra-aid.view", + "name": "RA.Aid" + } + ] + }, "commands": [ { "command": "ra-aid.helloWorld", @@ -46,4 +64,4 @@ "@vscode/test-cli": "^0.0.10", "@vscode/test-electron": "^2.4.1" } -} +} \ No newline at end of file diff --git a/vsc/src/extension.ts b/vsc/src/extension.ts index 73d0d4b..537c756 100644 --- a/vsc/src/extension.ts +++ b/vsc/src/extension.ts @@ -1,26 +1,133 @@ // 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'; +/** + * WebviewViewProvider implementation for the RA.Aid panel + */ +class RAWebviewViewProvider implements vscode.WebviewViewProvider { + constructor(private readonly _extensionUri: vscode.Uri) {} + + /** + * Called when a view is first created to initialize the webview + */ + public resolveWebviewView( + webviewView: vscode.WebviewView, + context: vscode.WebviewViewResolveContext, + _token: vscode.CancellationToken + ) { + // Set options for the webview + webviewView.webview.options = { + // Enable JavaScript in the webview + enableScripts: true, + // Restrict the webview to only load resources from the extension's directory + localResourceRoots: [this._extensionUri] + }; + + // Set the HTML content of the webview + webviewView.webview.html = this._getHtmlForWebview(webviewView.webview); + } + + /** + * Creates HTML content for the webview with proper security policies + */ + private _getHtmlForWebview(webview: vscode.Webview): string { + // Create a URI to the extension's assets directory + const logoUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'assets', 'RA.png')); + + // Create a URI to the script file + // const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'dist', 'webview.js')); + + // Use a nonce to whitelist scripts + const nonce = getNonce(); + + return ` + + + + + + RA.Aid + + + +
+ +

RA.Aid

+

Your research and development assistant.

+

More features coming soon!

+
+ + `; + } +} + +/** + * Generates a random nonce for CSP + */ +function getNonce() { + let text = ''; + const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + for (let i = 0; i < 32; i++) { + text += possible.charAt(Math.floor(Math.random() * possible.length)); + } + return text; +} + // 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) { + // Use the console to output diagnostic information (console.log) and errors (console.error) + console.log('Congratulations, your extension "ra-aid" is now active!'); - // Use the console to output diagnostic information (console.log) and errors (console.error) - // This line of code will only be executed once when your extension is activated - console.log('Congratulations, your extension "ra-aid" is now active!'); + // Register the WebviewViewProvider + const provider = new RAWebviewViewProvider(context.extensionUri); + const viewRegistration = vscode.window.registerWebviewViewProvider( + 'ra-aid.view', // Must match the view id in package.json + provider + ); + context.subscriptions.push(viewRegistration); - // The command has been defined in the package.json file - // Now provide the implementation of the command with registerCommand - // The commandId parameter must match the command field in package.json - const disposable = vscode.commands.registerCommand('ra-aid.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 RA.Aid!'); - }); + // The command has been defined in the package.json file + // Now provide the implementation of the command with registerCommand + // The commandId parameter must match the command field in package.json + const disposable = vscode.commands.registerCommand('ra-aid.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 RA.Aid!'); + }); - context.subscriptions.push(disposable); + context.subscriptions.push(disposable); } // This method is called when your extension is deactivated -export function deactivate() {} +export function deactivate() {} \ No newline at end of file