◆ 掲示板にリンク状態で貼られた画像をまとめサイト風に表示させます

たまにまとめサイトではなく 2ch 本家やログ速とか綺麗にまとめられてない元々の掲示板の内容が表示されているページにたどり着くことがあります

こういうところだと まとめサイトみたいに見やすくしてくれていないですし URL も URL のままで画像を直接貼ってくれていないです
画像スレで綺麗な画像みたいときだと 不便ですよね
1 つ 1 つクリックして開かないといけないですし クッションページもついていたりで画像をまとめて見るには向いてないです


そこで 拡張機能コードそーにゅーを使ってみましょう
Array.from(document.links).forEach(e => {
var mayurl = e.textContent.replace(/\s/g, "")
var probably = mayurl.includes("://")
if(probably && e.href.includes(mayurl)){
e.innerHTML = `
<div class="img-link-replaced">
<div style="
max-width:80%;
margin:10px;
display:inline-block;
font-size:0.8em;
font-family:consolas;
text-align:right;
">
<img src="${mayurl}" style="max-width:100%;"><br>
${e.innerHTML}
</div>
</div>
`
}
})

このコードを登録して URL が書かれた 2ch のページで実行してみましょう

すると

2c-ltoi


2c-ltoi2


こんな感じまとめサイト風に画像が直接表示されます
スクショの取りづらくて画像のサイズ調整してますが ↑ のコードそのままだと画像がもっと大きく表示されます

やってること

単純にリンクの中のテキストが URL っぽい "://" があるかをみます
URL と判断したらそのテキストが実際のリンク先に含まれてるか調べます
入っていたら 画像としてテキストの方のリンクを読み込みます

表示してる文字は本当の URL だけどクッションページ挟むために 実際のリンク先は余計なものがついてることが多いので表示してるもの優先してます

画像じゃなくて HTML のリンクを
<a href="http://xyz.com/test.html">http://xyz.com/test.html</a>

みたいに書いていても画像扱いして ロードエラーになってます
URL の拡張子だけだと判断が難しいですし ヘッダ情報取得して画像だけならとするくらいなら 最初から全部画像扱いでロードしてしまっても そんなに負担にならないので別にいっかということです