【小技】Firefox Quantumで「Tab Mix Plus」の機能を再現する【ver.69対応】

※2019/9/8 userChrome.cssの有効化について追記、及び、タブを多段表示にする / 未読タブの文字色を指定するにuserChrome.jsを用いる方法を追記。

Firefox Quantum(Firefox 57)へのアップグレードにより、新仕様「WebExtensions」に未対応のアドオン(拡張機能)が動作しなくなって、すでに1年以上が経過しました。
それでも、「レガシーアドオン」とも呼ばれるこれらの旧式アドオンの中には、依然として強い人気を持つものがあります。

その代表例が「Tab Mix Plus」です。
Tab Mix Plusは、タブ周辺の動作や見た目を総合的にカスタマイズできるアドオンで、タブを多段表示にする、閉じたタブを復元する、ポップアップをタブに開くなど、カスタマイズ可能な内容は多岐に渡ります。

後継アドオンである「Tab Mix - Links」もリリースされていますが、その機能は限定的で、WebExtensionsの制約により、開発は難航しているよう。
結果として、Tab Mix Plusで実現していた効果を、どうにか再現できる方法はないものかと、多くの利用者が代替案を探し求めることになりました。

Tab Mix Plusの機能をそっくりそのまま再現する方法というのは、ありません
そっくりそのまま全部とまではいかないまでもその大部分、せめて半分くらいを再現する方法さえも、現状では多分ないでしょう。
でも、部分的に代替することのできるアドオンもたくさんありますし、「about:config」「userChrome.css」「userChrome.js」で解決する部分もあります。

この記事では、Tab Mix Plusが備えていた機能を再現するべく、情報を集め回った成果をご紹介したいと思います。
なお、上記の通り、非常に多機能なアドオンであること、また、私自身が普段は使用していない機能にも言及しているため、解説が不十分な部分もありますが、ご了承下さい。

TabMixPlusを再現

[特集]
GetMoney!

[PR]

まず、「about:config」「userChrome.css」「userChrome.js」について、簡単に説明しておきましょう。
userChrome.jsについては、私の知識が乏しく、記事を通してごく簡単な説明となる点、ご容赦下さい。

about:configは、オプションでは変更できない高度な設定を、直に書き換えることができる、言わば隠し設定的な機能です。
about:configで設定を変更する手順は以下の通りとなります。

    ●about:config設定手順

  1. ロケーションバー(アドレスバー)に「about:config」と入力してエンターキーを押す。

  2. 「危険性を承知の上で使用する」をクリックします(以降の操作は間違いのないよう十分にご注意下さい)。

  3. 検索欄に変更したい設定項目(の一部)を入力すると、自動的に一覧から絞り込まれます。

  4. 項目名をダブルクリック、もしくは、右クリックして「値を変更」を選ぶと、各項目の設定値を変更できます。

  5. タブを閉じて完了です。

  6. 詳細は公式サイトのヘルプページを参照して下さい。

Firefox本体の機能であるabout:configに対して、ユーザーが設定ファイルを付け加える形になるのが、userChrome.cssとuserChrome.jsです。
主に、userChrome.cssは見た目など静的な変更、userChrome.jsは動作面に変更を加えます。

いずれも、飽くまで、ユーザーが付け加えた要素となりますので、Firefoxのバージョンアップによる仕様変更に伴い、動作しなくなることが度々あります。
その場合は、最新バージョンの仕様に対応したものが配布されていないか、まずはチェックすることをオススメします。

また、逆に、最新バージョンに対応した内容は、旧バージョンのFirefoxでは動作しない可能性もあります。
userChrome.cssやuserChrome.cssは、その点を理解された上で導入しましょう。

userChrome.cssを適用する手順は以下の通りになります。

    ●userChrome.css適用手順

  1. CSSの記述ルールに則って、メモ帳などのテキストエディタでファイルを作成、「userChrome.css」という名前で保存する(txtではなくcssで保存する点に注意)。

  2. Firefoxのプロファイルフォルダ内に「chrome」という名前のフォルダを作成し、userChrome.cssを移動させる。

  3. Firefoxを再起動して完了です。

C:\Users\ユーザー名\AppData\Roaming\Mozilla\Firefox\Profilesにある「●●●.default-release」という名前のフォルダが、プロファイルフォルダです。
Firefoxのヘルプ > トラブルシューティング情報 > プロファイルフォルダーの「フォルダーを開く」というボタンからも移動できます。

通常はプロファイルフォルダは1つだけしかないはずですが、異なるビルドのFirefoxを併用されている方など、複数のプロファイルが存在する場合は、その数だけプロファイルフォルダがありますので、ご注意を。

2019/9/7追記

ver.69より、userChrome.cssがデフォルトが無効となりました。

ver.68以前からuserChrome.cssを使用されていた方は、引き続き有効になっていますが、ver.69以降で初めてuserChrome.cssを使用される方は、別途、userChrome.cssを有効化する手順が必要となります。
about:configに「toolkit.legacyUserProfileCustomizations.stylesheets」という項目が追加されていますので、値を「true」へ切り替えて下さい。

