タイトル画像

NixOSでQutebrowser

こんにちは。N本ノック17日目ですね。 ソフトウェアを無限に魔改造したい静カニです。 今回はついにブラウザの魔改造を始めました。 普通はOSを改造するより先にブラウザ改造すると思いますが、そうなったものは仕方ありません。

対象

今回の改造の対象は、もちろんブラウザなのですがどのブラウザでしょうか。 設定項目に定評があるVivaldiでしょうか。いいえ。VivaldiはNix(というかテキスト)で設定できません。 選ばれたのは、綾鷹…じゃなくてQutebrowserでした。

そこのnyxtを思い浮かべた方は考えてみてください。 私にLispが書けると思いますか?関数定義で引数とbodyがパッと見分からない言語です。無理です。

一方QutebrowserはNixである程度書けますし、使うとしても(Lispに比べ簡単な)Pythonです。 ということでQutebrowserに即決しました。

ステップ

私は、メインのものは使い倒す一方でサブかなり最低限なタイプです。 つまりさっさとBraveから移住しないといけません。

入れる

移住するときに最低限、本体が入っていないといけないのは自明です。 ということで入れていきます。環境はNixOS 25.11です。導入時点のコミットは これ なので再現性が売りのNixを限界まで活用するならこれのflake.lockからゴニョゴニョしてください。 まずは最低限入れる場合、home.nixにこれを書いておきます。

programs.qutebrowser = {
  enable = true;
};

これでインストールすることができます。

垂直タブ

私は垂直タブがないと話にならないタイプなので、とりあえず垂直タブを使います。

programs.qutebrowser = {
  settings = {
    "fonts.tabs.selected" = "16px 'Noto Sans CJK JP'";
    "fonts.tabs.unselected" = "16px 'Noto Sans CJK JP'";
    "tabs.favicons.show" = "always";
    "tabs.position" = "left";
    "tabs.title.format" = "{index} {audio}{host}";
    "tabs.width" = 80;
  };
};

タブ系でまとめて書いたので幅変えたりフォント変えたりしましたが、 タブの場所を変えているのはtabs.positionです。

ダークモード

垂直タブの次ぐらいに必須機能なので設定していきます。

programs.qutebrowser = {
  settings = {
    "colors.webpage.darkmode.enabled" = true;
    "colors.webpage.darkmode.policy.images" = "never";
  };
  extraConfig = ''
    darkmode_disables = ( "https://discord.com/", )
    for s in darkmode_disables:
        config.set('colors.webpage.darkmode.enabled', False, s + "*")
  '';
};

Discordのサーバー画像の色が反転して怖くなっていたので、 画像は適用しないようにする+サイト単位で無効化で対処しました。 ちなみにPythonのタプルは、 要素が1つのとき最後に,を付けないと演算の優先順位を変えるものになってしまうので注意しましょう。

ログイン

qutebrowserはpasskeyに対応していません。 そのため二段階認証はAuthenticatorで行なうかメールにコードを送るかになると思います。 ただログイン自体はCookieを許可しておけば普通にできるので設定しておきます。

programs.qutebrowser = {
  settings = {
    "content.cookies.accept" = "all";
    "content.cookies.store" = true;
  };
};

翻訳

英語が弱いのにバンバン海外製のものを使っていく私にはページ翻訳がないと生きていけません。 ChromiumベースなのにPLaMo翻訳の拡張機能が使えないのは許せませんがキーバインドでGoogle翻訳に届けます。

programs.qutebrowser = {
  extraConfig = ''
    config.bind('ts', 'open -t https://translate.google.com/translate?sl=auto&tl=ja&u={url}')
  '';
}

-tが新しいタブで開くという意味だと思います。多分。

YouTube系

YouTubeの再生速度を変えるのって意外と面倒なんですよね。 ということでEnhancer for YouTubeの機能を使っていたデフォルト2倍速を再現… するのは面倒だったのでキーマップで妥協しました。 あと勝手に再生始まるのでautoplayはオフ。

programs.qutebrowser = {
  settings = {
    "content.autoplay" = false;
  };
  extraConfig = ''
    config.bind(';2', 'jseval document.querySelector("video").playbackRate = 2.0')
    config.bind(';1', 'jseval document.querySelector("video").playbackRate = 1.0')
  '';
}

ちなみに無理矢理videoタグの再生速度を変更しているだけなのでYouTube標準機能で変えると効果がなかったりします。

広告ブロック

Brave移住なのにすっかり忘れていました、広告ブロックです。標準にあるようです。

programs.qutebrowser = {
  settings = {
    "content.blocking.enabled" = true;
    "content.blocking.method" = "adblock";
  };
};

問題が起きるかもという話を見ましたが私は当たらなかったので、 もし当たったら自分で頑張ってください。

Ctrl+数字

Ctrl+数字でタブに移動できるようにします。

programs.qutebrowser = {
  extraConfig = ''
    for i in range(1, 10):
        config.bind(f'<Ctrl-{i}>', f'tab-focus {i}')
  '';
};

復元

閉じたときの状態を復元するあれです。 最初に一回コマンドを叩いた気がしますが忘れました。 設定はこれ。

programs.qutebrowser = {
  settings = {
    "auto_save.session" = true;
  }
};

設定ファイルまとめ

programs.qutebrowser = {
  enable = true;
  settings = {
    "auto_save.session" = true;
    "colors.webpage.darkmode.enabled" = true;
    "colors.webpage.darkmode.policy.images" = "never";
    "content.autoplay" = false;
    "content.blocking.enabled" = true;
    "content.blocking.method" = "adblock";
    "content.cookies.accept" = "all";
    "content.cookies.store" = true;
    "fonts.tabs.selected" = "16px 'Noto Sans CJK JP'";
    "fonts.tabs.unselected" = "16px 'Noto Sans CJK JP'";
    "tabs.favicons.show" = "always";
    "tabs.position" = "left";
    "tabs.title.format" = "{index} {audio}{host}";
    "tabs.width" = 80;
  };
  extraConfig = ''
    config.bind('ts', 'open -t https://translate.google.com/translate?sl=auto&tl=ja&u={url}')
    config.bind(';2', 'jseval document.querySelector("video").playbackRate = 2.0')
    config.bind(';1', 'jseval document.querySelector("video").playbackRate = 1.0')
    darkmode_disables = ( "https://discord.com/", )
    for s in darkmode_disables:
        config.set('colors.webpage.darkmode.enabled', False, s + "*")
    for i in range(1, 10):
        config.bind(f'<Ctrl-{i}>', f'tab-focus {i}')
  '';
};

使用感

キーボードから手を全く離さずに…とはいかなかった。 というのは、フォーカスの関係で自分の狙ったところがスクロールできなかったとき、 マウスに手をのばすのが一番楽な道だった。