知乎上看到过一句话:’IE 是微软的,Chrome 是谷歌的,FF 是我的。’
现在的火狐和【我的】渐行渐远了。每次升级都会非常焦虑,界面会不会改,扩展支不支持,细节上有没改动。
关于样式
可以修改浏览器的样子,这是 FF 很大一个特点。但是 57 版本大改后样式类扩展已经不能修改火狐界面了,需要修改配置文件中的 Chrome/userChrome.css
配置文件的位置在 about:support
中找到。
65 版本,样式名大改了一次,导致之前的样式无法继续使用,需要重新写一遍。也就是说旧版本的用户可考虑先升级到 65 之后的版本再修改界面,省的升级后傻眼。
地址栏输入:如果这个不能满足你,可以通过打开调远程试模式直接编辑浏览器外观,具体参考 这里。chrome://browser/content/browser.xul
,用开发者查看器中获取样式名(新版已经没有这个功能了)。
修改 userChrome.css,下面提供常用的样式(适用于 65 版本):
/**
* chrome://browser/content/browser.xul
*/
/* -----------------------------------地址栏----------------------------------- */
#nav-bar {
-moz-box-ordinal-group: 1;
background: none !important;
margin-left: 75px;
box-shadow: none !important;
}
#nav-bar:not([tabs-hidden="true"]) {
}
/* -----------------------------------书签栏----------------------------------- */
#PersonalToolbar {
-moz-box-ordinal-group: 2;
background: none !important;
}
/* 书签文件夹 */
#personal-bookmarks .toolbarbutton-icon {
display: none;
}
/* 书签字体 */
.bookmark-item {
font-family: 'PingFang SC';
font-size: 15px;
margin-bottom: 3px !important;
}
/* 书签栏整体左右空间 */
#personal-bookmarks {
padding: 0 8px 0;
}
/* -----------------------------------标签栏----------------------------------- */
#titlebar {
-moz-box-ordinal-group: 3;
}
/*标签样式*/
#tabbrowser-tabs tab {
font-family: 'PingFang SC';
font-size: 15px !important;
text-shadow: none !important;
}
/* 调整标签宽度 */
.tabbrowser-tab:not([pinned])[fadein] {
max-width: 260px !important;
min-width: 80px !important;
}
/* osx 的按钮 */
.titlebar-buttonbox-container {
position: absolute;
top: 4px;
z-index: 10000;
overflow: hidden;
}
/* 按钮和标签的空间 */
.titlebar-spacer {
display: none;
}
/* 选中标签 */
#TabsToolbar .tabbrowser-tab[selected] .tab-line {
border-top: 2px solid #2F706F;
}
/* -----------------------------------搜索栏----------------------------------- */
.browserContainer > findbar:-moz-lwtheme {
background-color: #d9e9c4;
}
之后的版本,可以到这里看看,作者维护了几个常用的样式,需要就粘贴到文件里。
2023-7-7: 火狐 115 版本发布,这是最后一个支持 Win7 和 macOS 10.14 的版本,钉子户可以考虑更新,附赠一个标签栏下置的样式(仅在 mac 上测试):
/* 标签下置 */
#titlebar {
order: 3;
}
#nav-bar {
order: 1;
}
#PersonalToolbar {
order: 2;
font-size: 13px;
}
/* 隐藏书签icon */
.bookmark-item>.toolbarbutton-icon {
display: none;
}
/* 标签 tab */
/* 最小宽度可以用 */
.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
max-width: 250px !important;
min-width: 175px !important;
}
.tab-background {
margin-block: 0 !important;
}
/* 选中标签阴影 */
#TabsToolbar #firefox-view-button[open]>.toolbarbutton-icon,
#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
box-shadow: none !important;
border-radius: 0px !important;
}
/* 选中标签下边线 */
#TabsToolbar #firefox-view-button[open]:not(:focus-visible)>.toolbarbutton-icon:-moz-lwtheme,
.tab-background[selected]:not([multiselected="true"]):-moz-lwtheme {
outline: none !important;
border-bottom: 2px solid rgba(48, 71, 88, 0.9);
}
/* 标签过多时不隐藏关闭按钮 */
#tabbrowser-tabs[closebuttons="activetab"]>#tabbrowser-arrowscrollbox>.tabbrowser-tab>.tab-stack>.tab-content>.tab-close-button:not([selected="true"]) {
display: block !important;
}
.close-icon[pinned] {
display: none !important;
}
/* 删除标签列表右边的空间 */
.titlebar-spacer[type="post-tabs"] {
display: none !important;
}
关于扩展
常用扩展安利:
- 样式修改: Stylus
- 油猴类脚本: Tampermonkey
- 屏蔽广告: uBlock Origin
- 鼠标手势: 闪耀拖拽
2019-05-04 附加组件签名出 bug,大部分扩展原地爆炸,也是用了十几年第一次遇到。
关于新版本提示
63 之后 FF 就不提供不检查更新这个选项了(脑残)。然后每隔12小时,或者重开 FF 的时候弹出新版本提示(脑残,脑残,脑残)。
mac 版本 FF 解决方法:
# 没有文件的话 自行创建目录和文件
vim /Applications/Firefox.app/Contents/Resources/distribution/policies.json
# 输入
{
"policies": {
"DisableAppUpdate": true
}
}
重启后,就能在 about:preferences 的 Firefox 更新一项中发现 “更新已被系统管理员禁用”。从此就再也不用看到恼人的更新了!
其他平台可以看 这里 DavidPostill♦ 的回答。
之后如果升级了新版本,这个文件会移除,如果 Mozilla 继续作恶,只能重复上面的操作。
其他细节
- .dev .app 这类的开发用的后缀已经和 Chrome 一样强制使用 https 了,这意味着就算本地开发测试用的域名,还是需要配置 https。
tips:
- 火狐中国是流氓,切勿下载中国版!
替代品
https://www.waterfox.net/ 缺点明显,一直留在 FF 56 版本,虽然支持旧组件,也支持部分新组件,但是 57 版本后才开发的组件不支持。优点是去掉了部分收集用户数据的功能。基于 FF 的魔改产品,长久使用非良策。
《“火狐用户的忧郁”》 有 1 条评论
Where there is a will, there is a way.