【Vivaldi】マウスオーバーでタブをアクティブ化する方法。Javascript！

​2021年11月7日​2022年12月5日​カスタムCSS

この記事では、「Vivaldi（ヴィヴァルディ）」ブラウザのオリジナルカスタムUI機能を使って、マウスオーバーで、タブを切り替える「カスタムJS」について書きます。

本記事は、オリジナルカスタムUIが有効になっている前提です。詳しくはこちらを参考にしてみてください。

本記事で紹介する「カスタムJavaScript」を利用することで、マウスオーバー（マウスを上に乗せること）でタブをアクティブ化できます。

マウスを乗せるだけで、タブが切り替わります。タブを大量に開いて、頻繁に切り替える方におすすめです。垂直タブでも、水平タブでも機能します。

マウスを乗せた後のアクティブ化するタイミング（時間）は、自分で好きなように調整できます。

「いちいちマウスでクリックして、タブを切り替えるのがめんどくさい！マウスを乗せるだけの簡単操作で、タブを切り替えたい！」という方におすすめです。

実際に適用してみた動画を貼っておきます。

本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。ただし、今回の場合はCSSではなく、Javascriptなので、以下の作業内容＋αが必要になります。

【Vivaldi】カスタムCSSの導入方法。自由にカスタマイズしてみよう！

この記事では、ウェブブラウザ「Vivaldi」にCSSを適用する方法について書きます。ブラウザの外観（UI） ...

 https://www.naporitansushi.com/vivaldi-css/

「Javascript」を使えるようにする

既に「Javascript」が使える状態になっている場合は、こちらへ飛んでください。

大きな流れは、以下の4ステップです。一度ファイルを作成しておけば、以降は4番目の作業だけです。

1. 【初回のみ】「Javascript」のファイルを作成
2. 【初回のみ】「browser.html」のバックアップを作成
3. 【初回のみ】「browser.html」に読み取るためのコードを記述
4. 「Javascript」のコードを書き込む

Javascriptファイルを作成

「Javascript」を書き込むためのファイルを作成していきます。

Vivaldiブラウザがインストールされている場所を開きます。デフォルトのインストール場所を変更していない場合は、以下の場所になっています。

<!--Vivaldiのデフォルトインストール場所-->
%LOCALAPPDATA%\Vivaldi\Application\バージョン名\resources\vivaldi

<!--例：ナポリタン寿司の場合-->
C:\Users\Naporitansushi\AppData\Local\Vivaldi\Application\5.5.2805.50\resources\vivaldi

Vivaldiブラウザのインストール場所を調べる方法

ブラウザを起動して、以下のURLをアドレスバーに貼り付けます。

vivaldi://about/

表示されたページの中の「実行ファイルのパス」という部分が、インストールされている場所です。この部分の「Application」フォルダーまでをコピーして、エクスプローラーに貼り付けます。

「AppData」フォルダーが見つからない場合

「AppData」フォルダーは、隠しフォルダーになっています。

Windows11の場合は、エクスプローラー上部の表示→表示→「隠しファイル」で表示できます。

「Application」フォルダー内にあるバージョン名は、利用しているバージョン番号によって異なります。

「resources」フォルダーの中にある「vivaldi」フォルダーを開いたら、空いているところを右クリック→新規作成→「テキストドキュメント」をクリックします。

メモ帳が作成されるので、名前を「custom.js」にします。テキストドキュメントの末尾にある「.txt」も全部選択した状態で名前変更します。拡張子を変更するので、確認画面が表示されます。「はい」をクリックします。

拡張子が表示されないよーという方

Windows11の場合は、エクスプローラーの画面上部にある「表示」→「ファイル名拡張子」にチェックを入れます。

ポイント

拡張子「txt」が残っていたらダメです。削除して「js」拡張子にします。

「Javascript」ファイルが作成されます。

「browser.html」のバックアップを作成

「browser.html」と呼ばれるファイルをバックアップします。バックアップしなくてもいいんですが、初心者さんは作成しておくといいかなと思います。

「custom.js」を作成した同じ場所に、「browser.html」があります。

<!--「browser.html」を別の場所にバックアップする-->
%LOCALAPPDATA%\Vivaldi\Application\バージョン名\resources\vivaldi\browser.html

<!--例：ナポリタン寿司の場合-->
C:\Users\Naporitansushi\AppData\Local\Vivaldi\Application\5.5.2805.50\resources\vivaldi\browser.html

見つけたらコピーして、Vivaldiフォルダー以外の場所に配置します。切り取りじゃなくてコピーなので、間違えないにしましょう。ドキュメントとかデスクトップでいいと思います。

「browser.html」に読み取るためのコードを記述

