Link Previewer VSCode Extension

This VSCode extension allow you to preview a webpage metadata (title, description and image) when a valid URL is hovered in an editor view. This way, you don't always have to open a URL in the browser to see what it contains.

Features 📙

• Preview the title and description of a web page
• Preview the Largest Contentful Paint image
• Prioritize Open Graph metadata

Installation 📝

Via in-app extension view

1. Launch Visual Studio Code.
2. Go to the Extensions view by clicking on the square icon on the left sidebar or by using the shortcut Cmd+Shift+X or Ctrl+Shift+X on windows.
3. Search for "Link Previewer" in the Extensions marketplace.
4. Click the "Install" button next to the "Link Previewer" extension.
5. Once installed, you can find the extension in the command palette.

Via online VSCode marketplace

1. Head over to https://marketplace.visualstudio.com/items?itemName=coderabbi.link-previewer and click the "Install" button.
2. Follow step 4 and 5 above

Usage 🛠️

1. Open a text editor.
2. Hover a valid URL, you should see a popover containing the metadata of the webpage, including a cover image.
3. For image URLs, you should see only the image and nothing else.
   

Configuration

This extension contributes the following configuration:

• linkpreview.maxHeight

{
  "linkpreview.maxHeight": 500
}

Extension Deactivation 😔

The extension is deactivated automatically when you close Visual Studio Code or manually disable the extension in the Extensions view.

Troubleshooting 🐛

• If there is no cover image, the webpage most likely does not have one.
• If there is no preview data at all, there was an error in fetching that data. Hover again to fetch the metadata again.

Feedback and Contributions 👂

In case of any errors or issues, refer to the Troubleshooting section of this docs. If the error persists, please create an issue here.

Below is a list of feature requests

• cache metadata for unchanged URLs: Currently, the metadata is fetched every time a URL is hovered. Implement some caching mechanism for this metadata, so it is fetched once and reused in the current session.
• support for local/relative image file paths: Currently, only external image or webpage URLs served over http/https are supported. Add support to preview images loaded from the local filesystem relative paths.

Feel free to also create a PR if you are willing to address an issue or add a new feature and I'll take a look as soon as possible.

For any other feedback, please reach out to me on Twitter (@code_rabbi).

Enjoy! 💙