Customize my firefox4 – 折腾Firefox4 - 20111010更新

(26,967 views)
September 6, 2010
Tags: , , , ,

持续更新中。。。

20110421更新 – 升级windowControlButtonsOnTabbar_v0.02.uc.js脚本
20110315更新 – 升级navBarInBottom.uc.js脚本
20110214更新 – 添加GM脚本Linkify ting
20110101更新 – 2.8 添加对应Linux的方案
20110101更新 – 2.9 更新标签相关样式，添加“设置未读标签样式”的脚本
20101216更新 – 2.11 查找栏添加“Highlight时标记所有匹配的位置”脚本
20101214更新 – 2.9 tabNumber脚本更新
20101210更新 – 2.1, 2.2, 2.11

最近跟风，firefox也升级到每夜版，又得开始重新折腾。。。

目录：
1. 扩展

1.1 Add-on Compatibility Reporter 0.6
1.2 KeySnail 1.6.5
1.3 userChromeJS 1.2
1.4 scriptlish 0.1b5
1.4 stylish 1.0.11

2. UI

2.1 隐藏标题栏
2.2 隐藏菜单栏
2.3 标签栏置顶
2.4 导航栏
2.5 Add-on栏
2.6 状态栏
2.7 书签栏
2.8 app-button
2.9 标签栏
2.10 右键菜单
2.11 查找栏

3. 功能

3.1 快捷键
3.2 鼠标手势
3.3 标签功能增强
3.4 Drag & Go
3.5 Grease Monkey(Scriptlish)

4. CSS

4.1 stylish脚本

1. 扩展

  1. Add-on Compatibility Reporter 0.6

    2. firefox4下很多扩展都不兼容，无法安装。就算直接修改扩展的rdf文件装上后，firefox4还是会给强制禁用…

    Add-on Compatibility Reporter这个工具是mozilla用来收集扩展兼容反馈的，它可以使不兼容的扩展强制enable，由用户来判断扩展是不是还可用。也就说，通过这个工具只能使扩展enable，但是不保证能正常工作。好在我一定要用的扩展，还勉强能够基本工作.

  2. KeySnail 1.6.5

    3. 快捷键扩展，可以通过Add-on Compatibility Reporter正常工作。

  3. userChromeJS 1.2

    4. 执行用户脚本的扩展。怎么用userChrome脚本

  4. scriptlish 0.1b5

    5. greasemonkey扩展的一个分支，专门针对firefox4，所以移除了很多为了兼容而写的代码，并做了自己特有的增强。另外作者很活跃，修复bug也快。

  5. stylish 1.0.11

2. UI

  1. 隐藏标题栏

    2. userChrome脚本 – hideCaptionLite (ToDo: 作者忘了，回头找一下)
    hideCaptionLite.uc

    用这个uc脚本会出现一个问题：屏幕最左边缘不能触发hover事件，导致自动弹出侧边栏类的脚本都没法使用。
    所以我改用下面的CSS脚本来实现隐藏标题栏

    #titlebar {
    -moz-appearance: none !important;
    display: none;
}

