【Vivaldi】Chrome拡張機能をマウスオーバーで展開するCSS

2021年11月2日カスタムCSS

「Vivaldi」のアイコン

この記事では、「Vivaldi(ヴィヴァルディ)」ブラウザのオリジナルカスタムUI機能を使って、Chrome拡張機能をマウスオーバーで展開する方法について書きます。

見栄えがすっきりします。

【Vivaldi】Chrome拡張機能をマウスオーバーで展開するCSS

本記事のCSSを使うことで、ナビゲーションバー内にあるChrome拡張機能(ジグソーパズルアイコン)をマウスオーバーで展開できます。

通常、Chrome拡張機能を隠していると、以下の手順で展開する必要があります。人によっては手間だと感じるかもしれません。

  1. 展開ボタンをクリック
  2. 使いたい拡張機能をクリック

導入すると、展開ボタンにマウスを乗せるだけで、拡張機能が表示されます。些細な点ですが、見栄えをスッキリさせたい方に、便利かもしれません。展開ボタンをクリックすると、「ボタンを隠す」に設定している拡張機能を表示します。

言葉だと難しいので、動画を貼っておきます。普段は非表示になっているので、見栄えがすっきりします。

本記事は、オリジナルカスタムUIが有効になっていることを前提に書きます。有効にしていないという方は、以下の記事を参考にしてみてください。

Chrome拡張機能をマウスオーバーで展開するCSS

CSSは以下になっています。

/* マウスオーバーでChrome拡張機能を展開 */
.toolbar-extensions:not(:hover):not(:focus-within) .ExtensionIcon {
  display: none;
}

本記事のCSSは、こちらのVivaldiフォーラムを参考にさせていただきました。感謝です。

以下のようになっています。マウスを乗せていない時、非表示にするというコードになっています。これにより、マウスを乗せたときだけ表示します。

CSS意味
.toolbar-extensionsChrome拡張機能を指すコード
not(:hover)マウスを乗せていない時
not(:focus-within)フォーカスされていない時
display: none;非表示にする

カスタムCSSファイルを、テキストエディター(Visual Studio Codeやメモ帳など)で開いて、書き込みます。

「Visual Studio Code」のスクリーンショット

書き込んだら、上書き保存して、ブラウザを再起動します。

これで、マウスを乗せた時だけ拡張機能エリアが展開します。クリックで拡張機能を利用できます。

ナビゲーションバー内にあるChrome拡張機能エリアをマウスオーバーで展開したGIF画像

展開ボタンをクリックすると、「ボタンを隠す」にしている拡張機能が表示されます。

拡張機能の展開ボタンクリック前とクリック後の比較画像

拡張機能は、右クリック→「ボタンを隠す」で非表示にできます。

Chrome拡張機能を隠す手順画像

感想

以上、「Vivaldi(ヴィヴァルディ)」ブラウザのナビゲーションバー内にあるChrome拡張機能エリアを、マウスオーバーで展開するCSSでした。

同じようなホバー系で、ブックマークバーの自動展開があります。気になった方は、参考にしてみてください。

ちょっと高度になりますが、「JavaScript」を利用することで、タブをマウスオーバーでアクティブ化できます。素早くタブを切り替えたい人におすすめです。

2021年11月2日カスタムCSS