Pixivのヘッダー固定 #chrome-extension

初めに

こんにちは。
Pixivのホームページには、ヘッダーがついてこないのです。
今回はそれを改善する内容になっています。
さらに拡張機能として公開することでより多くの人に使ってもらおうと思いました

Pixivを使わない人にとってはどうでもいいかもしれません。

現在の問題点

ヘッダーが画面に固定されていません。
自分は漫画を読んだ後、トップページに戻り、おすすめを見ています。
こうなると漫画を読んだ後、Pixivのトップページに戻るには、一番上までスクロールしなければなりません。
Pixiv使っている人はどうぞ体感してください。 Pixivはこちら

自作した拡張機能

このようなコードにしました。
まとめてダウンロードしたい人はこちらからGoogle Drive
このファイル解凍をChromeのパッケージされていない拡張機能でインストールしてください。

manifest.json

{
   "name": "Pixiv_header", // 拡張機能の名前
   "version": "1.0", // バージョン
   "manifest_version": 3, // マニフェストのバージョン。最新バージョンは3です。
   "description": "Pixivを変えるChrome拡張です", // 説明文
   "content_scripts": [
       {
           "matches": ["https://www.pixiv.net/*"], // どのURLでファイルを読み込むか。正規表現が使えます。
           "css": ["mystyle.css"], // 読み込むCSSファイルのパス
           "js":["script.js"]
       }
   ]
}

mystyle.css

.iUhfll{
  position: fixed !important;
  z-index: 1000 !important;
  border-bottom: solid 7px #333 !important;
  grid-template-columns: 1fr minmax(0px, 1000px) 1fr !important;
}

終わりに

~~qittaのようなヘッダーにはなれなかったです。既存のヘッダーのidの対象範囲が微妙に狭かったのが原因です。~~
grid-template-columnsをいじったら解決しました。
これでほぼ不満のないヘッダーになりました。