Closed2023/08/23にクローズ3

開いてるWebページのOG画像を手軽にチェックする

catnose 2023/08/23に更新

今見てるWebページのOG画像をチェックしたくなるときがある。ソースコードを開いて画像のURLをコピペするのは面倒だし、ブラウザ拡張機能は本当に信頼できるものしか入れたくない。というわけで、ちょっとしたコードを書いて使い回せるようにしてみる。

1. ページ遷移で開く

location.href = document.querySelector('meta[property="og:image"]').content

これをconsoleに貼れば、Webページで指定されているOG画像のURLに遷移する。OG画像の指定が見つからなければ何も起きない。

catnose 2023/08/23に更新

2. WebページにOG画像のプレビューをブチ込む作戦

(() => {
  const url = document.querySelector('meta[property="og:image"]')?.content;
  if(!url) return alert("No og:image on this page.")
  document.body.insertAdjacentHTML('beforeend', `<img src="${url}" width="300" style="position:fixed;top:10px;left: 10px;z-index:9999;border:solid 2px #000;" onClick="this.remove()" >`);
})()

これをconsoleとかに貼ると、Webページの左上にOG画像が差し込まれるようになる。画像自体をクリックすると画像は消える。

ただしCSP(Content Security Policy) が設定されているWebページではonClickがブロックされて、リロードしないと画像が消えなくなることがある。

ブックマークレットにしてみた

javascript:(function(){const url=document.querySelector('meta[property="og:image"]')?.content;if(!url)return alert("No og:image on this page.");document.body.insertAdjacentHTML('beforeend',`<img src="${url}" width="300" style="position:fixed;top:10px;left: 10px;z-index:9999;border:solid 2px #000;" onClick="this.remove()" >`);})();

コピペする場合は変なコードが紛れ込んでないか一応チェックするのが良いと思います。

catnose 2023/08/23に更新

~~ふと気づいたけどdialogタグ使えばCSPが設定されてるサイトでも閉じれそう。後で試す~~

JSなしで<dialog />を閉じる方法が見つからなかった

このスクラップは2023/08/23にクローズされました