Link Previewer

Hovering to preview a link

Author
hzhbest
Daily installs
1
Total installs
245
Ratings
8 0 0
Version
2.0
Created
2023-12-26
Updated
2024-05-02
License
MIT
Applies to
All sites

Instruction

  1. When hovering your cursor to an interested link (ℕ0), an icon will appear near (ℕ1) the link, displayed with different shapes to indicate internal or external link. (A domain different from current domain would be considered external.)
  2. In hove preview mode (Feature1), when hovering your cursor onto the icon, it will be gradually colorized. Then one second later (ℕ4) the preview window will appear and the page from that link will be loaded (ℕ2) within.
  3. In click preview mode, when hovering your cursor onto the icon, if it is completely colorized (ℕ5), you can click it and the preview window will appear.
  4. 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 (ℕ3) of the preview window.
  5. When you want to view the page (ℕ6) in the preview window, just click the "↗" button on the top-left.

Features

  • You can switch between click or hover preview mode through script management addon (e.g. TamperMonkey, GreaseMonkey, etc.) menu option.
  • The preview window will be shown right around the icon with smart positioning.
  • The previewed page will be slightly scaled down by default 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.
  • Clicking the "T" button can pin (ℕ3) the preview window.
  • Directly show the video preview for Bilibili.com and Youtube video links.
  • You can modify the code to change some advanced settings, such as the width and height of the preview window, the availability of the left-side resizing handle, etc.

Notice

  • ℕ0. Links without a web address or links targetting page anchor will not be processed.
  • ℕ1. The icon would sometimes not be displayed right beside the link. Its position will differ according to the design of the node containing the link, but still not two far away.
  • ℕ2. Some conditions prevent the link to be previewed: the linked page forbid itself to be open in iframe in an external site page; the linked page contains "mix contents" that violate the safety protocol of the brow ser therefore forbidden to open in iframe; external site contents which would be shown only after login cannot be display (showing unlogin page instead).
  • ℕ3. When "pinned", the preview window will not be closed by outside clicks and keep its position fixed to the screen, that is, not move with the page being scrolled or towards a newly-previewed link. It can still be dragged to move.
  • ℕ4. In hover-and-wait mode, preview will be shown after one sec. by default for normal links. In order to prevent accidental triggering, it would need one more sec. by default for short-width links.
  • ℕ5. In click mode, the icon for normal links will change color immediately and preview will be shown when icon be clicked. For short-width-links it would need hovering to wait for the icon to completely change color before clicking to show preview. If clicking the icon before its color completely changed, the result would be the same as clicking the link itself.
  • ℕ6. The page being opened in a new tab is from the location address (url) of the page being viewed in the preview window then. In case you have navigated within the preview window, the page url being opened would be different from the link previewed. If the page in the preview window contains data not already saved, the page opened in the new tab would not contain them.
  • 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.
  • 2024-01-12 v1.4 Prolong activation delay for links with small visual size to prevent accidental activation; improve positioning methods for icons and the preview window; direct preview video for Bilibili links; add pinning button.
  • 2024-01-31 v1.5 Fix the method to prevent repeating preview activation; fix incomplete title text problem; disabled on mega and github by default.
  • 2024-01-31 v1.6 Fix video preview jiggling problem.
  • 2024-02-01 v1.7 Add menu option to switch between click and hover mode.
  • 2024-02-22 v1.8 Optimize algorithm for setting the position of the icon for wrapped text; add button to open the page in the preview window in a new tab; add a resizing handle on the left; add menu option to switch between default pinned mode or not.
  • 2024-02-23 v1.9 Fix a bug causing links with 'target' attribute to be neglected.
  • 2024-05-02 v2.0 In order to be compatible with Google, adjust link searching mechanism and exclude special links; for some page having self-refreshing action that cause icon abnormally, add resuming mechanism (sometimes moving cursor over is needed); icon will change color while invert itself when hovered; add in-code switch [closeOnScoll] for an option to close the preview window when scrolling outside of it.