広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

【Chromeウェブストア】関連アイテムを複数行表示にするブックマークレット

JavaScript

Chromeウェブストアのアイコン画像

この記事では、PCブラウザで開いたChromeウェブストアの関連アイテムを一時的に複数行表示にするブックマークレット(JavaScript)を書きます。

【Chromeウェブストア】関連アイテムを複数行表示にするブックマークレット

PC版「Google Chrome」でChromeウェブストアを見ている時、僕みたいな拡張機能を紹介するブロガーとして一つ困ったことがあります。

「下部に表示される他の関連拡張機能の欄が見にくい」点です。

PC版「Chromeウェブストア」の関連アイテム画像

デフォルトだと一行表示でかつ4アイテムしか表示されません。これだと関連する他の良さげな拡張機能を探すのに苦労します。

しかし、かといって拡張機能を使って無理やり見やすくする…ことができません。

セキュリティの都合上、ブラウザ側がChromeウェブストア上で拡張機能を動作させないよう制限しているためです。そのためCSSを適用できる「Stylus」や「Stylebot」、JavaScriptを適用できる「Tampermonkey」や「ScriptCat」が使えないです。

「Stylus」拡張機能がChromeウェブストアで動作しない画像

やろうと思えばできるようですが、基本的にはできないです。

参考:Annoying popup in privileged Chrome Web Store | Vivaldi Forum

でも、その場限り(ページ移動やリロードするとリセット)のブックマークレットは動作します。

Chromeウェブストアの関連アイテムを複数行表示にするブックマークレット

ブックマークレット

以下です。

JavaScript
javascript:(()=>{document.querySelectorAll('[aria-label="関連アイテムのスライド"]').forEach(el=>{el.style.flexWrap='wrap';});document.querySelectorAll('[aria-label="関連アイテムのスライド"]>div[inert]').forEach(el=>el.removeAttribute('inert'));})();

簡単に作りを書いておきます。

まず「[aria-label="関連アイテムのスライド"]」に「flex-wrap: wrap;」というCSSを付与するようにしています。これでタイルを折り返して表示するようになります。

ただそれだけだと変わりません。

四列ごとに階層が分かれていて、一つの階層が表示されている間、他三つは非表示にするという「inert」コードが付与されていたためです。

よってどの階層を表示している時でも他階層を非表示にせず、全部表示するという意味で「inert」を削除するようにしています。

方法

色々方法はありますが、たぶん一番分かりやすいやつを紹介します。

適当なサイトをブックマークして、ブックマークバーに配置しておきます。右クリック→「編集」をクリックします。

編集ダイアログが表示されるので、「名前」を好きな名前にして、「URL」の部分に上記で紹介しているJavaScriptコードを貼り付けます。変な改行とか入れなくていいです。

「保存」ボタンを押します。

「Google Chrome」でブックマークレットを作成する手順画像

Chromeウェブストアで関連アイテムが表示されるページを開きます。

拡張機能や状況によっては下部に「関連アイテム」が表示されず、右側にちょこっと掲載されている程度の時があります。その場合は動作しません。下に「関連アイテム」欄がある場合のみです。

開いたら、作成したブックマークレットをクリックします。ブックマークバーに直接配置していると起動しやすいと思います。

Chromeウェブストアの関連アイテムを複数行表示にするブックマークレットを実行する手順画像

瞬時に関連アイテム内にある拡張機能が複数行でタイル表示されます。余白具合とかは気にしてないのでちょっと汚いです。

Chromeウェブストアの関連アイテムをJavaScriptで複数行表示にした画像

また、これは単純にChromeウェブストアの仕様だと思うんですが、何個か重複ちょうふくがあります。全く同じ拡張機能のタイルがあったりします。

やろうと思えば、同じくブックマークレットで重複タイルを消すこともできそうですが、スルーしています。

ブックマークレットはあくまでその場限りです。そのタブを閉じたり、ページをF5でリロードしたり、同一タブで別リンクを開いたりした瞬間に使えなくなります。

そのため利用したい時に毎回発動する必要があります。

注意点

Chromeウェブストア側の仕様変更で突然使えなくなることがあります。

僕は本記事を書く前から個人的に利用していたんですが、既に2回くらい仕様変更により使えなくなって、コードの修正を余儀なくされています。

またいつ仕様変更がきて使えなくなるか分かりません。

CSS、JavaScript、ブックマークレットとかそこらへんは、どうしてもサイトの仕様変更に左右されます。

僕は毎日使っているわけではないので、使えなくなっていても気づかない可能性があります。その場合mondとか問い合わせで連絡くだされば修正するかもしれないし、しないかもしれません。

僕が修正を余儀なくされたタイミングは、ちょーどChromeウェブストアが大幅更新されていた時だったので、基本的にそんな高頻度で使えなくなる…ことはないと思います。年単位だと思います。

感想

以上、PCブラウザで開いたChromeウェブストアの関連アイテムを一時的に複数行表示にするブックマークレット(JavaScript)でした。

関連アイテムを複数行表示にして、片っ端から右クリック→Tでバックグラウンドのタブで開いてあとからズバズバ確認しています。

まぁあんまり関連アイテムから有用な拡張機能見つけた試しがないんですけども。Google検索でGitHub・X・Redditなどからいくほうが有用拡張機能見つけやすかったり。

そもそもChromeウェブストアにあるから安心という保証はどこにもないので、Chromeウェブストアだけで完結してインストールするのは安直かなと思います。拡張機能は便利な分、リスクもあるので導入はほどほどに。

JavaScript

Posted by ナポリタン寿司