先ほどバックアップした「browser.html」の本体を編集していきます。バックアップした方ではなく、元の「browser.html」を編集します。元のほうに変更を加えるため、バックアップが必要だったというわけです。

テキストエディターで開きます。Windows11なら、標準搭載されているメモ帳、または外部ソフトの「Visual Studio Code」がおすすめです。

「browser.html」ファイルを右クリック→「プログラムから開く」で、テキストエディター（Visual Studio Codeやメモ帳）を選択します。

コードが表示されます。その中の「<script src="〇〇"></script>」と書かれた行の最後を改行して、以下のコードを書き込みます。「</script>」と「</body>」の間ですね。

<script src="custom.js"></script>

書き込めたら、上書き保存します。

マウスオーバーでタブ切り替えの「Javascript」を記述する

マウスを乗せて、タブを切り替えるJavaScriptコードを「custom.js」に記述していきます。

作成した「custom.js」を右クリック→プログラムから開く→「プログラムを選択」をクリックします。好きなテキストエディターを選択します。

開けたら、以下のコードをコピペします。

// Activate Tab On Hover
// https://forum.vivaldi.net/topic/50354/create-a-new-mod-mouseover-tab-select/4
// Activates tab on hover.

{
    function activateTab(e, tab) {
        if (!tab.parentNode.classList.contains('active') && !e.shiftKey && !e.ctrlKey) {
            tab.addEventListener('mouseleave', function () {
                clearTimeout(wait);
                tab.removeEventListener('mouseleave', tab);
            })
            wait = setTimeout(function () {
                if (tab.parentNode.parentNode.classList.contains('is-substack')) {
                    const down = document.createEvent('MouseEvents');
                    down.initEvent('mousedown', true, true);
                    tab.dispatchEvent(down);
                    const up = document.createEvent('MouseEvents');
                    up.initEvent('mouseup',true,true);
                    tab.dispatchEvent(up);
                }
                else {
                    const id = Number(tab.parentNode.id.replace( /^\D+/g, ''));
                    chrome.tabs.update(id, {active: true, highlighted: true});
                }
            }, delay)
        }
    }

    var wait;
    const delay = 300; //pick a time in milliseconds
    var appendChild = Element.prototype.appendChild;
    Element.prototype.appendChild = function () {
        if (arguments[0].tagName === 'DIV' && arguments[0].classList.contains('tab-header')) {
            setTimeout(function () {
                var trigger = (event) => activateTab(event, arguments[0]);
                arguments[0].addEventListener('mouseenter', trigger);
            }.bind(this, arguments[0]));
        }
        return appendChild.apply(this, arguments);
    }
}

上記コードは、以下の「Vivaldiフォーラム」を参考にさせていただきました。感謝です。

参考：New fantastic mod by luetage: Activate Tab On Hover | Vivaldi Forum

書き込めたら、上書き保存します。

コードの30行目にある数字でアクティブになるまでの時間を調整できます。「const delay = 300; //pick a time in milliseconds」って部分です。

単位はミリ秒になっています。初期では、300ミリ秒になっています。素早く切り替えたい場合は、100ミリ秒にします。

const delay = 100; //pick a time in milliseconds

デフォルトの300ミリ秒、カスタマイズして100ミリ秒にした時の比較動画を貼っておきます。

「100」だと、ほぼ遅延がない状態で、アクティブ化されます。

ファイルを保存できたら、ブラウザを再起動します。これで、マウスオーバーでタブがアクティブ化します。タブスタックは、アクティブ化されずに、クリックで開ける仕様になっています。

垂直タブでも利用可能です。

【注意点】Vivaldiのアップデートの度に「browser.html」がリセットされる

ブラウザをアップデートする度に、「browser.html」ファイルが更新されるようになっています。つまり、アップデートの度にコードを書きなおす必要があります。

<script src="custom.js"></script>

「custom.js」の中身は、更新されないので修正する必要はありません。「browser.html」のみです。

「JavaScript」を無効にする方法

カスタムJSを無効化したい場合、「browser.html」に追記した「custom.js」のコードを削除します。上書き保存してブラウザを再起動すると、カスタムJSが無効になります。

完全に削除したい場合は、合わせて作成した「custom.js」も削除します。

感想

以上、「Vivaldi（ヴィヴァルディ）」ブラウザのカスタムJS機能を使って、マウスオーバーでタブをアクティブ化する方法でした。

マウスオーバーで表示する系のCSSは、いくつか紹介しているので、気になったら参考にしてみてください。

• 【Vivaldi】ブックマークバーをマウスオーバーで自動展開するCSS
• 【Vivaldi】Chrome拡張機能をマウスオーバーで展開するCSS