【Vivaldi】マウスオーバーでタブをアクティブ化する方法。Javascriptを使ってみよう！
この記事では、Vivaldi のオリジナルカスタムUI機能を使って、マウスオーバーでタブを選択するJavascript について書きます。
マウスオーバー（マウスを上に乗せること）でタブをアクティブ化するJavascript です。
マウスをタブに乗せるだけで自動でタブをアクティブ化します。マウスを乗せた後に、アクティブ化するタイミング（時間）は自分で好きな用に調整できます。
分かりやすいように動画も貼っておきます。
Vivaldi にCSS を適用する方法について書きましたが、ちょっとレベルアップして”動き”のあることを実現してみようと思い、JavaScript に手を出してみました。
CSS はもちろんのこと、Javascript もさっぱりなので、あくまでVivaldiフォーラムにあったものを参考にさせていただいただけです。Javascript…。やはり動きのある拡張はJavascript ですよねぇ…。はぁ、頑張って覚えないといかんですなぁ。
オリジナルカスタムUI（CSS）を使うには？
この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。
有効にしていないという方は、以下の記事を参考にしてみてください。ただし、今回の場合はCSS ではなく、Javascript なのでちょっと作業は複雑になります。
https://www.naporitansushi.com/vivaldi-css/Javascript を使えるようにする
今回はCSS ではなく、マウスオーバーでタブを選択するといった動きのある操作なので、Javascript を利用します。上記の記事で紹介しているCSS ファイルでは使うことができません。
そこで、まずはJavascript を使えるようにしてみよう！のコーナーです。
既にJavascript は使える状態になっている場合は、こちらへ飛んでください。
これからの流れとしては、
①Javascript が使えるように、ファイルを作成する
1.browser.HTMLのバックアップを作成
2.Javascriptファイルを作成
3.browser.HTMLに読み取るためのコードを記述
②Javascript のコードを書き込むの大きく2ステップとなっています。一度、ファイルを作成しておけば、今後は②の作業だけで済みます。初心者でもできるので頑張ってみましょう。
「browser.HTML」のバックアップを作成
さて、まずは「browser.html」と呼ばれるファイルのバックアップを作成します。よほどへまをしない限りは失敗しないので、とらなくても大丈夫っちゃ大丈夫です。初心者さんはバックアップしといたほうがいいかなと思います。
Vivaldi がインストールされているフォルダを開きます。どこに保存されているかは、以下のURL をブラウザのアドレスバーに入力したら分かります。
vivaldi://about/コマンドラインって書いてある部分が、保存されている場所です。今回は、スナップショット版でやってみます。
上記の説明だけで理解できなかった方は、以下の記事を参考にしてみてください。
参考：【Vivaldi】保存場所を調べる方法＆データのバックアップ方法。別PCに転送する時に便利 | ナポリタン寿司のPC日記
Vivaldi がインストールされているApplication フォルダを開いたら、以下の場所に移動します。黄色ハイライトの部分はバージョン名のフォルダなので、数字が若干違う可能性があります。
Application\4.4.2473.3\resources\vivaldiマウスでフォルダーをカチカチしていきます。
目的のフォルダまで移動したら「browser.html」をコピーしてどっかに保存しときます。人によっては、拡張子オフにしている場合があるので「browser」ってなっているかもです。
めんどくさい人は、そのまま同じ場所にコピペでもOKです。
あんまりおすすめはしません。適当にドキュメントにでも「VivaldiCSS用バックアップ」フォルダ作ってその中に入れとくみたいなのがいいかなぁと思います。
Javascriptファイルを作成
続いて、Javascript を書き込むためのファイルを作成します。上記の「browser.html」があるフォルダ内に新しく「custom.js」ファイルを作成します。
vivaldi フォルダ内のあいている箇所を右クリック → 新規作成 → テキストドキュメント をクリックします。
メモ帳が作成されるので、名前を「custom.js」にします。この時、テキストドキュメントの末尾にある「.txt」も全部選択した状態で名前変更しましょう。
Windows11 の場合は、エクスプローラーの画面上部にある「表示」をクリック → ファイル名拡張子 にチェックを入れると表示されます。
Windows10 でも大体同じです。
拡張子を変更するので注意画面が表示されますが、OKなので「はい」をクリックします。
無事にJavascript ファイルが作成されます。
browser.HTMLに読み取るためのコードを記述
続いて、先ほどバックアップしたbrowser.html を編集していきます。
バックアップした方ではなく、元のbrowser.html を編集しましょう。元の方に変更を加えるため、バックアップが必要だったというわけです。
browser.html を何かしら編集できるソフトで開きます。
僕の記事を見て、Vivaldi のCSS を使えるようにしているという方だと、「Visual Studio Code」あたりを持っていると思います。メモ帳でもOKです。
右クリック → プログラムから開く → Visual Studio Code で開けます。
ずらーと表示されます。その中の「<script src="bundle.js"></script>」と「</body>」の間に以下のコードを入力します。
<script src="custom.js"></script>書き込めたら、ファイル → 保存 で上書き保存します。
Javascript
さー、ようやく本題のJavascript コードです。上記の段階で作成したcustom.js に書き込んでいきます。「Visual Studio Code」や「メモ帳」でcustom.js を開きます。
右クリック → プログラムから開く → プログラムを選択 をクリックします。
僕は、Visual Studio Code で開きます。
コードを入力できる画面が開くので、以下のVivaldiフォーラム で紹介されているコードを貼り付けます。
参考：New fantastic mod by luetage: Activate Tab On Hover | Vivaldi Forum
luetage さんという方が、紹介されているコードです。
コードを書き込めたら、上書き保存します。
コードの一部にある以下の部分を自分の時間に設定できます。本記事の冒頭で紹介している動画では、100にしています。僕のおすすめは100です。
const delay = 300; //pick a time in milliseconds保存したら、ブラウザの再起動をしましょう。無事にマウスオーバーでタブがアクティブになります。
タブスタックは、アクティブ化されずにクリックで開ける仕様になっています。
まとめ
以上、マウスオーバーでタブをアクティブ化するJavaScript についてでした。
マウスオーバー系はほんとに便利ですね。
「こういうことやってみたい！」ってのがあったらぜひコメント欄で教えていただきたいです。僕が全力で調べます。（調べるだけでーーす！自分ではコード全くかけませーーん！簡単なCSS なら何とかできます…。）