Link Previewer

Hovering to preview a link

As of 2024-01-02. See the latest version.

Author
hzhbest
Ratings
0 0 0
Version
1.2
Created
2023-12-26
Updated
2024-01-02
Size
28.7 KB
License
MIT
Applies to
All sites

## Instruction
1. When hovering your cursor to an interested link, an icon will appear near the link, displayed with different shapes to indicate internal or external link. (A domain different from current domain would be considered external.)
2. When hovering your cursor onto the icon, it will be colorized. Then one second later the preview window will appear and the page from that link will be loaded within.
3. When you want to close the preview window, you can click the close button on the top right corner of the preview window, or anywhere outside of the preview window.

## Features
- The preview window will be shown right around the icon while auto keeping itself within the main window view.
- The previewed page will be slightly scaled down to show more content.
- Dragging the top-left handle can move the preview window.
- Dragging the bottom-right handle can change the size of the preview window.

## Notice
1. The icon would sometimes not be displayed right around the link, according to the design of the node containing the link, but still not two far away.
1. Some condition prevent the link to be previewed: the linked page forbid itself to be open in iframe in a page of an external site; the linked page contains mix contents that violate the safety protocol of the browser therefore forbidden to open in iframe.
1. You are welcomed to post questions and suggestions here.

### Update history
2023-12-31 v1.0 From the base of v0.2,added dragging to move / resize the preview window, added pop-in, loading, vanish animation effect, improved icon positioning method, improved previewed page scale-down effect.
2024-01-01 v1.1 Fix the bug causing too-small preview window size; adjust preview window scaling rate.
2024-01-02 v1.2 Optimize styles; optimize algorithm for setting the position of the icon.

长期地址
遇到问题?请前往 GitHub 提 Issues。