#navigator-toolbox:not([inFullscreen]) {
    margin-top: 4px;/*酌情调整*/
}
  2. 隐藏菜单栏

    3. view里toolbar下直接设置。firefox4隐藏菜单栏后，可以通过alt键来暂时显示，这个改进不错。（firefox3已有这个改进。。。谢谢harnack指点）

    标题栏和菜单栏都隐藏了，有一个不方便就是最小化和关闭按钮没了，下面这个脚本就是把这2个按钮从菜单栏移到标签栏。
    脚本附件：closeButtonInTabBar.uc
    每夜版更新后上面的脚本不能用了。

    下面是可用的新脚本：
    最大、最小化按钮有两种样式，一种是标题栏上的，一种是全屏模式下导航栏上的

    这两个脚本分别把这两套按钮移到标签栏上:
    titlebarButtonsOnTabbar.uc
    windowControlButtonsOnTabbar_v0.02.uc
    （20110421 – 升级0.0.2版，修复全屏后按钮消失的问题 – 感谢tuji发现并提交bug）

    3.6的用这个，closeButtonInTabBar3.6.uc

  3. 标签栏置顶
    google chrome在UI上的一个优点是标签栏置顶，这样的好处是定位标签栏更容易，鼠标直接甩到顶即可，纵向上定位不用太精确。
    firefox4中默认标签栏是在导航栏下面，要做到标签栏置顶，可以采用下面几种办法

    • 隐藏导航栏
    • Tabs On Top（这样标签栏会在导航栏上面）
    • 我个人的办法是把导航栏置底，在下方显示，并把状态栏合并进去，具体参见导航栏状态栏小节
  4. 导航栏

    5. 首先导航栏置底，用这个userChrome脚本 – navBarInBottom_v0.02.uc.js
    （20110315 – 升级0.0.2版，修复toolbar右键菜单中缺少“Navigation Toolbar”选项的问题 – 感谢cherry909发现并提交bug）
    然后，隐藏导航栏中的地址栏和搜索框 – flybar
    最后，合并状态栏到导航栏 – statusBarLikeChrome.uc
    其他，像Home/Stop/Reload/Back/Forward等等这些按钮都用ToolBar Customize从导航栏移除（这些功能我都用快捷键）

  5. add-on栏

    6. 最新版已取消状态栏，由新加的add-on栏取代，扩展图标改在这显示。
    我的屏幕很宽，而装的扩展也少，用整行来显示图标感觉很浪费，所以我用这段CSS将扩展图标显示在置底的导航栏中间部位（原本这里应该是地址栏，被我用另外一个脚本隐藏）。
    带缩放效果，我自己命名为Mac Dock Like Add-on Bar :’(

    另外，如果想把扩展图标显示在地址栏里，可以使用这个uc脚本 – StatusbarInURLBar3.uc.js。

  6. 状态栏

    7. 以前状态栏可以显示后台连接信息，由于状态栏的取消，这个功能也没了。下面这个脚本提供在左下角动态显示后台连接信息功能（跟Chrome浏览器一样）。
    附件下载：chromeStatusbar.uc
    修改自Griever的ChromeStatusbarModoki.uc.js脚本

    另外，如果用了1.3.5版的Popup Url and Search Bar脚本，里面有个在左下角显示鼠标悬停链接地址的功能，这个会显示在后台连接信息的下面，两个互不冲突。

    firefox4b9之后，左下角显示衔接信息功能已内置，上述脚本已不再需要。

  7. 书签栏

    8. 参考这篇

  8. app-button

    9. firefox4新引入了一个app-button（就是我们俗称的橙色按钮）。
    这个button在隐藏菜单栏的时候会显示在标题栏，但是我们已经隐藏了标题栏。所以我现在把app-button挪到新定制的导航栏上去，显示在浏览器的左下角，类似于windows中的开始菜单。
    moveOrangeButton.uc
    适用于Linux的版本（Ubuntu 11.04下测试通过） – moveOrangeButton4Linux.uc
    目前效果


    可以通过userChrome.css调整一下app-button的外观

    #appmenu-button {
  min-width: 20px !important;
  height: 20px !important;
  margin-top: 1px !important;
  margin-bottom: 1px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
  -moz-border-radius-topleft: 2px !important;
  -moz-border-radius-topright: 4px !important;
}

/* 修改button上的文字 */
#appmenu-button .button-box .box-inherit:before {
  content: "App";
}

#appmenu-button .button-box .box-inherit .button-text {
  display: none;
}

    调整后的效果

    Linux系统用下面的CSS（修改按钮上文字需要在moveOrangeButton4Linux.uc.js脚本里改）

    #appmenu-toolbar-button {
    -moz-appearance: none !important;

    background-image: -moz-linear-gradient(rgb(246,182,82), rgb(215,98,10)) !important;

    border-radius: 4px 4px 4px 4px !important;
    border: 1px solid rgba(83,42,6,.9) !important;
    border-top: none !important;

    color: white !important;
    text-shadow:  0 0 1px rgba(0,0,0,.7) !important;
    font-weight: bold !important;

    margin-bottom: -2px !important;

    padding-left: 0px !important;
    padding-right: 0px !important;
}

    最后，再通过这个脚本来定制app-button的菜单内容（左侧添加个人常用菜单，右侧添加firefox4完整菜单）
    脚本名：Compact_menu，作者: GOLF-AT，这个附件是我重新定制的，想看作者发布原帖和细节的，点击这里

    customize app button

    customize app button

    脚本附件: appButton.uc

  9. 标签栏
    • 用userChrome.css来定制外观

      • style可以按照自己的需要适当修改：

      /* 未读tab的样式 */
.tabbrowser-tab:not([read="true"]) {
    color: green  !important;/* 文字颜色 */
    font-style: italic !important;
}

/* 当前tab的样式 */
.tabbrowser-tab[selected="true"] {
    background-image: -moz-linear-gradient(rgb(246,182,82), rgb(215,98,10)) !important;/* 火狐橙 */
    color: white !important;
}

/* 正在载入tab的样式 */
.tabbrowser-tab[busy] {
	color: red !important;
}