続いて、userChrome.jsを適用する手順です。 *1

userChrome.jsは、それ自体がFirefoxに変更を加えるというより、変更を加えるスクリプトを動作させるためのファイルになります。
つまり、userChrome.jsを適用するのとは別に、スクリプトを用意する必要があります。

userChromeの適用手順は、userChrome.cssと重複する部分もありますので、合わせてチェックして下さい。

    ●userChrome.js適用手順

  1. Firefoxのプロファイルフォルダ内に「chrome」という名前のフォルダを作成する。

  2. chromeフォルダ内に「userChrome.css」を作成し、以下のように記述する。

    toolbarbutton#alltabs-button { -moz-binding: url("userChrome.xml#js"); }

  3. 以下のページを全てコピーして、chromeフォルダ内に「userChrome.xml」というファイル名で保存する。
    userChrome.xml

  4. 以下のページを全てコピーして、chromeフォルダ内に「userChrome.js」というファイル名で保存する。
    userChrome.js

  5. chromeフォルダ内にスクリプトファイルを保存する。

  6. (任意)firefox.exeを「-purgecaches」オプション付きで起動して、スタートアップキャッシュを削除する。
    スクリプト導入による変更が反映されない場合は、こちらの手順をお試しになると問題が解消するかもしれません。

ver.70以降では、上記リンク先のuserChrome.jsでは動作しないことを確認しています。
以下のページからご使用のバージョンと一致するディレクトリへ進み、そちらからuserChrome.jsを取得して下さい。
GitHub - alice0775/userChrome.js

目次

1. ポップアップを新しいウィンドウではなく新しいタブに開く
2. リンクを新しいタブに開く
3. 新しいタブを開くボタンで開くページを指定する
4. 新しくタブを開く位置を指定する
5. ブックマークを現在のタブではなく新しいタブに開く
6. ロケーションバー(アドレスバー)から現在のタブではなく新しいタブに開く
7. 検索バーから現在のタブではなく新しいタブに開く
8. リンクをバックグラウンドで開く(自動的に新しいタブに移動しないようにする)
9. 複数のタブを閉じる際に確認メッセージを表示させない
10. 最後のタブを閉じてもウィンドウを閉じない
11. 現在のタブを閉じた後に移動するタブを指定する
12. 指定したタブを一定間隔で自動的に再読み込みする
13. タブバーの表示位置を変更する
14. タブを多段表示にする NEW
15. タブを閉じるボタンを表示する条件を指定する
16. セッションを復元する
17. 閉じたタブを復元する
18. タブ/タブバーをクリックした時に指定したコマンドを実行する機能の代替
19. 不要なメニュー項目を非表示にする
20. ショートカットキーの割り当てを変更する
21. 未読タブの文字色を指定する NEW

1. ポップアップを新しいウィンドウではなく新しいタブに開く *2

about:configで「browser.link.open_newwindow」を「3」に、「browser.link.open_newwindow.restriction」を「0」に設定する。

2. リンクを新しいタブに開く

アドオン「新しいタブでリンクを開く Open Link with New Tab」で可能になります。
WebExtensions未対応の「リンクを新しいタブで開く (Open Link in New Tab)」に着想を得たアドオンで、基本的な機能は継承していますが、JavaScriptによるポップアップをタブに開くようにしたり、GoogleやYahoo!の検索結果からは新しいタブではなく現在のタブに開くようにするといった、例外設定をすることはできません。

JavaScriptによるポップアップについては、上記の「ポップアップを新しいウィンドウではなく新しいタブに開く」にて対応可能です。

3. 新しいタブを開くボタンで開くページを指定する

アドオン「New Tab Homepage」をインストールすると、Firefoxのオプションでホームページに設定しているページを開くようになります。
設定項目はなし、シンプルなアドオンです。

ホームページとは別なページを開くようにしたい場合は、アドオン「New Tab Override」で設定可能です。

4. 新しくタブを開く位置を指定する

初期設定では、新しいタブは末尾に開かれますが、アドオン「Always Right」や「Open Tabs Next to Current」をインストールすれば、現在のタブの右隣に開くようになります。

右隣の他に、先頭や左隣といった柔軟な設定がしたい方には、「Tab Open/Close Control」というアドオンもありますが、設定した項目がうまく反映されないことがあるなど、動作が不安定なので、あまりオススメはしません。

5. ブックマークを現在のタブではなく新しいタブに開く

about:configで「browser.tabs.loadBookmarksInTabs」を「true」に設定します。
ブックマークを新しいタブに開く際、バックグラウンドで開く(自動的に新しいタブに移動しない)ようにしたい場合は、同じく「browser.tabs.loadBookmarksInBackground」を「true」に設定すればOKです。

6. ロケーションバー(アドレスバー)から現在のタブではなく新しいタブに開く

