28 Jul 2020

Firefox 配置及使用

firefox

1. 预览图

firefox 截图

2. 各种设置

2.1. 树状标签栏

2.1.1. 依赖插件

原来使用的 Tree Style Tabs, 现在发现 sidebery 更好看，操作也更友好一些。以上两个插件都是开源的。 sidebery 地址：https://github.com/mbnuqw/sidebery

2.1.2. 隐藏 tabbar

既然使用侧边树状标签栏，就没必要使用 tabbar 了，浪费空间不说，还难用，直接留给我的 i3bar。

配置 about:config

toolkit.legacyUserProfileCustomizations.stylesheets // 改成 true, 修改此行配置后，才会读取 chrome 文件夹中的配置
                                                                                browser.tabs.drawInTitlebar // 改为 true

修改文件 userChrome.css

隐藏标签栏主要是以下几行 css 在发挥作用，文件位于 ${FIREFOX_PROFILE}/chrome/userChrome.css

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#sidebar-header {
    display: none;
}

#TabsToolbar {
    visibility: collapse !important;
}
#TabsToolbar .tabbrowser-tab {
    display: none !important;
}

#nav-bar[inFullscreen],
#TabsToolbar[inFullscreen] {
    display: none;
}

#TabsToolbar > .titlebar-buttonbox-container {
    display: none !important;
}

2.2. 暗色网页

2.2.1. 依赖插件

Darkreader 开源插件，主要功能为全局使用暗色网页，并且可以根据 firefox 主题自动切换亮暗色。

地址：https://github.com/darkreader/darkreader

2.2.2. 修改 toolbar 颜色和 about:blank 颜色

我用的火狐主题是继承的 GTK 主题，为了保持亮暗色下 toolbar 和 about:blank 页面的颜色统一，修改了以下文件，同样是在 chrome1 文件夹下。

配置 userChrome.css

#urlbar #urlbar-background,
#urlbar, #urlbar-input-container,
#searchbar, .searchbar-textbox {
    border-radius: 1px !important;
    box-shadow: none !important;
    background: #eeeeee !important;
}

@media (prefers-color-scheme:dark) {
    #urlbar #urlbar-background,
    #urlbar, #urlbar-input-container,
    #searchbar, .searchbar-textbox {
        border-radius: 1px !important;
        box-shadow: none !important;
        background: #4b4b4b !important;
    }
}

配置 userContent.css

