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.
- Preview the title and description of a web page
- Preview the Largest Contentful Paint image
- Prioritize Open Graph metadata
- Launch Visual Studio Code.
- Go to the Extensions view by clicking on the square icon on the left sidebar or by using the shortcut
Cmd+Shift+XorCtrl+Shift+Xon windows. - Search for "Link Previewer" in the Extensions marketplace.
- Click the "Install" button next to the "Link Previewer" extension.
- Once installed, you can find the extension in the command palette.
- Head over to https://marketplace.visualstudio.com/items?itemName=coderabbi.link-previewer and click the "Install" button.
- Follow step 4 and 5 above
- Open a text editor.
- Hover a valid URL, you should see a popover containing the metadata of the webpage, including a cover image.
- For image URLs, you should see only the image and nothing else.
This extension contributes the following configuration:
linkpreview.maxHeight
{
"linkpreview.maxHeight": 500
}The extension is deactivated automatically when you close Visual Studio Code or manually disable the extension in the Extensions view.
- 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.
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 possible feature requests
- cache metadata for unchanged URLs
- support for local/relative image file 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! 💙