アドオン「ロケーションバーから新しいタブを開く」で対応可能です。

ver.60以降では、about:configで「browser.urlbar.openintab」を「true」に設定することでも同じ結果を得ることができます。

7. 検索バーから現在のタブではなく新しいタブに開く

about:configで「browser.search.openintab」を「true」に設定します。

8. リンクをバックグラウンドで開く(自動的に新しいタブに移動しないようにする) *2

about:configで「browser.tabs.loadDivertedInBackground」を「true」に設定します。

9. 複数のタブを閉じる際に確認メッセージを表示させない *3

about:configで「browser.tabs.warnOnCloseOtherTabs」を「false」に設定します。

10. 最後のタブを閉じてもウィンドウを閉じない *2

about:configで「browser.tabs.closeWindowWithLastTab」を「false」に設定します。

11. 現在のタブを閉じた後に移動するタブを指定する

初期設定では、現在のタブを閉じた後は右隣のタブへ移動しますが、アドオン「Focus On Left Tab After Closing」をイントールすれば、左隣へ移動するようになります。

左隣の他に、先頭や末尾といった柔軟な設定がしたい方には「Tab Open/Close Control」というアドオンもありますが、設定した項目がうまく反映されないことがあるなど、動作が不安定なので、あまりオススメはしません。

12. 指定したタブを一定間隔で自動的に再読み込みする

アドオン「Tab Reloader (page auto refresh)」や「Tab Auto Refresh」で対応可能です。

13. タブバーの表示位置を変更する *4 *5

userChrome.cssに下記のように記述します。

1. タブバーをウィンドウ最下部へ移動する

#TabsToolbar {
background-color: -moz-win-accentcolor;
bottom: 0;
display: flex;
position: fixed;
}
#TabsToolbar:-moz-lwtheme { background-color: var(--toolbar-bgcolor); }
#TabsToolbar, .toolbar-items, #TabsToolbar-customization-target { width: 100%; }
#toolbar-menubar {
background-color: var(--toolbar-bgcolor);
color: var(--toolbar-non-lwt-textcolor);
}
#titlebar {
-moz-box-ordinal-group: 2;
-moz-appearance: none !important;
}
#navigator-toolbox:not([style^="margin-top:"])[style=""] #window-controls,
.titlebar-buttonbox-container {
position: fixed;
top: 0;
right:0;
height: 26px;
color: var(--toolbar-non-lwt-textcolor);
}
[tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox,
[tabsintitlebar="true"][sizemode="maximized"] .titlebar-buttonbox-container {
padding-top: 8px !important;
}
[tabsintitlebar="true"]:not([sizemode="fullscreen"]) #nav-bar { padding-right: 139px !important; }
[sizemode="fullscreen"] #nav-bar { padding-right: 109px !important; }
#main-window[privatebrowsingmode=temporary] #TabsToolbar .private-browsing-indicator {
position: fixed !important;
bottom: 0 !important;
right: 0 !important;
visibility: visible !important;
display: block !important;
}
#browser { padding-bottom: 33px; }

2. タブバーをロケーションバー(アドレスバー)下部へ移動