/* 去掉标签页上的关闭图标 */
.tabbrowser-tab .tab-close-button {
    display:none !important;
}

      其中”未读tab样式”需要脚本支持 – setStyle4UnreadTab.uc

    • 在标签栏左上角显示当前已打开标签数量（修改自我行我素的脚本）

      • 2010-12-14：tabNumber脚本更新

      • 这个显示标签数量的东西实际上是原来的alltabs-button，点击可以看见所有已开tab的列表。本更新使得右键单击列表中条目可以直接关闭对应的tab。

      脚本附件：tabNumber.uc

      另外，userChrome.css需要添加样式

      #alltabs-button {
    -moz-appearance:none !important;
    border: 1px solid !important;
    border-color: hsla(190,50%,65%,.8) hsla(190,50%,50%,.8) hsla(190,50%,40%,.8) !important;
    background-color: hsla(190,60%,70%,.5) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
                      0 0 0 1.5px rgba(255,255,255,.1) inset,
                      0 1px 0 rgba(0,0,0,.1),
                      0 0 3.5px hsl(190,90%,80%) !important;
    margin: 3px 1px 2px 1px !important;
}

.tabs-alltabs-button {
    width: auto !important;
    -moz-box-orient: horizontal !important;
}

.tabs-alltabs-button > .toolbarbutton-text {
    display: -moz-box !important;
}

.tabs-alltabs-button > .toolbarbutton-icon,
.tabs-alltabs-button > .toolbarbutton-menu-dropmarker {
    display: none !important;
}

      效果图

  10. 右键菜单

    11. 参考这里

  11. 查找栏
    • 查找栏显示在上部

      • 由于浏览器底部的东西已经太多（导航栏、橙色按钮、状态框。。。），所以把查找栏挪到浏览器上部
      脚本作者不明 – findbar2top.uc

      原脚本会和下面的smartlyCloseFindbar.uc冲突，如果要合用的话，用我这个修改版
      findbar2top.uc

    • 查找栏失去焦点时自动关闭

      • 作者Blooo – smartlyCloseFindbar.uc

    • 查找栏添加匹配个数统计

      • 作者Ehsan Akhgari – 扩展下载
      slimx提取的脚本 – showNumberForFindBar.uc

    • Highlight时标记所有匹配的位置

      • 点击Highlight All按钮时页面右侧会添加一个标记条，标记出所有匹配在页面中的位置。

      作者Mattk，Search Marker扩展下载页面点我

      脚本，基本上是从扩展里原封拿出来的 – findbarMarker.uc

    • 使页面中查找到的内容居中显示

      • 扩展 – Find To Center
      小明的blog上有篇介绍，点我

3. 功能

  1. 快捷键

    2. 参考这里

  2. 鼠标手势

    3. 修改并合并Gomita的mouseGesture(uc脚本)和Sunwan的nextPage(gm脚本)
    mouseNextPage.uc

    L       后退
    R       前进
    LR    关闭标签页
    RL    恢复刚关闭的标签页
    UD   刷新当前标签页
    UL   前一个标签页
    UR   后一个标签页
    LU   滚到页面顶部
    LD   滚到页面底部
    U      previous page（翻页脚本）
    L       next page
    DL    全屏
    RU   停止
    DRU 新建窗口
    URD 关闭窗口

  3. 标签相关功能增强

    4. 参考这里

  4. Drag & Go

    5. 用alice的脚本

  5. Grease Monkey(Scriptlish)
    • BaiduMonkey 11.8
    • GoogleKingKong 5.6
    • Special Links Converter 3.50

      • 该脚本可以把迅雷、旋风、快车、rayfile、纳米盘的专用下载链接破解为真实地址，不用专用下载工具直接就可以下载。

    • Linkify ting

      • 识别页面中链接文字，并转化成超链
      默认会用超链的样式来显示原来的链接文字，根据这里修改可以让转换后的超链保持原来文字的样式，而只在悬停时才加下划线标识

4. CSS

  1. stylish脚本
    • Bright Focus

      • input、textarea、button、超链在focus时高亮

related post

(26,967 views)

Filed under:
firefox by admin

59 Responses to Customize my firefox4 – 折腾Firefox4

← Older Comments
  1. alan says:
    2011/12/15 at 18:56

    博主能不能给findbarMarker.uc加个限制，像showNumberForFindBar.uc那样超过100就不显示匹配位置，当匹配数目小于100时才显示位置；
    这样就不会因为输入慢了导致页面卡住。

    Reply
← Older Comments
①若要贴代码，请将 "<" 改成 "&lt;"，">" 改成 "&gt;".
②若要从他人留言中复制代码，注意检查引号可能是中文的，请手动修改成英文符号，避免不能工作