无需任何插件或扩展,定制 Firefox 外观

文章目录

★引子
★为啥俺要强调“无插件/无扩展”?
★预备知识 — — 如何找到 Firefox 的 profile 目录
★预备知识 — — 啥是 CSS 文件
★用来定制 Firefox 界面的 CSS 文件
★userChrome.css 实战举例
★userContent.css 实战举例
★如何去找现成的 CSS 资源?

关于“评论区改版”的补充说明
十一假期重写了博客评论区的代码,并增加了评论的“热度排名”。这之后的两周,修复了好几个热心读者反馈的 bug,也采纳了热心读者提出的好些个建议(有些建议已经做出来了,有些还在计划中)。最近一周,前一篇博文的评论数从500+增长到700+。俺感觉评论界面的载入速度偏慢,所以上周俺一直都在优化代码,以提高界面载入速度。
可能某些读者发觉俺连续两周没有发博文,担心俺出事了。其实最近2周,俺一直在评论区出没。经常逛评论区的同学,应该晓得俺没事儿。
(判断俺是否出事了,【不要】光看“发博”间隔,要看俺的网络活动 — — 有时候虽然没有发博文,但是俺可以通过回复评论体现出网络活动,以表明俺还活着)

★引子

刚才说了,最近半个月都在倒腾页面代码(HTML/JS/CSS),业余时间几乎都花在这上面。搞得晚上做梦都梦见博客界面出 bug。在这种状态下,今天继续来讨论技术话题 — — 关于 Firefox 的界面定制。
网上已经有很多 Firefox 的插件或扩展,可以定制 Firefox 的界面。不过今天俺要聊的是 — — 【无需任何插件/扩展】,就可以定制 Firefox 的各种界面。

★为啥俺要强调“无插件/无扩展”?

◇安全上的考虑

信息安全领域有一个原则 — — 系统中运行的代码越多,出现漏洞的概率就越大。
如果不需要额外的插件和扩展,就可以定制 Firefox 的界面,那自然就可以做到“运行的代码最少”。
另外,即使是 Firefox 官网提供的插件或扩展,你也不敢保证全都是【可信任】的。万一你使用了某个恶意的插件或扩展,那风险就大了。
还有一点:插件和扩展都有自动升级的机制(可以在 Firefox 选项中禁掉自动升级),可以不断升级到最新版本。
说到“软件的自动升级”这个玩意儿,它是两面性的。好处是可以通过这个机制,不断完善软件(比如修复新发现的漏洞);坏处是,万一某个软件的作者起了歹意,就可以在软件的新版本中悄悄地加入某些流氓功能,而用户却蒙在鼓里,毫不知情。

今天要聊的这个招数,不需要依赖任何外部的插件和扩展,所以上述弊端都可以规避掉。

◇性能上的考虑

不管是插件还是扩展,都会引入一定的性能开销。比如说:会占用更多的内存。【有时候】也会占用一些 CPU 资源。
如果不需要额外的插件/扩展,性能上是最合算滴。

◇易用性上的考虑

今天介绍的这个招数,仅仅需要涉及两个文本配置文件。【完全绿色】,而且非常轻量级。
不需要任何安装步骤,只需要把配置文件复制到相应目录下,即可生效。
对于经常重装系统的同学,方便易用也是一个需要考量的点。

★预备知识 — — 如何找到 Firefox 的 profile 目录

Firefox 的 profile 有时候也称为“实例”。在一个系统中,你可以为 Firefox 配置多个 profile,每个 profile 有各自【独立的】收藏夹、【独立的】配置选项(比如代理设置)、【独立的】页面缓存……
默认情况下,Firefox 所有的 profile 都存放在同一个目录的【不同子目录下】(每个子目录是一个 profile)。
那么,如何找到 Firefox 的 profile 目录捏?下面介绍几种不同的方法。

◇方法1 — — 从 about:support 进入

打开 Firefox,在地址输入 about:support 并回车,会进入其 support 界面。其中有一项是 Profile Directory(俺用的是英文版,中文版的叫法略有不同)。在这一项右边有一个“打开”的按钮,点击这个按钮就会跳到 profile 目录。

