恢复火狐地址栏图标及 HTTPS 站点标识

11
27
2013

恢复火狐地址栏图标及 HTTPS 站点标识

本文来自依云's Blog，转载请注明。

大约一年前，火狐 14 发布的时候，取消了在地址栏显示网站图标的功能，而且重新设计了 HTTPS 网站的标识。那个白色背景上的绿色标识我很不喜欢，于是通过给 omni.ja 文件打补丁的方法恢复了之前的样式：

HTTP 网站图标：
HTTPS 域名显示：
HTTPS 「经营者」显示：
部分 chrome URL 显示（我自己照着改的）：

可是，火狐 21 对这部分代码进行了重构，我找不到相关部分的代码了。于是，我一直还在使用火狐 20。直到前几天。

实际上，恢复在地址栏显示网站的扩展有不少，但无一例外，它们都只是恢复网站图标的显示。有个插件也恢复了 HTTPS 网站的浅蓝色域名显示，但是没有已认证的「经营者」的绿色显示。而且，它的代码是通过定时器每隔几百毫秒就执行一次，相比事件响应的方法太没效率了。

于是，使用代码片断速记器（默认快捷键Shift+F4），配合 Firebug 查看 chrome://browser/content/browser.xul，根据之前的样式表，我终于得到了以下解决方案（实际上上边的截图是我这个解决方案应用之后的）——

首先，安装 userChromeJS 扩展。这个扩展使得在火狐启动时加载 userChrome.js 文件。

其次，userChrome.js 文件，使地址栏显示网站图标并在正确的时机切换。它位于火狐配置目录下的 chrome 目录下：（注意已有新版）

userChrome.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29	`if(location ==` `"chrome://browser/content/browser.xul"){` `(function(){` `var` `eTLDService = Components.classes["@mozilla.org/network/effective-tld-service;1"]` `.getService(Components.interfaces.nsIEffectiveTLDService);` `function` `updateIcon(event){` `var` `tab = event.target;` `if(tab != gBrowser.selectedTab){` `return;` `}` `var` `icon = tab.image \|\|` `'chrome://mozapps/skin/places/defaultFavicon.png';` `document.getElementById('page-proxy-favicon').src = icon;` `var` `identity = document.getElementById('identity-box');` `if('verifiedDomain'.indexOf(identity.className) != -1){` `var` `identityLabel = document.getElementById('identity-icon-labels');` `identityLabel.collapsed =` `false;` `var` `domain = eTLDService.getBaseDomain(tab.linkedBrowser.lastURI);` `document.getElementById('identity-icon-label').value = domain;` `}` `}` `var` `container = gBrowser.tabContainer;` `container.addEventListener("TabSelect", updateIcon,` `false);` `container.addEventListener("TabAttrModified", updateIcon,` `false);` `})();` `}`

这部分，特别是标签页事件，参考了 MDN 的相关文档。

最后，HTTPS 和 chrome URL 的样式文件，放到同目录下的 userChrome.css 中，有点长：

