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

この記事では、Vivaldi のオリジナルカスタムUI機能を使って、マウスオーバーでタブを選択するJavascriptについて書きます。
CSSよりも複雑な操作が可能になります。

マウスオーバー(マウスを上に乗せること)でタブをアクティブ化するJavascriptです。
マウスを乗せるだけで、自動でタブがアクティブになります。
タブを大量に開いて、頻繁に切り替える方におすすめです。
垂直タブでも、水平タブでも機能します。
マウスを乗せた後のアクティブ化するタイミング(時間)は、自分で好きなように調整できます。
VivaldiのオリジナルカスタムUI機能(CSS)については、こちらの記事で書きましたが、ちょっとレベルアップして「動き」のあることを実現してみようと思い、JavaScriptに手を出してみました。
オリジナルカスタムUI(CSS)を使うには?
この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。
有効にしていないという方は、以下の記事を参考にしてみてください。ただし、今回の場合はCSSではなく、Javascriptなので以下の作業内容+αが必要になります。
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」フォルダーは、隠しフォルダーになっています。
エクスプローラー上部の表示タブ→「隠しファイル」にチェックを入れると表示されます。

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

resources フォルダーの中にあるvivaldi フォルダーを開けたら、空いているところを右クリック→新規作成→テキストドキュメントをクリックします。
メモ帳が作成されるので、名前を「custom.js」にします。
テキストドキュメントの末尾にある「.txt」も全部選択した状態で名前変更します。

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

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日記
参考2:【Vivaldi】Chrome拡張機能をマウスオーバーで展開するCSS | ナポリタン寿司のPC日記