ブラウザ：ブックマークにJavaScriptを仕込み、ページ内の画像だけを一覧表示する

ブラウザのブックマークは、URLだけでなく JavaScriptも登録できるのを知っていますか？これを使うと、クリックするだけで処理が動く「自分専用ボタン」が作れます。

今回は、ページ内の画像を別タブで一覧にするボタンを作ります。

仕組み：ブックマークレット（Bookmarklet）

ブックマークのURL欄に javascript: ... を入れておくと、
そのブックマークをクリックした瞬間に JavaScript が実行されます。

次の JavaScript を使います。長いですが 1行で書かれた JavaScript です。

JavaScript：

javascript:(()=>{const imgs=[...document.images];const w=window.open();w.document.write('<title>Images</title>');imgs.forEach(img=>{w.document.write(`<div style="display:inline-block;margin:8px;text-align:center;"><img src="${img.src}" style="max-width:200px;max-height:200px;display:block;"><small>${img.naturalWidth}×${img.naturalHeight}</small></div>`);});})();

手順：

① どんなページでもいいので、いったんお気に入りに登録する。

② 登録したお気に入りを右クリックして、「編集」をクリック。

③ 先ほど紹介した JavaScript をコピーする。

④ 名前を「電卓」にして、URL欄に JavaScript を貼り付ける。

これで完成です。

たとえば、、JR東日本のページを開いた状態でお気に入りをクリックすると…

画像一覧のページが作れます。