VSCode 插件开发实例（WebView）：微信读书 ^-^边撸代码边看小说^-^

最终效果

主要代码

package.json

{"name": "WeReadForVSCodeJackieZheng","repository": {"type": "git","url": "https://github.com/JackieZheng/WeReadForVSCode.git"},"displayName": "WeReadForVSCode","description": "WeRead for VSCode 微信读书 VSCode 插件","version": "0.1.0","author": {"name": "JackieZheng"},"publisher": "JackieZheng","engines": {"vscode": "^1.48.0"},"categories": ["Other", "Keymaps", "Language Packs", "Extension Packs"],"keywords": ["vscode", "plugin", "webView", "weread", "view in browser"],"icon": "Images/icon.png","activationEvents": ["onCommand:WeReadForVSCodeJackieZheng.Start"],"main": "./extension.js","contributes": {"commands": [{"command": "WeReadForVSCodeJackieZheng.Start","title": "Start","category": "WeRead","icon": {"light": "Images/icon.svg","dark": "Images/icon.svg"}}],"keybindings": [{"command": "WeReadForVSCodeJackieZheng.Start","key": "ctrl+f3","mac": "cmd+f3"}]},"license": "SEE LICENSE IN LICENSE.md","bugs": {"url": "https://github.com/JackieZheng/WeReadForVSCode/issues","email": "zhengxinzhe@jackyzheng.uu.me"},"homepage": "https://github.com/JackieZheng/WeReadForVSCode/blob/master/README.md","scripts": {"lint": "eslint .","pretest": "npm run lint","test": "node ./test/runTest.js"},"devDependencies": {"@types/vscode": "^1.48.0","@types/glob": "^7.1.3","@types/mocha": "^8.0.0","@types/node": "^14.0.27","eslint": "^7.6.0","glob": "^7.1.6","mocha": "^8.0.1","typescript": "^3.8.3","vscode-test": "^1.4.0"}
}

extension.js

// @ts-nocheck
const vscode = require('vscode');
const {url} = require('inspector');// this method is called when your extension is activated
// your extension is activated the very first time the command is executedfunction activate(context) {// 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.jsonlet disposable = vscode.commands.registerCommand('WeReadForVSCodeJackieZheng.Start', function () {// The code you place here will be executed every time your command is executed// 1.创建并显示Webviewconst panel = vscode.window.createWebviewPanel(// 该webview的标识，任意字符串'WeRead',// webview面板的标题，会展示给用户'微信读书',// webview面板所在的分栏vscode.ViewColumn.One,// 其它webview选项{enableScripts: true, // 启用JS，默认禁用retainContextWhenHidden: true, // webview被隐藏时保持状态，避免被重置});//设置标题前图标panel.iconPath = {dark: vscode.Uri.file(context.extensionPath + '/Images/iconDark.png'),light: vscode.Uri.file(context.extensionPath + '/Images/iconBlack.png')};panel.webview.html = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="portrait" name="x5-orientation"><meta content="true" name="x5-fullscreen"><meta content="portrait" name="screen-orientation"><meta content="yes" name="full-screen"><meta content="webkit" name="renderer"><meta content="IE=Edge" http-equiv="X-UA-Compatible"><title>微信读书</title><style>html,body,iframe{width:100%;height:100%;border:0;overflow: hidden;}</style></head><body><iframe src="https://weread.qq.com/"/></body></html>`;});context.subscriptions.push(disposable);
}
exports.activate = activate;// this method is called when your extension is deactivated
function deactivate() {}module.exports = {activate,deactivate
}