特定のセレクタの textContent をコピーしてリスト化するブックマークレットを作成する
Published Apr 10, 2025
⋅
Updated Apr 14, 2025
ブックマークレットを作成するには、ブラウザのブックマークの URL の欄に JavaScript URL（JavaScript コードに javascript: prefix を付与したもの）を登録する。
特定のセレクタの textContent をコピーして、マークダウンのリストとしてクリップボードにコピーするブックマークレットを作成したい場合、まずはその処理を行う JavaScript を用意する。
(() => {
const selector = prompt('Enter a CSS selector (e.g., h2, .title, #heading):', 'h2');
if (!selector) return;
const elements = document.querySelectorAll(selector);
if (elements.length === 0) {
alert('No elements found matching this selector');
return;
}
const contents = Array.from(elements)
.map(el => `- ${el.textContent.trim()}`)
.join('\n');
navigator.clipboard.writeText(contents)
.then(() => alert(`Copied ${elements.length} items to clipboard`))
.catch(err => alert(`Failed to copy: ${err}`));
})();そして、この JavaScript の前に javascript: を追加して、ブラウザのブックマーク登録時の URL 欄にコピペする。
javascript:(() => { const selector = prompt('Enter a CSS selector (e.g., h2, .title, #heading):', 'h2'); if (!selector) return; const elements = document.querySelectorAll(selector); if (elements.length === 0) { alert('No elements found matching this selector'); return; } const contents = Array.from(elements) .map(el => `- ${el.textContent.trim()}`) .join('\n'); navigator.clipboard.writeText(contents) .then(() => alert(`Copied ${elements.length} items to clipboard`)) .catch(err => alert(`Failed to copy: ${err}`)); })();以上で、ブックマークレットを実行すると、セレクタを指定して内容をコピーできるようになる。
上述のようにコピペするだけだと余分な空白が入って気持ち悪いので minify したほうがいいかも。
javascript:(()=>{const t=prompt("Enter a CSS selector (e.g., h2, .title, #heading):","h2");if(!t)return;const e=document.querySelectorAll(t);if(0===e.length)return void alert("No elements found matching this selector");const o=Array.from(e).map((t=>`- ${t.textContent.trim()}`)).join("\n");navigator.clipboard.writeText(o).then((()=>alert(`Copied ${e.length} items to clipboard`))).catch((t=>alert(`Failed to copy: ${t}`)))})();参考