Tab Preview On Hover EN
Eason & Yue · Firefox
Adds on-hover tab preview to Firefox (requires CSS theme).
<all_urls>），意味着它可以读取你在任意站点的页面内容，包括已登录的页面。这是许多扩展正常工作的必要条件，但也值得你确认来源可信。
截图
简介
This add-on may no longer receive updates, as tab preview is now supported in current versions of Firefox.
What Does the Add-on & CSS Theme Do
With the add-on and the supporting CSS theme, tab preview will appear when a tab is hovered over.
There will be a delay before tab preview shows up. At the same time, if the cursor hovers from one tab over another tab, there’ll be no delay. If the cursor leaves the tab area for a short moment and goes back, the delay will come back. The behaviour is controlled by the CSS theme, user can simply change --preview-delay and --preview-delay-tolerance to adjust the timing.
How to Install the CSS Theme
- Go to
about:supportand locateProfile Folder - Download or copy the CSS theme and move it into
Profile Folder -> chrome - Go to
about:configand turntoolkit.legacyUserProfileCustomizations.stylesheetstotrue - Restart Firefox
Compromises
- Background image for the browser navbar will be disabled
- Incompatible with built-in browser themes “System theme – auto” and “Firefox Alpenglow”
- Only the first ten tabs on the left will have tab preview
- Adaptive Tab Bar Colour can cause the tab preview to disappear at times, as it resets the browser theme whenever it changes the colour of the tab bar
Supporting CSS Theme
The CSS theme is also available here: download.
/* Tab Preview On Hover supporting CSS theme */
/* Move this file to profile folder > chrome, or append to existing userChrome.css */
/* Version 2024-03-01 */
#navigator-toolbox:-moz-lwtheme {
background-image: none !important;
}
#navigator-toolbox {
z-index: 10 !important;
}
#tabbrowser-tab-tooltip {
display: none !important;
}
.tabbrowser-tab::after {
--preview-delay: 1s; /* Delay of tab preview when the cursor move onto a tab from outside of tab bar */
--preview-delay-tolerance: 0.75s; /* Max time period of cursor not hovering on tab bar before preview delay re-engages */
--preview-width: 200px; /* Width of the preview panel */
--preview-height: 150px; /* Height of the preview panel */
}
.tabbrowser-tab::after {
box-shadow: 0 0 50px black, 0 0 0 1px var(--arrowpanel-border-color) inset;
outline: 0.5px solid black;
pointer-events: none;
content: "";
display: none;
position: absolute;
z-index: 10000;
top: 50px /* Edit if the preview panel is misplaced */;
width: var(--preview-width);
height: var(--preview-height);
background-color: var(--lwt-accent-color);
background-image: var(--lwt-additional-images);
background-repeat: no-repeat;
background-clip: padding-box;
border-radius: 8px;
}
#tabbrowser-arrowscrollbox:not(:hover) .tabbrowser-tab::after {
transition: opacity 0.5s, filter 0s var(--preview-delay-tolerance);
filter: opacity(0);
}
#tabbrowser-arrowscrollbox:hover .tabbrowser-tab::after {
transition: opacity 0.5s, filter 0.5s var(--preview-delay);
filter: opacity(1);
}
.tabbrowser-tab:not(:hover)::after {
opacity: 0;
}
.tabbrowser-tab:hover::after {
opacity: 1;
}
.tabbrowser-tab[selected]:hover::after {
opacity: 0;
transition-duration: 0.25s !important;
}
.tabbrowser-tab:nth-of-type(1)::after {
display: block;
background-size: cover, 0, 0, 0, 0, 0, 0, 0, 0, 0;
}
.tabbrowser-tab:nth-of-type(2)::after {
display: block;
background-size: 0, cover, 0, 0, 0, 0, 0, 0, 0, 0;
}
.tabbrowser-tab:nth-of-type(3)::after {
display: block;
background-size: 0, 0, cover, 0, 0, 0, 0, 0, 0, 0;
}
.tabbrowser-tab:nth-of-type(4)::after {
display: block;
background-size: 0, 0, 0, cover, 0, 0, 0, 0, 0, 0;
}
.tabbrowser-tab:nth-of-type(5)::after {
display: block;
background-size: 0, 0, 0, 0, cover, 0, 0, 0, 0, 0;
}
.tabbrowser-tab:nth-of-type(6)::after {
display: block;
background-size: 0, 0, 0, 0, 0, cover, 0, 0, 0, 0;
}
.tabbrowser-tab:nth-of-type(7)::after {
display: block;
background-size: 0, 0, 0, 0, 0, 0, cover, 0, 0, 0;
}
.tabbrowser-tab:nth-of-type(8)::after {
display: block;
background-size: 0, 0, 0, 0, 0, 0, 0, cover, 0, 0;
}
.tabbrowser-tab:nth-of-type(9)::after {
display: block;
background-size: 0, 0, 0, 0, 0, 0, 0, 0, cover, 0;
}
.tabbrowser-tab:nth-of-type(10)::after {
display: block;
background-size: 0, 0, 0, 0, 0, 0, 0, 0, 0, cover;
}
Tab Preview On Hover 是做什么的
Tab Preview On Hover 是一款面向 Firefox 的外观主题类扩展，主要用来更换浏览器配色、给网页加深色模式、调整界面观感。官方对它的介绍是：Adds on-hover tab preview to Firefox (requires CSS theme).在Firefox 附加组件商店（AMO）上，它当前版本 1.1，评分 4.88（8 人评价），约 80 名用户。
适合什么人用
从功能定位看，Tab Preview On Hover 更适合长时间对着屏幕、希望降低眼睛负担的用户。如果你平时只是偶尔遇到相关需求，用浏览器自带功能也能凑合；但如果这件事每天都发生，装一个专门处理它的扩展通常比手动操作省事得多。需要注意的是它作用于所有网站，装上后建议先观察一两天，确认不影响常用站点的正常使用。
怎么安装 Tab Preview On Hover
- 打开Firefox 附加组件商店（AMO）上的官方页面；
- 点「添加到浏览器」并确认权限提示；
- 装好后在扩展列表里固定图标，方便随时开关。
本站只做索引与介绍，安装包来自官方商店。如果商店页面提示当前地区不可用，说明该扩展未在你所在区域上架。
常见问题
Tab Preview On Hover 是免费的吗？
Tab Preview On Hover 在Firefox 附加组件商店（AMO）免费提供下载。它是浏览器扩展，装上就能直接用，不需要注册账号。
Tab Preview On Hover 安全吗？
它只申请了 0 项权限，范围比较克制，没有申请「读取所有网站数据」这种大权限。
Tab Preview On Hover 支持哪些浏览器？
当前收录的版本来自Firefox 附加组件商店（AMO），适用于 Firefox。同一个扩展在其他商店可能有对应版本，但功能与版本号不一定相同。
怎么卸载 Tab Preview On Hover？
在扩展管理页找到 Tab Preview On Hover，点移除即可。它在本地保存的设置会一起清掉，不会残留数据。
权限清单 来自 manifest.json 原文
站点访问 1
<all_urls>
接口权限 2
tabstheme