@media (prefers-color-scheme: dark) {
    @-moz-document url("about:newtab"), url("about:home") {
        body { background-color: #282828 !important;}
    }
}

@media (prefers-color-scheme: light) {
    @-moz-document url("about:newtab"), url("about:home") {
        body { background-color: #eeeeee !important;}
    }
}

2.3. rss 工具

2.3.1. 依赖插件

rss 个人还是感觉和浏览器一直用方便，更新及时，还能直接搭配 ff 的其他插件。

此类工具个人体验下来比较好的是 feedbro 和 brief。feedbro 提供了三栏布局，使用上可能更好一点，但是最终选择了 brief ，因为后者开源。

地址：https://github.com/brief-rss/brief

2.4. 下载网页

2.4.1. 依赖插件

singlefile，将整个网页下载到一个文件，适合我这样有收藏癖的人（不过现在主要用浏览器外的 monilith 了）。

地址：https://github.com/gildas-lormeau/SingleFile

2.5. 去广告

2.5.1. 依赖插件

ublock origin 简单好用，足够稳定。

地址：https://github.com/gorhill/uBlock

2.6. 隐藏网页图片

2.6.1. 依赖插件

hide-images 划水必备插件。

地址：https://github.com/sur98ke/hide-images-ff-quantum

2.7. 窗口内全屏

如果需要在窗口内全屏的话，即隐藏 toolbar 和 tabbar 的话，那么可以使用以下 about:config 中的 flag: 将 full-screen-api.ignore-widgets 改为 true 。用来小窗看视频还是挺方便的。

2.8. Vanilla Emacs 键位

继昨天也能用 rofi 转跳 firefox 标签之后，我决定逃回 firefox 了，但是还有一点习惯问题就是我习惯使用 Ctrl-n 来向下导航，firefox 中的该键是用来创建新窗口的，不能忍，改了它！

2.8.1. 编辑默认快捷键

如果想要编辑 firefox 量子的默认快捷键，比较方便的是编辑 omni.ja 。

得到 omni.ja 文件
在 Archlinux 下可以通过
```
$ pacman -Ql firefox | grep omni.ja
firefox /usr/lib/firefox/browser/omni.ja
firefox /usr/lib/firefox/omni.ja
```
如上得到了两个 omni.ja 文件，我们只需要编辑第一个文件就可以了。

解压 omni.ja 文件

注意：请备份 omni.ja 文件

omni.ja 可以直接通过 unzip 进行解压，在 Linux 下不妨参照如下命令：

$ cp /usr/lib/firefox/browser/omni.ja $HOME/omni.ja.bak
$ mkdir -p $HOME/temp_omni_ja # 创建临时文件夹
$ cd $HOME/temp_omni_ja
$ unzip ../omni.ja.bak

编辑快捷键
1. 两个文件
  现在就进入了正题，要开始编辑快捷键了。
  
  需要注意两个文件：
```
localization/en-US/browser/browserSets.ftl
```
  这个里面存放的是诸如
```
window-minimize-shortcut =
 .key = M
```
  这样的定义，相当于为每个 key 取了一个名称，例子中的 M 就是键盘上的 M 键。
  
  还有就是
```
chrome/browser/content/browser/browser.xhtml
```
  这个文件了，这个里面就是我们需要着重修改的地方。
2. 一个例子，使用 <C-s> 搜索
  如果想使用 <C-s> 进行类似 Emacs 中的向下搜索，在 firefox 中这个动作的默认快捷键是 <C-g>, 既然 ff 中有还有字母的这个快捷键，那么在 localization/en-US/browser/browserSets.ftl 就应该有 G 这个定义，要做的就变成了中找到 G 并改成 S, 结果如下：
```
search-find-again-shortcut =
       .key = G
```
  将它修改成
```
search-find-again-shortcut =
       .key = S
```
3. 又一个例子，使用 <M-n> 到下一个标签
  这个例子相对就麻烦一些，因为在 chrome/browser/content/browser/browser.xhtml 中默认没有 <M-j> 类似的快捷键。就不能直接在 localization/en-US/browser/browserSets.ftl 直接修改定义来完成这个了。
  
  但是通过阅读文件，发现该文件中存在着切换到下一个标签的命令
```
<command id="Browser:NextTab" oncommand="gBrowser.tabContainer.advanceSelectedTab(1, true);"/>
```
  那么要做的就变成了添加快捷键，照猫画虎，在 <keyset id="mainKeyset"> 一节中添加如下命令即可：
```
<key id="goNextTabKb"
     data-l10n-id="window-new-shortcut"
     command="Browser:NextTab"
     modifiers="alt"/>
```
  需要说明的是， data-l10n-id 就是在 localization/en-US/browser/browserSets.ftl 中定义的 key, 在该文件中有
```
window-new-shortcut =
      .key = N
```
  我需要的是 <M-n> 切换到下一个标签，然后就偷了懒，没有改名称，直接拿过来用了。剩下的几个就是字面意思，没啥好说的。
4. 其他
  
  不想要的直接注释掉就好了
  
  我的修改记录在这： https://pastebin.com/G7aLMqsv
重新打包
等到修改满意以后要做的就是怎么拿出来怎么送回去了。官方推荐的是 zip -qr9XD omni.ja * 这样进行打包，所以
```
$ zip -qr9XD $HOME/omni.ja *
$ sudo cp $HOME/omni.ja /usr/lib/firefox/browser/omni.ja
```
启动 firefox

首先需要使用 firefox --purgecaches 来重载 omni.ja, 这样修改的才会生效。

2.8.2. 配置 Vimium

页面内导航，我选用了 vimium, 然后将 Vimium 的快捷键修改了一下。

unmapAll
map n scrollDown
map p scrollUp
map <a-v> scrollToTop
map <c-v> scrollToBottom
map <a-w> copyCurrentUrl
map <a-c> enterVisualMode
map <a-C> enterVisualLineMode
map j LinkHints.activateMode
map <a-j> LinkHints.activateModeToOpenInNewTab

2.8.3. 后话

firefox 差不多就比较接近 vanilla emacs 的键位了，我也可以愉快地使用了。