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

Related posts