◇方法2 — — 根据名称进入

不同的操作系统,profile 目录的位置也不同。
对于 Windows,你在资源管理器的地址栏输入如下,然后按回车,就进入了。

对于 Linux 系统,profile 目录的位置如下

对于 Mac OS 系统,profile 目录的位置如下(有两种可能的位置)

★预备知识 — — 啥是 CSS 文件

CSS 是洋文“Cascading Style Sheets”的缩写词。中文也称为“层叠样式表”或“级联样式表”。它可以用来定制 Web 页面的排版、布局、字体、颜色……
考虑到某些读者是技术菜鸟,俺再稍微说一下:
CSS 与 JS 脚本是【完全不同】滴。JS 脚本本质上是一种程序代码。因此,攻击者可以通过某种手段引诱你执行某些恶意的 JS 脚本,从而让你中招。而 CSS 本质上并【不是】程序代码(CSS【不是】可编程的) — — 它只是某种形式的配置文件,用来配置网页的展示方式,仅此而已。
所以,使用外部的(网上找来的)CSS 文件【没有】安全风险。

如果你之前对 CSS 一无所知,俺无法通过这短短的一个章节让你入门。这种情况下,建议你去中文维基百科扫盲一下(链接在“这里”)。
别担心!你不需要很懂 CSS,也可以学会今天这篇教程。很多时候,你只需具备【依葫芦画瓢】的能力,即可 :)

★用来定制 Firefox 界面的 CSS 文件

◇存放位置

Firefox 提供了某种机制,让用户可以通过 CSS 文件来定制 Firefox 的各种界面。
要学会定制,首先要找到 CSS 文件存放的位置。
前面已经提到了“profile 目录”。先找到 Firefox 当前 profile 所在的目录。对于大部分普通用户,只会有一个 profile,并且这个 profile 对应的目录名是形如 xxxxx.default 这样的形式。
进入 profile 所在的目录后,在这个目录下还有一个子目录叫做 chrome,俺所说的 CSS 文件就放在这个 chrome 目录下。
(可能有些同学会纳闷:为啥 Firefox 的配置文件存放目录,却用了 chrome 这个名字。其实是先有这个目录名,之后再有 Google 的 Chrome 浏览器)
如果你没找到名叫 chrome 的目录,就自己创建一个

为了避免技术菜鸟搞错,俺再唠叨一下。
如果你没有发现 chrome 目录,然后自己创建了一个。你要确保这个 chrome 目录与另一个叫做 extensions 目录是【并列】关系(兄弟目录关系)。

◇文件名

放到 chrome 目录下的配置文件有两个,名称分别为如下:

这两个文件分别有啥用途捏?且听俺细细道来:
userChrome.css 是专门用来定制 Firefox 【自身的界面】(比如 Firefox 自己的“地址栏、搜索栏、快捷菜单、滚动条......”)
userContent.css 是专门用来定制 Firefox 浏览的网站的界面(假如你对俺博客的某些界面效果不爽,就可以用它来定制)

★userChrome.css 实战举例

◇额外的格式要求

虽然 userChrome.css 本身是一个 CSS 格式的文件,但是它与普通的 CSS 文件有个不同之处。它的【第一行】必须是如下形式

除了上述这点,其它的语法与普通的 CSS 完全一样。

◇(根据 HTTPS 的加密级别)定制地址栏的颜色

这是俺首先要介绍的一招。
虽然现在的 Firefox 和 Chrome 都会在地址栏前端用一个小图标来提示 HTTPS 的加密类型。但是那个小图标实在太小了,不够显眼。俺希望把整个地址栏着色,以便更醒目地警告某些不够安全的 HTTPS 加密类型。
下面这段 CSS 代码,展示了如何根据 HTTPS 加密类型来设置地址栏的颜色。中文是俺加的注释,不影响 CSS 的使用。
关于“混合内容”的概念,可以参见 Firefox 官网的“这里”。

◇优化标签页的关闭按钮

每个标签页上的关闭按钮(叉叉)太占用空间,可以设置成 — — 只有当鼠标移动到某个标签页上方,才动态显示那个叉叉。
具体代码如下:

◇去掉没啥用的菜单项

如果你嫌快捷菜单太冗长,可以用如下方式隐藏(俺只举2个例子,说明两种不同的隐藏方式)

第1种方式:根据菜单的标识进行隐藏

下面这个例子,把几个常用的快捷菜单项隐掉。
(对俺而言,这些功能太常用,都有对应的快捷键,就不要再浪费菜单的空间了)

如果你想隐藏别的菜单项,可以到 Firefox 官网的“这个链接”查看各种内置菜单项的“命令名称”,然后稍作修改就变成菜单项的“标识”了 — — 这就是俺所说的“依样画葫芦” :)
举例:
“全选”这个功能的命令名是

该命令在快捷菜单中对应的 CSS 标识是

第2种方式:根据菜单显示的文字进行隐藏

上面那招是根据菜单的“标识”,但是菜单标识有时候不太好找,于是俺介绍另一个方式 — — 根据显示在菜单项上的文字进行隐藏。
下面是俺的举例,摘自本人的 Firefox 配置文件。
(再次唠叨:由于俺用的是英文版,所以俺的菜单项上当然是英文。使用中文版的同学,请自行修改引号中的文字)

★userContent.css 实战举例

◇额外的格式要求

userContent.css 用到了某个特殊的 CSS 语法(@-moz-document)。通过这个语法来指定:某个样式只应用到某个特定的网址。
这个语法有4种形式,分别如下:

◇定制俺博客评论编辑框的高度

先声明:
俺仅仅是拿这个来作为示范。即使你从来不在俺博客发评论,也可以通过这个示例学到 — — 如何用 userContent.css 去改变某个网站的界面样式。

其实捏,本月初俺在重写评论界面时,总觉得 Blogspot 平台默认的“评论编辑框”太矮了,看了很不爽。当时俺在自己的 userContent.css 中加了一个样式去改善它。修改的过程中就想到——不如写一篇博文(就是这篇)。
插一句题外话
本博客的所有页面,俺都可以通过博客管理界面进行定制,除了上面提到的那个“评论编辑框”。因为这个编辑评论的 HTML 页面位于另一个域名(www.blogger.com),无法通过博客的管理界面定制它。

你可以通过如下的语法,定制 blogspot 博客平台的编辑框高度。

请注意,俺使用的是【前缀匹配】的语法(@-moz-document 网址前缀)。为啥俺不用“严格匹配”而用“前缀匹配”捏?因为这个网址的后半部带了一堆参数(网址中问号后面的那部分)。由于这些参数【不是】固定的(经常会发生变化)。因此,你就没法用“严格匹配”了。
当然啦,也可以用正则匹配的语法(@-moz-document 网址正则式)来实现同样的效果。但是考虑到大部分读者不懂正则表达式,所以俺就光拿“前缀匹配”来举例。

★如何去找现成的 CSS 资源?

大多数读者都是不懂 CSS 的,但是没关系。你可以去网上找别人写好的现成的 CSS 来用。
下面这个网站大概是全球最大的 CSS 集散地。你可以在那上面找到很多现成的 CSS — — 这就是拿来主义的好处 :) 当然啦,你要具备基本的洋文阅读能力。
https://userstyles.org/

另外,你还要善于使用搜索引擎,就可以搜到很多别人写好的现成的 CSS。关于这方面的技巧和教程,参见俺之前的一个系列:
如何挖掘网络资源》。


俺博客上,和本文相关的帖子(需翻墙)
如何防止黑客入侵(系列)
如何挖掘网络资源(系列)
弃用 Chrome 改用 Firefox 的几点理由 — — 关于 Chrome 69 隐私丑闻的随想
如何用 GreaseMonkey 扩展 Google Reader

版权声明
本博客所有的原创文章,作者皆保留版权。转载必须包含本声明,保持本文完整,并以超链接形式注明作者编程随想和本文原始地址:
https://program-think.blogspot.com/2016/10/custom-firefox-theme-without-extension.html

Written by

编程随想的blogspot镜像,欢迎关注!编程随想:IT宅,热衷于:抹黑党国、揭露洗脑、普及翻墙。 偶尔会谈点技术。

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store