Bookmarklet to copy a page
On a recent project, I needed to pull the HTML of an existing site and rebrand it in another environment. Unfortunately, due to CORS and anti-crawling measures, I couldn’t fetch the data using a script.
To help speed up the process, I created a bookmarklet that could fetch the contents of pages while on the document. It created a little bash script to create the directory and file, then open it immediately in VS Code.
javascript: (async function () {
let response = await fetch(location.href, { cache: 'no-store' });
let html = await response.text();
let parser = new DOMParser();
let doc = parser.parseFromString(html, 'text/html');
let title = (doc.querySelector('title')?.textContent || 'Untitled').trim();
let description = (doc.querySelector('meta[name="description"]')?.content || '').trim();
let main = doc.querySelector('main')?.outerHTML || '\x3C!-- No <main> found -->';
let path = location.pathname
.replace(/\/$/, '')
.replace(/[^a-zA-Z0-9\\/_-]/g, '')
.toLowerCase();
if (!path || path === '/') path = 'home';
let dirPath = `src${path}`;
let filePath = `${dirPath}/index.liquid`;
let bashScript = `mkdir -p "${dirPath}" && touch "${filePath}" && code "${filePath}"`;
let frontMatter = `---\ntitle: "${title}"\ndescription: "${description}"\n---`;
let content = `${frontMatter}\n${main}`;
await navigator.clipboard.writeText(bashScript);
alert('First Bash script copied to clipboard! Press OK to copy the full content.');
await navigator.clipboard
.writeText(content)
.catch((err) => console.error('Clipboard error:', err));
})();
Drag me to your bookmark bar