Chrome拡張機能「Stylus」が古くなったので「User JavaScript and CSS」に変更した

この記事は 2024/12/04 08:59 に再編集しました。

Chromeの「拡張機能を管理」での「Stylus」の警告

先ずは、筆者パソコンのChrome画面右上の縦三点マーク（︙）＞ ［拡張機能］＞［拡張機能を管理］を開くと、下図スクショのように表示されております。

これらの拡張機能はまもなくサポートされなくなる可能性があります
削除するか、Chrome ウェブストアにある同様の拡張機能に置き換えてください。

このChrome拡張機能「Stylus」の代替作業がまだ残っておりました。（ColorPick Eyedropper もとりあえずは継続利用中）

上記警告については、Chromeの「マニフェスト V2 及び V3 への移行」に伴うサポート終了処置によるものです。
下記リンクーカードをクリックすると、詳しく解説している記事が読めますのでご参照ください。

『Chrome の拡張機能の扱いが変わる / ネット24時』

拡張機能はユーザーの強い味方ですが ブラウザの拡張機能は、ブラウザの動作にユーザーの要望を盛り込む機能です。 既に何等かの拡張機能を利用されている方は、この「…

ameblo.jp

生成AIでChrome拡張機能を探す

前記事同様、やり残したこの「Stylus」も、同等の拡張機能に置き換えるつもりでいろいろと探したんですが「ここは生成AIで探してみよう」と言うことで、筆者が最近メインで利用している リートン（wrtn） で「Chrome拡張機能「Stylus」と同等の拡張機能を教えて。」と聞いてみました。

そして、リートン（wrtn）回答の一番目の Chrome ウェブストア／User JavaScript and CSS をインストールしてみたんです。

いやぁ、一発目から「Stylus」を上回る満足出来る使い勝手の「User JavaScript and CSS」と出会ってしまいました 😃

こんな具合にしたくてカスタムスタイリング

「Stylus」では、FC2ブログの記事編集欄にある（マガブロを書く）（シェアする）のボタンが、筆者にとってはとても邪魔な位置にあり、うっかりクリックしてしまうこともあったので「それを非表示にしてしまおう」ということで利用していたんでした。

ですから「User JavaScript and CSS」でも同様に「非表示にする」設定を行ったんです。

「User JavaScript and CSS」のCSS設定

例として、FC2ブログ記事編集欄の（マガブロを書く）ボタン上で右クリックして、ポップアップメニューの下の方にある「検証」をクリックすると、ChromeのDevTools（デベロッパーツール）が開いて、その（マガブロを書く）ボタンのCSSが拾い出せます。

この <ul class="edi-blomaga_switch"> のHTML中のクラス名の edi-blomaga_switch に対して非表示のスタイリングをします。

/* マガブロを書くボタンを消す */
.edi-blomaga_switch {
  display: none !important;
}

【追記】2024/11/16 12:47
［インストールした User JavaScript and CSS を有効にする設定］

1. パソコンでブラウザ Chrome を開きます。
2. 右上の縦三点マーク（︙）＞ ［拡張機能］＞［拡張機能を管理］を順にを開く。
3. 表示された「User JavaScript and CSS」のスイッチをONにする。

次に、Chromeのツールバーに表示されている「User JavaScript and CSS」のアイコンをクリックして展開する［Developer mode required］部分をクリックします。

そして、開いた編集画面の右側（CSS）欄に、必要CSSをペーストします。

こんな具合で、後は黄色のボタンの「Save」をクリックして設定を保存します。

上図のように（マガブロを書く）（シェアする）ボタンがChrome拡張機能「User JavaScript and CSS」でも非表示に出来ました。

つまりは、Stylusに設定してあるCSSを、そのまま「User JavaScript and CSS」のCSS欄に移植してあげれば良いと言う訳です。

CSS以外にもJSも設定出来る

新しく見つけ出したChrome拡張機能「User JavaScript and CSS」は、上記のようなCSS設定だけでなく、JavaScriptも設定出来ますので、「Stylus」以上に活用出来そうです。 いや、副産物的に良い拡張機能が見つかって満足しております。

Manifest v3 対応 の Stylus (beta) の存在

【追記】2024/12/04 08:59

尚、Stylus に於いては、Manifest v3 対応 の Stylus (beta)もあります。
下記リンクカードをクリックすると Chrome ウェブストア より Stylus (beta) （バージョン:3.0.3 2024年12月1日 更新版）が入手出来ることは一応掲示して於きます。

Stylus (beta) - Chrome ウェブストア

Stylus でウェブのデザインを変更しましょう。これは、ユーザースタイルを管理するツールです。Stylus を利用すると、多くの人気サイト向けのテーマやスキンを簡単にインストールできます。

chromewebstore.google.com

まとめ

ここ数日掛けて、ブラウザChromeの［拡張機能を管理］で指摘を受けていた「これらの拡張機能はまもなくサポートされなくなる可能性があります」での7個の拡張機能の全てを代替（使わないので削除したものもあり）出来、😄ほっとしております。

当初は代替作業することに「ああ、こんなこと、めんどいねぇ 😮」と言うネガティブな気持ちが正直なところでしたが、思った以上の代替が出来て、手を付けて良かったと思っております。 これで当面は同様作業から逃れられることを期待します（笑）

［ ぱくたそ モデル：大川竜弥さん ］

おしっ
古くなった
Chrome拡張機能
全部代替出来たぞ、安心した
😃