ページのメタ情報を見やすく表示＆コピーするブックマークレット

コピー

javascript:(function(){const id='meta-info-viewer';let o=document.getElementById(id);if(o){o.remove();return;}const g=function(n){var e=document.querySelector('meta[name="'+n+'"],meta[property="'+n+'"]');return e?e.getAttribute('content')||'':'';};var d=[['title',document.title],['description',g('description')],['keywords',g('keywords')],['og:title',g('og:title')],['og:description',g('og:description')],['og:image',g('og:image')],['og:url',g('og:url')],['twitter:title',g('twitter:title')],['twitter:description',g('twitter:description')],['twitter:image',g('twitter:image')],['canonical',(document.querySelector('link[rel="canonical"]')||{}).href||''],['h1',(document.querySelector('h1')||{}).textContent||'']];o=document.createElement('div');o.id=id;o.innerHTML='<div style="position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:999999;display:flex;align-items:center;justify-content:center;font-family:sans-serif"><div style="background:#fff;border-radius:8px;max-width:600px;max-height:90vh;overflow:auto;padding:20px;box-shadow:0 4px 20px rgba(0,0,0,0.3)"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px"><h2 style="margin:0;font-size:1.2rem">メタ情報</h2><button id="meta-close" style="padding:6px 12px;cursor:pointer;background:#667eea;color:#fff;border:none;border-radius:4px">閉じる</button></div><div id="meta-list"></div></div></div>';document.body.appendChild(o);var l=document.getElementById('meta-list');d.forEach(function(item){var k=item[0],v=item[1];if(!v)return;var r=document.createElement('div');r.style.cssText='margin-bottom:12px;padding:8px;background:#f5f5f5;border-radius:4px;word-break:break-all';var esc=v.replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;');r.innerHTML='<div style="font-size:0.75rem;color:#666;margin-bottom:4px">'+k+'</div><div style="display:flex;align-items:flex-start;gap:8px"><div style="flex:1;font-size:0.9rem">'+esc+'</div><button style="flex-shrink:0;padding:4px 8px;cursor:pointer;background:#667eea;color:#fff;border:none;border-radius:4px;font-size:0.8rem" data-copy="'+esc+'">コピー</button></div>';l.appendChild(r);});document.querySelectorAll('[data-copy]').forEach(function(b){b.addEventListener('click',function(){navigator.clipboard.writeText(b.getAttribute('data-copy'));b.textContent='OK!';setTimeout(function(){b.textContent='コピー';},1000);});});document.getElementById('meta-close').onclick=function(){o.remove();};})();