☰

Link Previewer

Hovering to preview a link

Author
hzhbest
Daily installs
2
Total installs
802
Ratings
16 0 0
Version
2.6
Created
2023-12-26
Updated
2025-01-03
Size
73.2 KB
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 in the preview window, just click the "↗" button on the top-left.

Features

  • Clicking the "T" button can pin (ℕ3) the preview window.
  • You can switch between click or hover preview mode through script management addon (e.g. TamperMonkey, GreaseMonkey, etc.) menu option.
  • You can toggle defaut pinning status through above-mentioned menu.
  • You can toggle temporal ON/OFF of the preview function through above-mentioned menu or shortcut key (Ctrl - Alt - v by default).
  • You can SET or UNSET domain-related preview window size through above-mentioned menu.
  • 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.
  • Directly show the video preview for Bilibili.com and Youtube video links, with the preview window auto-resized to fit video aspect when video is loaded.
  • 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 layout of the node containing the link, but still not two far away.
  • ℕ2. The page to be previewed will probably cause displaying blank page or showing error message if it has certain security policy.
  • ℕ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.
  • 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.
  • 2024-07-29 v2.1 Fix a bug causing pinned state ineffectiveness; fix a bug that open-in-new-page function opening not the current URL in preview window; adjust the delay mechanism for small links; add style to previewable links for hovering; add in-code switch [recordPrevHist] to record URL previewed into History. *Additional: bug fix for not showing preview window when encoutering crossing origin error.
  • 2024-09-03 v2.2 Fix a bug that the preview icon will be mal-resized on some pages; add temporal switch for preview function; add functions to deal with iframe, thus the "open in a new tab" button can now open the exact web location being previewed, and links within iframe can now be previewed in the top page.
  • 2024-09-05 v2.3 Fix title bar button display problem of the preview window; add shortcut key for the switch for preview function.
  • 2024-09-08 v2.4 Fix link style mis-triggered problem under hover mode; fix preview window repositioning problem when previewing new link even when the preview window is pinned while visible.
  • 2024-11-22 v2.5 When previewing supported video link, the preview window will auto resize itself to fit video aspect; add domain-related preview window size setting function; optimize preview window auto positioning mechanism and add minimal width and height limits.
  • 2025-01-03 v2.6 Add mechanism that preview icons will be removed when switching preview function to OFF status; improve link recognition rate (mainly for YouTube); adjust icon insertion to avoid the effect from "-webkit-line-clamp" CSS attribute that would make the icon invisible; some code refinement.