#toolbar-menubar {
background-color: var(--toolbar-bgcolor);
color: var(--toolbar-non-lwt-textcolor);
}
#titlebar {
-moz-box-ordinal-group: 2;
-moz-appearance: none !important;
}
#navigator-toolbox:not([style^="margin-top:"])[style=""] #window-controls,
.titlebar-buttonbox-container {
position: fixed;
top: 0;
right: 0;
height: 26px;
color: var(--toolbar-non-lwt-textcolor);
}
[tabsintitlebar="true"][sizemode="normal"] .titlebar-buttonbox-container { top: 1px; }
[tabsintitlebar="true"][sizemode="maximized"] .titlebar-buttonbox-container { top: 8px; }
[tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox { padding-top: 8px !important; }
[tabsintitlebar="true"]:not([sizemode="fullscreen"]) #nav-bar { padding-right: 139px !important; }
[sizemode="fullscreen"] #nav-bar { padding-right: 109px !important; }

14. タブを多段表示にする NEW *4

Tab Mix Plusとは動作が異なりますが、タブの多段表示自体は、userChrome.cssやuserChrome.jsを使用すれば可能です。
これまではuserChrome.cssを使用する方法をご紹介していましたが、ドラッグによるタブの移動に支障あるため、現在はuserChrome.jsの使用をオススメしています。

スクリプトを適用する手順は以下の通りになります。

  1. 以下のページよりファイルをダウンロードして、解凍する。
    多段タブ.zip | firefox用スクリプトアップローダー

  2. Firefox 69」というフォルダ内の01~06のフォルダのうち、ご希望のものを選び、格納されている「MultiRowTabLiteforFx.uc.js」ファイルをchromeフォルダへ移動させる。

  3. userChrome.js用スクリプトを利用する方法」というフォルダ内の「Firefox 69以降用」フォルダに格納されている3つのファイルを、chromeフォルダへ移動させる(userChrome.jsを適用する手順で、すでに3つのファイルを作成済の場合は、不要です)。

  4. 必要に応じて、タブ幅の固定や段数の指定を行う(別途記載)。

  5. (任意)firefox.exeを「-purgecaches」オプション付きで起動して、スタートアップキャッシュを削除する。
    スクリプト導入による変更が反映されない場合は、こちらの手順をお試しになると問題が解消するかもしれません。

デフォルトでは、タブの数に応じて幅が76px~225pxの範囲で可変しますが、2段目以降の表示が不自然で気になるという方は、タブ幅を固定することもできます。
MultiRowTabLiteforFx.uc.jsを、以下のように書き換えて下さい。
もしくは、userChrome.cssに以下の記述を追加することでも、同様の結果を得られます。

デフォルト

tabs tab[fadein]:not([pinned]){flex-grow:1;}

書き換え後

tabs tab[fadein]:not([pinned]) {
flex-grow:1;
max-width: ●●●px !important;
min-width: ●●●px !important;
}
●●●pxの部分に同じ数字を指定すると、タブ幅が固定されます。

また、段数の指定ができるスクリプトを選んだ場合は、「max-height: calc(var(--tab-min-height) * 5); /* 段数 */」の数字を変更することで、表示する段数の上限を設定できます。
デフォルトでは上限は5段となっています。

参考までに

userChrome.cssでタブを多段表示する方法の一例(ver.71 Nightlyで動作確認済)
MrOtherGuy/firefox-csshacks/multi-row_tabs.css - GitHub

15. タブを閉じるボタンを表示する条件を指定する

初期設定では、ピン留めされたタブを除き、全てのタブに閉じるボタンを表示、タブが増えてサイズが小さくなってくると、現在のタブ以外ではタブを閉じるボタンが非表示になりますが、userChrome.cssを使用すれば、細かく指定できます。
お好みに応じてお選び下さい。

2.と3.をいずれも有効にすると、タブのサイズに関係なく、現在のタブ以外ではマウスオーバー時のみ、タブを閉じるボタンが表示されます(ピン留めされたタブは除く)。

1. ピン留めされたタブを除く全てのタブでタブを閉じるボタンを常に表示

.tabbrowser-tab:not([pinned="true"]) .tab-close-button { display: block !important; }

2. 現在のタブ以外でタブを閉じるボタンを常に非表示

.tabbrowser-tab:not([selected="true"]) .tab-close-button { display: none !important; }

3. タブが小さくなった後もマウスオーバーでタブを閉じるボタンを表示(ピン留めされたタブは除く)

.tabbrowser-tab:not([pinned="true"]):not([selected="true"]):hover .tab-close-button { display: block !important; }

16. セッションを復元する

Firefoxが強制終了してしまった場合などに備えて、開いているタブと、それぞれのタブで開いたURLの履歴を保存、復元する機能です。
アドオン「Tab Session Manager」で代替することができます。

17. 閉じたタブを復元する

アドオン「Undo Close Tab」で代替することができます。
同種の機能を持つWebExtensions対応のアドオンは他にもありますが、アイコンを左クリックすると直前に閉じたタブを開く、右クリックすると最近閉じたタブの履歴から開きたいタブを選べる、という使用感のよさがポイントです。

18. タブ/タブバーをクリックした時に指定したコマンドを実行する機能の代替

大きく分けて、2種類の代替案があります。

1つ目は、「Foxy Gestures」「Gesturefy」「smartUp Gestures」といったマウスジェスチャアドオンを使用する方法。
この中では、Gesturefyが日本語に対応しています。

2つ目は、右側のタブを全て閉じる、他のタブを全て閉じるといった機能を持つボタンを、設置できるアドオンを使用する方法。
Button Guy」「asukaze」といった作者が、この手のアドオンを多く開発しています。

なお、ver.61以降では、about:configで「browser.tabs.closeTabByDblclic」を「true」に設定すると、ダブルクリックでタブを閉じることができます。

19. 不要なメニュー項目を非表示にする

userChrome.cssを使用すれば可能です。
詳細については、別記事にて解説していますので、ご参照下さい。


20. ショートカットキーの割り当てを変更する

キーボードカスタマイズソフト「Keyboard Butler ~鍵盤の執事くん~」で対応可能です。
詳細については、別記事にて解説していますので、ご参照下さい。


21. 未読タブの文字色を指定する NEW *6

ver.61以降、unreadプロパティが廃止されたため、userChrome.css単独で未読タブのスタイルを指定することはできなくなりましたが、uesrChrome.cssとuserChrome.jsの合わせ技で、未読タブのスタイルを指定することができます。

知識があれば、スクリプト内でスタイルを指定することもできるのだろうと思いますが、残念ながら私にはそこまでの知識はありませんので、この記事では、スクリプトで未読タブにunreadプロパティを付与した上で、userChrome.cssを用いてスタイルを指定するという、シンプルな方法をご紹介します。

参考までに

下記リンク先のスクリプトでは、スクリプト内でスタイルを指定できる他に、未読タブに加えて読込中タブや休止中タブのスタイルも指定できます。
userChrome.js/unreadTabs.uc.js at master · alice0775/userChrome.js · GitHub

スクリプトを適用する手順は以下の通りになります。
別途、userChrome.jsを適用する手順が必要です。

  1. 以下のページよりファイルをダウンロードして、chromeフォルダへ移動させる。
    setAttribute_unread.uc.js | firefox用スクリプトアップローダー

  2. ver.69以降の仕様変更に対応するために、setAttribute_unread.uc.jsの2行目を以下のように書き換える。

    デフォルト

    if(location.href != 'chrome://browser/content/browser.xul') return;

    書き換え後

    if(location.href != 'chrome://browser/content/browser.xhtml') return;

  3. userChrome.cssに未読タブのスタイルを書き込む。
    下記の例では、文字色を赤くしていますが、お好みに応じて、色名やRGBで指定して下さい。

    .tabbrowser-tab[unread="true"] .tab-text {color: red !important;}

  4. (任意)firefox.exeを「-purgecaches」オプション付きで起動して、スタートアップキャッシュを削除する。
    スクリプト導入による変更が反映されない場合は、こちらの手順をお試しになると問題が解消するかもしれません。



以上がTab Mix Plusの代替案のご紹介となります。

代替案ではニーズが満たされないという方には、派生ブラウザへの移行をオススメします。


なお、この記事を作成するに当たって、下記のページを参考にさせていただきました。
  1. GitHub - alice0775/userChrome.js
  2. (ブラウザ) Firefox57、webextension対応オススメアドオン (2017) - NAVER まとめ
  3. Firefoxで「他のタブをすべて閉じる」時に出てくるダイアログを消す - あまたの何かしら。
  4. 多段タブ.zip - firefox用スクリプトアップローダー
  5. How do I move my bookmarks toolbar back below the address/navigation bar? I don't like it above it. | Firefox サポートフォーラム | Mozilla サポート
  6. FireFox62の更新でカスタマイズが無効になったので再度有効にする | まちゃの休息

[特集]
ECナビ

[オススメ]
ポイントサイトのポイントインカム

関連キーワード

■雑記の最新記事

コメント

  1. ありがとうございます。
    browser.tabs.loadDivertedInBackground が私が求めていたものでした。
    勝手にアクティブになるの邪魔過ぎる……

    2018/01/10 17:35

    匿名

  2. 匿名さん

    お役に立てたようで何よりです。
    コメントありがとうございました。

    2018/01/10 18:42

    ハタラキバチ

  3. 不便だなあと思いながら使っていましたが、ようやく解消されました。
    はやく拝見していればよかった。ありがとうございました。

    2018/03/30 16:58

    しろくま

  4. しろくまさん

    コメントありがとうございます。
    Firefox Quantumに対応したTab Mix Plusもリリースされましたが、機能はまだまだ限定的で、仕様による制約がある以上、今後も旧TMPと同等の機能を期待するのは難しいと思います。
    TMPに限らず、以前と同等の使い勝手を実現するには、アドオンだけでは不十分なので、情報収集が大切になりますね。

    2018/03/30 19:15

    ハタラキバチ

  5. TabMixPlusが使えないから未だにFireFox56を使い続ける日々(時折勝手に更新されるのでその都度ダウングレードしています)
    多段表示は何とかできるのですね。タブ全体を画面下部に移動することはやはりできないのでしょうか?
    それができるまでは移行する訳にはいかない…

    2018/05/01 21:54

    MMB

  6. MMBさん

    コメントありがとうございます。

    タブバーの最下部への移動については、私自身は必要としていないので調べてみたこともなく、可否はわかりませんが、タブバーをメニューバーの下へ移動させるスタイルシートは見かけたことがあるので、最下部への移動も可能なのかもしれませんね。

    現状として機能は限定的ながら、ver.57以降の仕様に対応したTab Mix WebExtensionもリリースされていますが、仕様上、旧Tab Mix Plusの機能を全て再現するのは困難だろうと、個人的には捉えています。
    https://addons.mozilla.org/ja/firefox/addon/tab-mix-plus-webextension/

    旧Tab Mix Plusにこだわるのであれば、派生ブラウザのWaterfoxをお試しになることをオススメします。
    https://www.waterfoxproject.org/en-US/

    2018/05/01 22:30

    ハタラキバチ

  7. 多段表示にすることは出来ましたが、表示する行数を設定出来ませんか?
    開いているタブ数かなり多いので

    2018/05/11 18:55

    うみにん

  8. うみにんさん

    コメントありがとうございます。
    タブの段数を設定することは可能なようですが、この記事に掲載しているコードより格段に複雑になりそうなので、現時点では当ブログで取り上げる予定はありません。
    「firefox quantum タブ 段数」などで検索すれば、コードを掲載しているサイトが見つかりますので、申し訳ありませんが、そちらを参考にして下さい。

    2018/05/11 22:12

    ハタラキバチ

  9. わかりました
    検索してみます
    ご返信ありがとうございました

    2018/05/11 22:40

    うみにん

  10. マウスオーバーでタブを選択

    どなたかご存知なら教えてください。
    旧Tab Mix Plusに「マウスオーバーでタブを選択」という機能があり、マウスでタブ上にカーソルをもっていくと、当該タブが選択され、ページがみれるものです。
    この機能の実現のための方策はないでしょうか。
    よろしくお願い致します。

    2018/06/13 09:52

    きくぞう

  11. きくぞうさん

    コメントありがとうございます。

    私自身がそのような機能を求めていないという事情もありますが、そのようなWebExtensions対応アドオンは、私は聞いたことがありません。
    私は専門的な知識を持っているわけではないので断言まではできませんが、WebExtensionsの制約下では、そのようなアドオンは難しいのではないかという気もします。

    アドオンではなくユーザースクリプトであれば、もしかしたら、きくぞうさんの求めることを実現できるものがあるかもしれませんが、その方面にはあまり詳しくないため、これといってアドバイスできることがありません。
    申し訳ありませんが、これより先はご自身でお調べになって下さい。

    2018/06/13 11:43

    ハタラキバチ

  12. 早速御返事いただき、有難うございました。

    2018/06/13 14:15

    きくぞう

  13. フォルダ名は
    大文字のChrome
    じゃなくて
    小文字のchrome
    でしょ。

    2018/07/27 22:44

    fg

  14. fgさん

    おっしゃる通り、本来は小文字で作成すべきなのでしょうね。
    大文字でも問題なくuserChrome.cssは適用されるので、今まで気付きませんでした。
    ご指摘ありがとうございました。

    2018/07/27 23:55

    ハタラキバチ

  15. ブックマークを新しいタブで開くときにアクティブになってしまう挙動が不便で困っていましたがこの記事に救われました!
    ありがとうございました。

    2018/09/20 22:28

    匿名

  16. 匿名さん

    お役に立てたようで何よりです。
    WebExtensions版もリリースされてから半年が経過しましたが、依然として機能は限定的で、開発は難航しているようですね。
    何とか頑張ってもらいたいところですが、過大な期待は禁物といったところでしょうね、残念ながら。

    2018/09/21 00:31

    ハタラキバチ

  17. こちらの記事のおかげで希望の動作はほぼuserChrome.cssとabout:configで実現できたのですが
    「ブックマークを現在のタブの右隣に新規タブで開く」という動作だけアドオンを使わないと出来ません。
    スペックが低いので使用するアドオンは可能な限り減らしたいのですが、
    この動作はcssかabout:configでは不可能でしょうか?

    2018/10/15 11:13

    匿名

  18. 匿名さん

    新しいタブを現在のタブの右隣に開くだけであれば、「新しくタブを開く位置を指定する」の項目で紹介しているアドオンをインストールしなくても、about:configで「browser.tabs.insertAfterCurrent」をtrueにすればOKです。
    なおかつ、「ブックマークを現在のタブではなく新しいタブに開く」の項目で紹介している通り、「browser.tabs.loadBookmarksInTabs」をtrueにすれば、ブックマークを現在のタブの右隣に開くことができるかと思います。

    2018/10/15 12:44

    ハタラキバチ

  19. 説明が足りず申し訳ありません。その両方を設定しているのですが、ブックマークだけは
    右隣でなく右端に開かれてしまうんです。
    設定通り新規タブは右隣に開きますし、ブックマーク自体も新規タブでは開かれるんですが、右端にいってしまうんです。

    2018/10/16 01:12

    匿名

  20. 匿名さん

    私の環境では、先のコメント通りに設定すると、ブックマークが現在のタブの右隣に開くことを確認しました。
    リリース版、Beta、Developer Edition、Nightlyのいずれも右隣に開きます(browser.tabs.insertAfterCurrentが実装されたのがver.61なので、ESRは検証対象外)。
    右隣ではなく右端に開くようにさせている何かがあるのだと思いますが、それがアドオンなのか、何かしらの設定なのか、それは私にはわかりません。

    2018/10/16 01:42

    ハタラキバチ

  21. アドオンは広告ブロックだけ、リフレッシュしてもprefs.jsを削除してみても変わらず、なのでこれはおかしいと思い、
    一度アンインストールすべくプログラムの削除を開いたところ、まさにその…ESRの文字がありました…。
    自分は普通のバージョンを入れて使っているとずっと思っていたので驚いています…。
    大変申し訳ありませんでした。
    あっさりとブックマークが右隣に開いてくれました。
    お手数をお掛けしました。ありがとうございました。

    2018/10/16 10:57

    匿名

  22. 旧verも利用させて頂いており、今回のFirefox66で多段タブ表示されなくなったので
    こちらを覗いてみたところさっそくの更新ありがとうございます。
    「不要なメニュー項目を非表示にする」なども利用させて頂いてるので
    こちらの更新本当に有り難いです。
    試してみたのですが多段タブは問題無く成功しました。
    ですが多段タブ一番下の段のタブ横幅だけが広がってしまいます。

    2019/03/21 13:33

    匿名

  23. 匿名さん

    コメントありがとうございます。

    最下段のタブだけ、他のタブの幅と連動しないのは把握していますが、タブ幅の可変と連動の両立は、CSSでは無理だと思います。
    userChrome.jsを用いる方法であれば、両立できるスクリプトもあるのかもしれませんが、そちらの方面には詳しくないので、何とも言えません。

    タブ幅が可変ではなく固定でもよいので、統一したいということでしたら、min-widthでの最小幅指定に加えて、max-widthで最大幅を指定し、両者の設定値を同じにすれば解決するはずです。

    2019/03/21 16:57

    ハタラキバチ

  24. 説明ありがとうございます。
    max-width追加で無事全て同じタブ幅にできました。
    やっぱり使い慣れた環境が楽で良いです。
    Firefoxでおかしな変更あればまた覗かせて頂きます。
    ありがとうございました。

    2019/03/21 19:56

    匿名

  25. 5/4にアドオンの有効期限トラブルで、古いバージョンでtabmixplusを使い続けていた私は詰みました。
    新Verだと設定に苦労すると思っていましたが、この記事が凄く役に立ちました。
    ありがとう!

    2019/05/05 16:39

    匿名

  26. 匿名さん

    コメントありがとうございます。
    私はver.56以前のFirefoxはもう使っておらず、レガシーアドオンはWaterfoxでしか動かしていないので、今回の一件でver.56以前にどのような現象が生じているのか、よくわかっていないのですが、お役に立てたならよかったです。
    ver.57以降でTab Mix Plusっぽい機能を再現するだけではなく、再現しきれない何らかのこだわりのお持ちのようでしたら、Waterfoxをお試しになってみるのもよいかもしれませんね。

    2019/05/05 17:42

    ハタラキバチ

  27. 私もtabmixplusが使えなくなるのがあまりに不便で、今の今までver.56のfirefoxを使い続けていたのですが、動作も重くなってきていたし今回の件でさすがに見切りをつけて最新のverに切り替え、慣れない使い勝手に苦労していた所、こちらの記事のおかげでほとんどの機能を以前と同じような使い勝手に戻すことができました。有難うございます!

    ただ一点だけ、「タブをウィンドウ下部に表示する」という機能だけ再現できていないのですが、これについては何か方法はありますか?
    いろいろ方法を探してみたのですが何故かこれだけはとんと見つからず、ご教授頂ければ幸いです。

    2019/05/06 04:57

    匿名

  28. 匿名さん

    コメントありがとうございます。
    「タブバーの表示位置を変更する」という項目を記事に追加しました。

    私自身はデフォルトの表示位置で支障がなく、動作確認が十分ではありませんので、実際にお使いいただいて、何か支障があればお知らせいただければ幸いです。
    支障が見つかったとして、私のスキルでそれを解決できるかどうかは、また別問題ではあるのですが。

    2019/05/06 17:29

    ハタラキバチ

  29. 返信有難うございます!
    早速試してみたところ、問題なく下部に移動できました。
    ただタブの色が真っ青に変更されています。
    このままでも動作には支障ないですが一応、ご報告を。

    2019/05/06 18:59

    匿名

  30. 匿名さん

    ご連絡ありがとうございます。
    テーマに連動してタブバーの背景色が変更されるよう、CSSを修正しました。
    下記の追加で問題は解消すると思います。

    #TabsToolbar:-moz-lwtheme { background-color: var(--toolbar-bgcolor); }

    既定のテーマが適用されている場合は、Windowsの色設定に準じます。

    2019/05/06 21:03

    ハタラキバチ

  31. 背景色も修正できました。
    ずっと動作させていますが他はすべて全く問題なく使えています。
    重ね重ねお世話になりました!

    2019/05/07 00:52

    匿名

  32. 初めまして、firefox66.0.5環境に変更し、タブ位置変更方法を探してる折に、
    こちらのサイトを知りました。
    今回、是非お伺いしたいことがあるのですが、

    13. タブバーの表示位置を変更する(テスト版)
    →2. タブバーをロケーションバー(アドレスバー)下部へ移動
    こちらを導入したところ、

    ロケーションバー(アドレスバー)/メニューバー/タブバー

    上記のように、間にメニューバーが入ってしまうのですが、

    メニューバー/ロケーションバー(アドレスバー)/タブバー
    こちらのように、並べ替えることは可能でしょうか。

    2019/05/09 04:42

    匿名

  33. 匿名さん

    コメントありがとうございます。

    タブバーの表示位置を変更する方法として掲載したスタイルシートは、他の方が作成されたものに、私が少し手を加えた内容となっています。
    このような配置になっている理由は、メニューバーを最上部に表示する配置の場合、メニューバーが不必要な方に、その分の高さが無駄になってしまうから、だと思います。

    記事中のスタイルシートではなく、記事最下部に掲載している引用元4.のuserChrome-tabs_on_bottom_Fx65.cssを適用すれば、ご希望の配置になります。

    2019/05/09 13:11

    ハタラキバチ

  34. 今回の一件でfirefox66.0.5環境に変更した一員です。
    Waterfoxも試しましたが、アドオンがダウンロード出来ず動作も重いのであきらめました。
    でも、こちらのサイトのお陰で殆んどtabmixplus仕様のブラウザに仕上がりました。
    ただ、以前よく使っていたタブバーの右端にタブを閉じるボタンが表示出来ると完璧なんですが、可能でしょうか?
    宜しくお願いします。

    2019/05/10 20:04

    ナカムラ

  35. ナカムラさん

    コメントありがとうございます。

    Waterfoxでアドオンがダウンロードできないとのことですが、「Classic Add-ons Archive」はインストール済みでしょうか。
    レガシーアドオンは、addons.mozilla.orgからはもうダウンロードできないので、Waterfoxにレガシーアドオンをインストールするためには、手元にxpiファイルをお持ちの場合は別として、Classic Add-ons Archiveを通じてダウンロードする必要があります。
    ウェブ検索すれば、解説ページがすぐに見つかります。

    タブバーの右端にタブを閉じるボタンについては、現在のタブを閉じるボタンということでよろしいでしょうか。
    それならば、項目18.でも言及しているButton Guyという作者のアドオンに、「Close Tab Button」というものがありますので、そちらをインストールした上で、Firefoxの「カスタマイズ」で表示位置をタブバーへ変更する、という方法でいかがでしょうか。

    仮に、エラーでダウンロードができない場合は、「Firefoxへ追加」を右クリックして、名前を付けてリンク先を保存、ダウンロードしたxpiファイルを、Firefoxへドラッグ&ドロップしてみて下さい。

    2019/05/10 21:20

    ハタラキバチ

  36. 有難う御座います。
    早速試してみましたが、出来ました。
    Waterfoxの件ですが、firefox66.0.5のほうが動作が軽く快適なので、当分この仕様で行こうと思います。
    Waterfoxは、また問題が起こったら考えたいと思います。

    2019/05/10 21:55

    ナカムラ

  37. おおだすかりです

    2019/5/4の「Firefoxご乱心」騒動の後、ようやくリリースされた改善策のが中途半端にインストされ、挙動おかしくなったのであれこれやってたら設定がパーに!
    そんな中、検索で引っ掛かってくれたこちらサイトの記事で大変助かりました~
    感謝^2 でゴザイマス

    2019/05/26 21:29

    B.E.

  38. B.E.さん

    記事がお役に立ったとのことで、何よりです。
    コメントありがとうございました。

    2019/05/27 00:38

    ハタラキバチ

  39. [タブバーをウィンドウ最下部へ移動する]を適用した者ですが
    適用成功と思ってからよく確認してみると、ブックマークやページの一番下の一部分がタブバーの裏に隠れてしまう現象が出ていてページによっては一部が読めなかったりしてしまうのですが、これをどうにかする方法はありますか?
    できればtabmixplusのようにブックマークやページのスクロールバーの最下部がちょうどタブバーの上で止まるような形にしたいのですが

    2019/06/12 19:42

    匿名

  40. 匿名さん

    コメントありがとうございます。

    タブバーをウィンドウ最下部へ移動するコードを更新しました。
    下記の追加で問題は解消すると思います。

    #content-deck { padding-bottom: 33px; }

    2019/06/12 21:58

    ハタラキバチ

  41. さっそく指示通りにコードを追加したところ、見事に解決しました。
    ありがとうございます。

    2019/06/13 09:32

    匿名

  42. ありがとうございました

    概ね思い通りになりました
    感謝です

    2019/07/07 16:10

    ポンポコ

  43. #content-deck { padding-bottom: 33px; }

    多段タブだと意味ないですね

    2019/08/18 17:44

    匿名

  44. 匿名さん

    タブバーをウィンドウ最下部へ移動するCSSのことをおっしゃっているのだと思いますが、そもそも、当該CSSは多段タブとの両立は前提としていません。
    単純に、最下部にタブバーの高さの余白を設けて、その余白部分にタブバーを配置しているだけなので、余白を予め大きくするといった野暮ったいやり方ならありますが、多段タブの段数に応じて余白の大きさを増減させるといったことは、CSSでは無理かと思います。

    2019/08/18 19:28

    ハタラキバチ

コメントを書く

*「コメント」以外は空欄のままでもご投稿いただけます
ECナビでウェル活をもっとお得に
ポイントインカム
[PR]