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

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

この記事では、Vivaldi のオリジナルカスタムUI機能を使って、マウスオーバーでタブを選択するJavascriptについて書きます。

CSSよりも複雑な操作が可能になります。

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

マウスオーバー（マウスを上に乗せること）でタブをアクティブ化するJavascriptです。

マウスを乗せるだけで、自動でタブがアクティブになります。

タブを大量に開いて、頻繁に切り替える方におすすめです。

垂直タブでも、水平タブでも機能します。

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

VivaldiのオリジナルカスタムUI機能（CSS）については、こちらの記事で書きましたが、ちょっとレベルアップして「動き」のあることを実現してみようと思い、JavaScriptに手を出してみました。

1. オリジナルカスタムUI（CSS）を使うには？
2. Javascriptを使えるようにする
3. Javascriptを記述する
4. 【注意点】Vivaldiのアップデート
5. JavaScriptを無効にする方法
6. 感想

オリジナルカスタムUI（CSS）を使うには？

この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。

有効にしていないという方は、以下の記事を参考にしてみてください。ただし、今回の場合はCSSではなく、Javascriptなので以下の作業内容＋αが必要になります。

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

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

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

Javascriptを使えるようにする

今回はCSSではなく、マウスオーバーでタブを選択するといった動きのある操作なので、Javascriptを利用します。

上記の記事で紹介しているCSS ファイルでは使うことができません。

ということで、「まずはJavascriptを使えるようにしてみよう！」のコーナーです。

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

大きな流れは、以下の4ステップです。

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

一度ファイルを作成しておけば、今後は4番目の作業だけです。

初心者でもできるので、頑張ってみましょう。

Javascriptファイルを作成

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

Vivaldiがインストールされている以下の場所に、「custom.js」ファイルを作成します。

::以下の場所に「custom.js」ファイルを作成する
C:\Users\ユーザー名\AppData\Local\Vivaldi\Application\バージョン名\resources\vivaldi

::例：ナポリタン寿司の場合
C:\Users\Naporitansushi\AppData\Local\Vivaldi\Application\5.0.2497.28\resources\vivaldi

Vivaldiのインストール場所は、以下のアドレスをVivaldiのアドレスバーに入力することで調べれます。

vivaldi://about/

表示されたページの中の「実行ファイルのパス」という部分が、Vivaldiがインストールされている場所です。

この部分のApplicationフォルダーまでをコピーして、エクスプローラーのアドレスバーに貼り付けます。

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

エクスプローラー上部の表示タブ→「隠しファイル」にチェックを入れると表示されます。

Windows11の場合

Windows11の場合は、表示→表示→隠しファイルで表示できます。

Application フォルダーの中にあるバージョン名は、使用しているバージョンによって異なります。

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

メモ帳が作成されるので、名前を「custom.js」にします。

テキストドキュメントの末尾にある「.txt」も全部選択した状態で名前変更します。

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

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

Windows10でも大体同じです。

拡張子を変更するので、注意画面が表示されます。「はい」をクリックします。

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

下記画像は、ダメな例です。拡張子が「txt」のままで変更されていません。しっかり、拡張子含めてリネームしましょう。

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

「browser.html」と呼ばれるファイルのバックアップを作成します。

へまをしない限りは失敗しないので、とらなくても大丈夫っちゃ大丈夫です。

初心者さんは、バックアップしといたほうがいいかなと思います。

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

::「browser.html」を別の場所にバックアップする
C:\Users\ユーザー名\AppData\Local\Vivaldi\Application\バージョン名\resources\vivaldi\browser.html

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

見つけたらコピーして、どっかに保存します。

人によっては拡張子を非表示にしている場合があるので「browser」って名前かもしれません。

めんどくさい人は、そのまま同じ場所にコピペでもOKです。あんまりおすすめはしません。

ドキュメントにでも「VivaldiCSS用バックアップ」フォルダーを作成して、その中に入れとくといいかなぁと思います。

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

先ほどバックアップしたbrowser.htmlの本体を編集していきます。

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

browser.htmlを何かしら編集できるエディターで開きます。

