ソフトウェアエンジニア目線で使ってみて便利だったChrome拡張を紹介する

Thu, 12 Dec 2024 15:00:00 +0000

本記事はUnipos Advent Calendar 2024の13日目の記事です。

本記事では使ってみて便利だったChrome拡張を紹介します。

Stylus

ユーザー定義のCSSを手軽に適用できるChrome拡張です。

筆者の使い方としてはNotionのガントチャートを見やすくしたり、GitHubのUIの幅を大きくしたりしています。PR上で実行計画を見る際などにスクロールしなくてよくなり便利になりました。

Google search results shortcuts

Google検索結果のページでキーボードショートカットを使えるようにするChrome拡張です。

筆者がよく使うのは以下です。

↑: 1つ上の検索結果に移動
↓: 1つ下の検索結果に移動
Enter: 選択中の検索結果を開く

以下のような操作がキーボードだけでできるようになります。¹

Vimium

言わずと知れたvimのような操作感でChromeを操作できるChrome拡張です。

あらゆる操作をキーボードだけで行いたいと考えている筆者にとってはなくてはならない拡張です。²

基本的な操作方法についてはたくさんの情報があると思いますのでここでは筆者のキーマップや最近知った機能について紹介します。

まずキーマップについてですが、以下のようにして左手だけで操作しやすいように設定しています。

map q goBack
map d goForward
map s scrollPageUp
map a scrollPageDown
map w scrollDown
map e scrollUp

また、最近知ったvimiumの機能についても紹介したいと思います。ふとREADMEを眺めていたら

gi      focus the first (or n-th) text input box on the page. Use <tab> to cycle through options.

という記述を見つけました。

フォーカスできるテキストボックスが1つの場合はその要素にフォーカスが当たり、複数の場合はタブで切り替えることができます。これまではマウスを使ってフォーカスを当てていましたがこれを知ってからマウスへの依存をより下げることができました。

GCP console colorize

Google Cloudのプロジェクトごとにヘッダーの色を変更するChrome拡張です。

以下のようにプロジェクトごとに色を分けておくとうっかり間違って操作することを防ぎやすくなります。（環境ごとに適切な権限管理をするのは前提として）

環境	イメージ画像
project-a
project-b

LTTM

PRレビューの際にいい感じの画像を手早く貼ることができるChrome拡張です。

PR上でのコミュニケーションが捗っています。

find+ | Regex Find-in-Page Tool

正規表現を使ってページ内を検索できるChrome拡張です。

便利です。

Notion Sidebar Tamer

Notionのサイドバーにマウスカーソルが近づいたときにサイドバーが表示されるのを防ぐChrome拡張です。

1日に1回はこの挙動にストレスを感じていたのでQOLが上がりました。

たとえば次のようなNotionページの赤枠部分をコピーしたいとします。

コピーするには赤枠の左あたりにカーソルを持っていく必要がある³のですが判定が結構厳しいので意図せずサイドバーが表示されてしまうことがよくあります。

そこでNotion Sidebar Tamerを使うとカーソルをサイドバー付近に移動してもサイドバーが表示されなくなります。やったね！

おわりに

Chrome拡張開発者のみなさんに圧倒的感謝…！

ちなみに可愛い動物が表示されているのはTabby Catの機能です。cmd + Tで新しいタブを開くと可愛い動物たちとchillな時間を過ごすことができます。 ↩︎
早くNotionとSlackがキーボードだけで操作できるようになってほしいです。あわよくば誰か完璧なTUIクライアントを作ってください。 ↩︎
このケースだとカーソルを右側に持っていってコピーすることもできますが普段は左側に持っていかないとコピーが難しいケースが多いためこのように書いています。具体的なケースが思い出せたら記事を修正しようと思います。 ↩︎

Notionのダークモードのガントチャートが見づらいのをChrome拡張で修正する方法

Fri, 08 Nov 2024 14:34:37 +0000

できること

Notionのガントチャートが見づらいのをなんとかするスクリプト

Before

After

前提条件

NotionをChromium系のブラウザで利用していること

やり方

下記のリンクからStylusをインストール https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja
Manageをクリックして管理画面を開く
Write new styleをクリック

次のCSSを入力しURLのブロックにURLs starting with: https://www.notion.so/を指定しSaveをクリック

.notion-selectable.notion-page-block.notion-timeline-item a {
    background: rgba(255, 255, 255, 0.15)
}

みやすくなる

Chrome Extension on blog.kyu08.com