摸鱼神器：打造一款让VS Code成为你私人影院的插件 - 纯爱掌门人

介绍

编程是一项令人兴奋的工作，然而每天都在代码编写中度过很长时间后，我们也希望能够进行一些娱乐活动来放松身心，例如看电影。那么今天，我想要介绍的是一款能够将VS Code变成你的私人影院的插件！这个插件将可以让你在VS Code的代码编辑区中轻松观看电影，不再需要切换电影应用或浏览器。本篇文章将会给你展示如何在VS Code中开发这款插件，采用的技术包括Node.js、axios、JSdom和VS Code的webview等。

准备工作及开发环境搭建

首先，你需要在电脑上安装最新的VS Code和Node.js版本。然后，在VS Code中打开命令行终端，创建一个新的文件夹，用来存储插件代码：

 mkdir my-video-plugin
cd my-video-plugin
code .

爬取腾讯视频数据：如何使用axios和jsdom发送请求并解析HTML

我们需要爬取腾讯视频的数据来获取电影列表。我们将使用axios和jsdom插件实现该功能。首先，我们需要安装这些插件：

 npm install axios jsdom

接下来，在你的代码中引入它们：

 const axios = require('axios');
const jsdom = require('jsdom');
const { JSDOM } = jsdom;

使用axios发送一个GET请求，然后使用jsdom解析HTML文档。以下是解析腾讯视频网站上视频标题的示例代码：

 axios.get('https://v.qq.com/')
  .then((response) => {
    const dom = new JSDOM(response.data);
    const document = dom.window.document;
 
    // 从腾讯视频提取视频标题
    // 注意：class类名可能会被调整修改，掘友们在自己手动做的时候记得自己检查网页源码
    const videoTitles = document.querySelectorAll('.item_title .needsclick');
 
    videoTitles.forEach((title) => {
      console.log(title.textContent);
    });
  })
  .catch((error) => {
    console.log(error);
  });

具体的视频链接提取与标题提取原理是一样的，因此这里不多做赘述，免的被掘友们说我水文。

可视化搜索：如何在VS Code中为插件提供搜索界面

我们需要让用户能够搜索他们想要看的电影。我们将添加一个搜索框，用户可以在其中输入搜索关键字。当用户按下回车键时，我们将搜索该关键字并显示结果。

在VS Code中使用webview来实现可视化搜索框，我们需要首先创建一个HTML文件并添加一个搜索框和一个结果列表。接下来，我们需要将其加载到webview中。

以下是加载HTML文件到webview的示例代码：

 const panel = vscode.window.createWebviewPanel(
  'myVideoPlugin',
  'My Video Plugin',
  vscode.ViewColumn.One,
  {}
);
 
panel.webview.html = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Video Plugin</title>
</head>
<body>
  <input type="text" id="search-box">
  <ul id="results"></ul>
</body>
</html>`;

我们还需要指定webview将在哪些情况下显示和隐藏。以下是在搜索命令被触发时显示webview的示例代码：

 const disposable = vscode.commands.registerCommand('myVideoPlugin.search', () => {
  panel.reveal();
});

可视化账号配置：如何让用户方便地在VS Code中配置腾讯视频账号

我们将添加一个配置页面，让用户可以配置他们的腾讯视频账号。我们将使用VS Code提供的配置API。在你的代码中添加以下代码来设置一个配置项：

 const configuration = vscode.workspace.getConfiguration('myVideoPlugin');
const defaultValue = '';
const username = configuration.get('username', defaultValue);
const password = configuration.get('password', defaultValue);

我们需要为配置页面在webview中创建一个表单，让用户可以输入他们的用户名和密码。以下是创建表单的示例代码：

 panel.webview.html = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Video Plugin</title>
</head>
<body>
  <h1>Configuration</h1>
  <form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" value="${username}">
    <br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" value="${password}">
    <br>
    <button type="submit">Save</button>
  </form>
</body>
</html>`;

我们可以在表单提交时保存用户的配置信息。以下是保存配置信息的示例代码：

 panel.webview.onDidReceiveMessage((message) => {
  switch (message.command) {
    case 'saveConfig':
      configuration.update('username', message.username, true);
      configuration.update('password', message.password, true);
      break;
  }
});

视频播放：如何在VS Code中使用webview播放腾讯视频

我们将为每个视频创建一个webview以播放视频。当用户将鼠标悬停在视频标题上时，我们将显示一个播放按钮。当用户点击该按钮时，我们将创建一个新的webview来播放视频。

以下是创建视频播放窗口并加载视频的示例代码：

 vscode.window.createWebviewPanel(
  'myVideoPluginPlayback',
  title,
  vscode.ViewColumn.Active,
  {
    enableScripts: true,
    retainContextWhenHidden: true,
  }
)
.webview.html = `
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <style>
        body {
          margin: 0;
          background-color: black;
        }
      </style>
    </head>
    <body>
      <video controls autoplay muted>
        <source src="${videoUrl}" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </body>
  </html>
`;

我们需要在搜索结果中为每个视频创建一个播放按钮。以下是为每个视频添加播放按钮的示例代码：

 videoTitles.forEach((title) => {
      const listItem = document.createElement('li');
      const button = document.createElement('button');
      button.textContent = 'Play';
      button.onclick = () => {
        playVideo(title.textContent);
      };
      listItem.appendChild(title);
      listItem.appendChild(button);
      resultList.appendChild(listItem);
});

打包和发布：将插件打包并发布到VS Code Marketplace

最后，我们需要将插件打包并发布到VS Code Marketplace。我们可以使用VS Code的命令行接口来完成这项任务。首先，我们需要在你的插件项目的根目录中创建一个package.json文件：

 {
  "name": "my-video-plugin",
  "displayName": "My Video Plugin",
  "description": "A plugin to turn VS Code into your personal movie theater.",
  "version": "0.0.1",
  "publisher": "your-publisher-name",
  "engines": {
    "vscode": "^1.60.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:myVideoPlugin.search",
    "onCommand:myVideoPlugin.config"
  ],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "myVideoPlugin.search",
        "title": "Search videos"
      },
      {
        "command": "myVideoPlugin.config",
        "title": "Configure My Video Plugin"
      }
    ],
    "configuration": {
      "type": "object",
      "title": "My Video Plugin",
      "properties": {
        "username": {
          "type": "string",
          "default": ""
        },
        "password": {
          "type": "string",
          "default": ""
        }
      }
    }
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ."
  },
  "devDependencies": {
    "@types/node": "^16.7.13",
    "@types/vscode": "^1.60.0",
    "typescript": "^4.4.4",
    "vsce": "^1.123.1"
  }
}

接下来，我们需要在终端中运行以下命令来打包插件并发布到VS Code Marketplace：

 vsce package
vsce publish

总结：回顾插件实现过程

通过这篇文章，我们学习了如何开发一个让VS Code成为你私人影院的插件。我们使用了Node.js、axios、JSdom以及VS Code的webview等技术实现了爬取电影列表，可视化搜索，可视化账号配置以及视频播放等多种功能。最后，我们还学习了如何打包并发布插件到VS Code Marketplace。

最终的成果将是一个与其他VS Code插件一样易于使用的插件，使得看电影成为了愉悦的工作体验的一部分。皆大欢喜！

注意：本文代码并非完整代码，只是给大家讲解一下开发一个插件的具体步骤以及实现的核心方法和思路，若有需要，可以在评论区留言，如果人数较多的话，我会出一版完整的开源VS code视频播放插件代码，扩展其他功能，供大家开箱即用，让大家打工路上快乐摸鱼。

介绍