【クソアプリ】昼休み中にGitHubの拡張機能を作って業務効率化を図ってみた

つくったもの

めちゃくちゃ単純です。
GitHubで、上にマウススクロールした時にヘッダーナビゲーションが出現し、下にマウススクロールすると消えます。
👇こんな感じです！！

上にスクロール時

下にスクロールすると元のGitHubのUIになります。

なぜ作った？

ﾖﾜﾖﾜ系エンジニアの私はGitHubでコードレビューや設計書を眺めている時、リポジトリの移動やタブの複製をするために、一生懸命マウススクロールしてヘッダーナビゲーションに向かっています。
ショートカットキーでええやん！！と突っ込まれそうですが、ﾖﾜﾖﾜな私はマウスから手を離せないみたいです。
なのでちょっとマウススクロールするだけでヘッダーナビゲーションが出現する拡張機能をお昼休みに作ってみました。

👇ストアページ

ソースコード

めちゃくちゃ単純なので全文載せます。
好きにコピペして使ってください！

let set_position = 0;
window.addEventListener("scroll", () => {
  const header: HTMLDivElement | null = document.querySelector(
    "#repository-container-header"
  );
  if (!header) return;
  if (window.scrollY > 166 && set_position > window.scrollY) {
    header.classList.remove("position-relative");
    header.style.position = "fixed";
    header.style.top = "0";
    header.style.zIndex = "10";
    header.style.width = "100%";
  } else {
    header.classList.add("position-relative");
    header.style.position = "";
    header.style.top = "";
    header.style.zIndex = "";
    header.style.width = "";
  }
  set_position = window.scrollY;
});

自分で拡張機能にするのが面倒くさい場合は以下からインストールして使っていただけたらと思います！

また、コード改善案等があればコメント等でご教授いただければ幸いです！！

終わりに

めちゃくちゃ単純な拡張機能ですが、使ってみると以外と便利でした。
気になった方は是非使ってみてください！
フィードバックも随時受け付けております！Githubにもソースコードを公開していますので、IssueやPull requestいただけると幸いです。

👇ストアページ

他にもNetFlixの拡張機能なども作っているので興味があったら使ってみてください！🥳