While coding and running an extension in debug mode, I get the error mentioned in the title.
Here is my extension.js:
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require('vscode');
// This method is called when your extension is activated
// Your extension is activated the very first time the command is executed
/**
* @param {vscode.ExtensionContext} context
*/
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>Video Player</title>
</head>
<body>
<h1>Video Player</h1>
<video width="640" height="360" controls>
<source src=".mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>`;
}
function activate(context) {
// 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 "YourApp" is now active!');
let disposable = vscodemands.registerCommand('extension.openVideo', function () {
// Create and show a new webview
const panel = vscode.window.createWebviewPanel(
'videoView', // Identifies the type of the webview. Used internally
'Video Player', // Title of the panel displayed to the user
vscode.ViewColumn.One, // Editor column to show the new webview panel in.
{
enableScripts: true, // Enable JavaScript in the webview
retainContextWhenHidden: true // Keep the webview's state even when it's hidden
}
);
// Set the HTML content for the webview
panel.webview.html = getWebviewContent();
});
context.subscriptions.push(disposable);
}
// This method is called when your extension is deactivated
function deactivate() {}
module.exports = {
activate,
deactivate
}
This is my package.json:
{
"name": "financenews",
"displayName": "FinanceNews",
"description": "",
"version": "0.0.1",
"engines": {
"vscode": "^1.98.0"
},
"categories": [
"Other"
],
"activationEvents":
[
"onView:videoView", "onCommand:extension.openVideo"
],
"main": "./extension.js",
"contributes": {
"commands": [{
"command": "financenews.helloWorld",
"title": "Hello World"
},
{
"command": "extension.openVideo",
"title": "Open Video"
}],
"viewsContainers": {
"activitybar": [
{
"id": "videoSidebar",
"title": "Video Sidebar",
"icon": "media/mario.svg"
}
]
},
"views": {
"videoSidebar": [
{
"id": "videoView",
"name": "Video Player"
}
]
}
},
"scripts": {
"lint": "eslint .",
"pretest": "npm run lint",
"test": "vscode-test"
},
"devDependencies": {
"@types/vscode": "^1.98.0",
"@types/mocha": "^10.0.10",
"@types/node": "20.x",
"eslint": "^9.21.0",
"@vscode/test-cli": "^0.0.10",
"@vscode/test-electron": "^2.4.1"
}
}
I have tried the following things:
- Used 'explorer' instead of 'videoSidebar'
- Tried creating a class for VideoWebView and then tried to place
getWebView()as a function inside the class. - Tried loading a video from a directory instead of using
.mp4for source
While coding and running an extension in debug mode, I get the error mentioned in the title.
Here is my extension.js:
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require('vscode');
// This method is called when your extension is activated
// Your extension is activated the very first time the command is executed
/**
* @param {vscode.ExtensionContext} context
*/
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>Video Player</title>
</head>
<body>
<h1>Video Player</h1>
<video width="640" height="360" controls>
<source src="https://www.w3schools/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>`;
}
function activate(context) {
// 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 "YourApp" is now active!');
let disposable = vscodemands.registerCommand('extension.openVideo', function () {
// Create and show a new webview
const panel = vscode.window.createWebviewPanel(
'videoView', // Identifies the type of the webview. Used internally
'Video Player', // Title of the panel displayed to the user
vscode.ViewColumn.One, // Editor column to show the new webview panel in.
{
enableScripts: true, // Enable JavaScript in the webview
retainContextWhenHidden: true // Keep the webview's state even when it's hidden
}
);
// Set the HTML content for the webview
panel.webview.html = getWebviewContent();
});
context.subscriptions.push(disposable);
}
// This method is called when your extension is deactivated
function deactivate() {}
module.exports = {
activate,
deactivate
}
This is my package.json:
{
"name": "financenews",
"displayName": "FinanceNews",
"description": "",
"version": "0.0.1",
"engines": {
"vscode": "^1.98.0"
},
"categories": [
"Other"
],
"activationEvents":
[
"onView:videoView", "onCommand:extension.openVideo"
],
"main": "./extension.js",
"contributes": {
"commands": [{
"command": "financenews.helloWorld",
"title": "Hello World"
},
{
"command": "extension.openVideo",
"title": "Open Video"
}],
"viewsContainers": {
"activitybar": [
{
"id": "videoSidebar",
"title": "Video Sidebar",
"icon": "media/mario.svg"
}
]
},
"views": {
"videoSidebar": [
{
"id": "videoView",
"name": "Video Player"
}
]
}
},
"scripts": {
"lint": "eslint .",
"pretest": "npm run lint",
"test": "vscode-test"
},
"devDependencies": {
"@types/vscode": "^1.98.0",
"@types/mocha": "^10.0.10",
"@types/node": "20.x",
"eslint": "^9.21.0",
"@vscode/test-cli": "^0.0.10",
"@vscode/test-electron": "^2.4.1"
}
}
I have tried the following things:
- Used 'explorer' instead of 'videoSidebar'
- Tried creating a class for VideoWebView and then tried to place
getWebView()as a function inside the class. - Tried loading a video from a directory instead of using
https://www.w3schools/html/mov_bbb.mp4for source
1 Answer
Reset to default 0I made it work.
Extension.js
const vscode = require('vscode');
function activate() {
// Register the custom view
vscode.window.registerWebviewViewProvider('videoView', {
resolveWebviewView(webviewView) {
webviewView.webview.options = {
enableScripts: true,
};
// Set the HTML content for the webview
webviewView.webview.html = getWebviewContent();
},
});
}
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>Video Slayer</title>
</head>
<body>
<h1>Video Player</h1>
<video width="320" height="240" controls>
<source src="https://www.w3schools/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
`;
}
function deactivate() {}
module.exports = {
activate,
deactivate
};
package.json
{
"name": "YourApp",
"displayName": "YourApp",
"description": "",
"version": "0.0.1",
"engines": {
"vscode": "^1.98.0"
},
"categories": [
"Other"
],
"main": "./extension.js",
"activationEvents": [
"onCommand:extension.openVideo"
],
"contributes": {
"viewsContainers": {
"activitybar": [
{
"id": "videoSidebar",
"title": "Video Sidebar",
"icon": "media/mario.svg"
}
]
},
"views": {
"videoSidebar": [
{
"id": "videoView",
"name": "Video Player",
"type": "webview"
}
]
}
},
"scripts": {
"lint": "eslint .",
"pretest": "npm run lint",
"test": "vscode-test"
},
"devDependencies": {
"@types/vscode": "^1.98.0",
"@types/mocha": "^10.0.10",
"@types/node": "20.x",
"eslint": "^9.21.0",
"@vscode/test-cli": "^0.0.10",
"@vscode/test-electron": "^2.4.1"
}
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744888762a4599278.html
评论列表（0条）