Windowsなら、標準搭載されているメモ帳、または外部ソフトのVisual Studio Codeなどがおすすめです。

右クリック→プログラムから開くでエディター（Visual Studio Codeやメモ帳）を選択します。

ずらーと表示されます。その中の「<script src="bundle.js"></script>」と「</body>」の間に、以下のコードを入力します。

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

全体像としては、以下のようになるはずです。

<!DOCTYPE html>
<html>
  <head>
    <!-- Keep the styling in sync with ./window.html -->
    <meta charset="UTF-8" />
    <title>Vivaldi</title>
    <link rel="stylesheet" href="style/common.css" />
    <link rel="stylesheet" href="chrome://vivaldi-data/css-mods/css" />
    <style>
      body {
        background-color: #d2d2d2;
        background-image: url('resources/vivaldi-splash-icon.svg');
        background-size: 16%;
        background-position: center;
        background-repeat: no-repeat;
      }
      @media (prefers-color-scheme: dark) {
        body {
          background-color: #2d2d2d;
        }
      }
    </style>
  </head>
  <body>
    <div id="app" />
    <script src="background-common-bundle.js"></script>
    <script src="vendor-bundle.js"></script>
    <script src="settings-bundle.js"></script>
    <script src="urlbar-bundle.js"></script>
    <script src="components-bundle.js"></script>
    <script src="bundle.js"></script>
    <!-- 以下にJavaScriptを読み取らせるためのコードを記述 -->
    <script src="custom.js"></script>
  </body>
</html>

書き込めたら、ファイル→保存で上書き保存します。

Javascriptを記述する

本題のJavascriptです。マウスオーバーでタブをアクティブにするコードを紹介します。

作成した「custom.js」に書き込んでいきます。Visual Studio Codeやメモ帳で開きます。

右クリック→プログラムから開く→プログラムを選択をクリックします。

僕は、Visual Studio Codeで開きます。

コードを入力できる画面が開きます。

以下のVivaldiフォーラムで紹介されてあるJavaScriptをコピペします。

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

本記事に、そのままコピペしておきます。どの部分をコピペしたらいいかわからない方は、以下のJavaScriptを丸ごとコピペしてみてください。

// 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);
    }
}

コードを書き込めたら上書き保存します。

コードの30行目にある数字がポイントです。「const delay = 300; //pick a time in milliseconds」って部分です。

ここの数字を変更することで、マウスを乗せてから、タブがアクティブになるまでの時間を調整できます。

単位はミリ秒になっています。初期では、300ミリ秒になっています。

素早く切り替えたい場合は、100ミリ秒とかにしてみましょう。

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

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

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

保存したら、ブラウザを再起動します。

マウスオーバーでタブがアクティブになります。

タブスタックは、アクティブ化されずにクリックで開ける仕様になっています。

【注意点】Vivaldiのアップデート

Vivaldiがアップデートする度に「browser.html」のファイルは更新されます。

つまりJavaScriptを読み込ませるためのコードがアップデートすると消えてしまいます。

よって、アップデートする度に「browser.html」に読み取らせるためのコードを追記するようにしましょう。

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

毎回、custom.jsを作成してコードを書き直して～の必要はありません。

custom.jsは自分で消さない限りは残るので、browser.htmlに読みこませるためのコードを記述するだけです。

JavaScriptを無効にする方法

一時的にJavaScriptを無効にするには、「browser.html」に追記した「custom.js」のコードを削除します。

上書き保存してブラウザを再起動すると、JavaScriptが無効になります。

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

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

感想

以上、マウスオーバーでタブをアクティブ化するJavaScriptについてでした。

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

参考：【Vivaldi】ブックマークバーをマウスオーバーで自動展開するCSS | ナポリタン寿司のPC日記
参考２：【Vivaldi】Chrome拡張機能をマウスオーバーで展開するCSS | ナポリタン寿司のPC日記

Posted by ナポリタン寿司

【StartAllBack】Windows11の外観をWindows10風に戻す有料ソフト

【waifu2x-caffe】画像を高画質で綺麗に拡大するソフトの使い方