userChrome.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67	`@namespace` `url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");` `/* 地址栏图标 /` `#identity-box {` `background-image: linear-gradient(hsl(0,0%,98%), hsl(0,0%,92%));` `box-shadow:` `0` `1px` `0` `hsla(0,0%,0%,.05)` `inset;` `-moz-border-end:` `1px` `solid` `rgba(0,0,0,.1);` `-moz-margin-end:` `3px` `!important;` `}` `#identity-box:hover:active,` `#identity-box[open="true"] {` `background-image: linear-gradient(hsl(0,0%,92%), hsl(0,0%,82%));` `box-shadow:` `0` `1px` `1px` `hsla(0,0%,0%,.3)` `inset,` `0` `1px` `3px` `hsla(0,0%,0%,.3)` `inset;` `}` `/ Text colors for each:` `` ` rgb(38, 76, 129) hsl(215, 55, 33)` `* rgb(71, 153, 0) hsl(92, 100, 30)` `* rgb(229, 115, 0) hsl(30, 100, 45)` `*/` `#identity-box.verifiedDomain {` `background-image: linear-gradient(hsl(215,60%,92%), hsl(215,58%,88%));` `box-shadow:` `0` `1px` `0` `hsla(215,54%,33%,.05)` `inset;` `-moz-border-end-color: hsla(215,54%,33%,.2);` `color: hsl(215,54%,33%);` `}` `#identity-box.verifiedDomain:hover:active,` `#identity-box.verifiedDomain[open="true"] {` `background-image: linear-gradient(hsl(215,80%,80%), hsl(215,67%,65%));` `box-shadow:` `0` `1px` `1px` `hsla(215,54%,33%,.7)` `inset,` `0` `1px` `3px` `1px` `hsla(215,54%,33%,.5)` `inset;` `}` `#identity-box.verifiedIdentity {` `background-image: linear-gradient(hsl(91,70%,90%), hsl(93,60%,81%))` `!important;` `box-shadow:` `0` `1px` `0` `hsla(92,81%,16%,.05)` `inset` `!important;` `-moz-border-end-color: hsla(92,81%,16%,.2)` `!important;` `background-repeat: inherit` `!important;` `background-color:` `transparent` `!important;` `}` `#identity-box.verifiedIdentity:hover:active,` `#identity-box.verifiedIdentity[open="true"] {` `background-image: linear-gradient(hsl(92,65%,70%), hsl(92,40%,48%))` `!important;` `box-shadow:` `0` `1px` `1px` `hsla(92,81%,16%,.6)` `inset,` `0` `1px` `3px` `1px` `hsla(92,81%,16%,.5)` `inset` `!important;` `}` `#identity-box.chromeUI {` `background-image: linear-gradient(hsl(29,70%,95%), hsl(31,60%,90%))` `!important;` `box-shadow:` `0` `1px` `0` `hsla(30,81%,25%,.05)` `inset` `!important;` `-moz-border-end-color: hsla(30,81%,25%,.2)` `!important;` `background-repeat: inherit` `!important;` `background-color:` `transparent` `!important;` `}` `#identity-box.chromeUI:hover:active,` `#identity-box.chromeUI[open="true"] {` `background-image: linear-gradient(hsl(30,65%,85%), hsl(30,65%,70%))` `!important;` `box-shadow:` `0` `1px` `1px` `hsla(30,81%,25%,.6)` `inset,` `0` `1px` `3px` `1px` `hsla(30,81%,25%,.5)` `inset` `!important;` `}`

另外，新版火狐又有一点令我不满了：滚动到页面底部和顶部也会使用平滑滚动，不喜欢。还是这个是可选的，设置 general.smoothScroll.other 为 false 就可以了。

2013年11月29日更新：自火狐 23 起，地址栏搜索会使用搜索栏的默认搜索引擎。对于我这种拿地址栏搜网站、搜索栏查字典的用户来说，这很难以忍受。于是找到 keyword.URL Hack! 这个扩展，新建字符串设置keyword.URL为 Google「手气不错」地址https://www.google.com/search?hl=zh-CN&btnI=1&q=，终于又回到从前二者兼俱的时候。

2014年3月25日更新：更新了脚本，在载入过程中不会显示错误的图标了。

发送到 Kindle

Category: 火狐 | Tags: 火狐 userChrome | Read Count: 9414

[回复]

Fermat618 说:
11 年前

大哥，都Firefox 20了怎么还用 (function () {})(); 这种难看的写法？用 let 啊。

[回复]

依云说:
11 年前

忘记了……MDN 它也不用 let 的嘛……

[回复]

Fermat618 说:
11 年前

gnome-shell 扩展里面全是 let. 网页编程可能要考虑到该死的兼容性，自己的插件没这问题，好的特性随便用。

[回复]

ffmmx 说:
11 年前

这个从来都没有注意过呵呵

[回复]

jiazhoulvke 说:
11 年前

我的mint上的火狐都已经到25.0.1了……

[回复]

依云说:
11 年前

我这里也是啊。升级之后发现在火狐 23 的时候有好多破坏我已有习惯的变化 :-(

[回复]

咖啡小冰说:
11 年前

地址栏搜网站、搜索栏查字典怎么弄？

[回复]

依云说:
11 年前

我在最后一段写了，安装那个插件，在 about:config 里设置 keyword.URL 为 Google 的值，这样子地址栏搜索与搜索栏就分开了。你在搜索栏添加个字典搜索就可以了。

如果你想要的字典网站没有提供搜索引擎插件，可以安装 https://addons.mozilla.org/zh-CN/firefox/addon/add-to-search-bar/ 这个插件来方便地添加搜索引擎插件。

[回复]

咖啡小冰说:
11 年前

已经搞了，我选择使用了百度一下，全不知道。因为姑姑经常要科学使用.谢谢依云

[回复]

eagle 说:
11 年前

收下

依云's Blog

Happy coding, happy living!