Building a Discreet VSCode Extension for Browsing Content While Coding

Many VSCode users install "moyu" (slacking‑off) plugins that occupy large screen areas, which defeats the purpose of staying hidden while browsing content. The article argues that a truly concealed solution should be lightweight and unobtrusive.

The ideal plugin must satisfy three requirements: absolute invisibility so colleagues cannot notice, dedicated reading content tailored to each user, and seamless control that can hide the content instantly without relying solely on keyboard shortcuts.

The author presents a personal "moyu" plugin that integrates news feeds directly into VSCode, allowing the user to browse while coding without exposing the activity.

Prerequisite knowledge includes familiarity with the VSCode extension API (the platform is built on Node.js and the browser) and the puppeteer library for crawling content.

Usage involves launching the plugin via the command palette (Ctrl+Shift+P) with a "Start Mouyu" command, which activates a status‑bar item, fetches content, and provides left/right navigation and a Webview for login. Hovering over specific words reveals article or comment content, and moving the mouse away hides it instantly.

To get started, install the Yeoman generator for VSCode extensions:

npm install -g yo generator-code

Then scaffold a new project:

yo code

Choose New Extension and select TypeScript or JavaScript. The generated project contains a simple directory structure; the key files are src/extension.ts (the entry point) and package.json (the manifest).

In package.json register commands under the contributes section, for example:

"contributes": {
  "commands": [
    { "command": "FishX.init", "title": "开始摸鱼" },
    { "command": "FishX.dispose", "title": "结束摸鱼" }
  ]
}

Define corresponding keybindings:

"keybindings": [
  { "command": "FishX.next", "key": "alt+d" },
  { "command": "FishX.prev", "key": "alt+a" }
]

The activate function registers these commands and creates a status‑bar item using vscode.window.createStatusBarItem :

const statusBarContent = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
statusBarContent.text = "$(loading~spin) 鱼塘建造中...";
statusBarContent.command = "FishX.quickPick";
statusBarContent.show();

Quick pick dialogs are created with vscode.window.createQuickPick() to let users select a piece of content quickly:

const quickPickDisposable = vscode.commands.registerCommand(
  "FishX.quickPick",
  async () => {
    if (quickPick === undefined) {
      quickPick = vscode.window.createQuickPick();
    }
    quickPick.items = [...];
    quickPick.onDidChangeSelection(async (selection) => {
      // handle selection
      quickPick.hide();
    });
    quickPick.show();
  }
);

Hover information is provided via vscode.languages.registerHoverProvider , showing article or comment snippets when the user hovers over specific keywords:

vscode.languages.registerHoverProvider(
  ["typescript", "javascript", "vue"],
  {
    async provideHover(document, position, token) {
      const range = document.getWordRangeAtPosition(position);
      const word = document.getText(range);
      if (word === "const") {
        return new vscode.Hover('文章...', range);
      }
      if (word === "export") {
        return new vscode.Hover('评论...', range);
      }
    }
  }
);

The article concludes that the provided snippets give a solid foundation for building a functional VSCode extension. For a complete implementation, refer to the GitHub repository FishX and the official VSCode documentation.