Copying selected content in Chrome browser as HTML

Few weeks ago, I had a chat with ChatGPT, "Copy-paste HTML content", about copy-pasting selected content from Chrome browser as HTML into another app like Notepad or VSCode on Windows OS. ChatGPT (CG) gave a few suggestions of which one suggestion of Bookmarklet with JavaScript code has worked out quite well for me.

CG Bookmarklet JavaScript solution which works well for me

CG: ... Here’s a bookmarklet you can use in Chrome to copy the exact HTML of any selected text to the clipboard:

1. Create the Bookmarklet

  1. In Chrome, open Bookmarks → Bookmark Manager → Add new bookmark.

  2. Give it a name, e.g., Copy Selection HTML.

  3. In the URL field, paste the following code:

javascript:(function(){
  const sel = window.getSelection();
  if (!sel.rangeCount) return alert('No selection!');
  const range = sel.getRangeAt(0);
  const container = document.createElement('div');
  container.appendChild(range.cloneContents());
  const html = container.innerHTML;
  navigator.clipboard.writeText(html)
    .then(()=>alert('Selection HTML copied!'))
    .catch(err=>alert('Copy failed: '+err));
})();

  1. Save the bookmark.

2. How to Use

  1. Go to any webpage.

  2. Select the text you want to copy (even if it spans multiple elements).

  3. Click your Copy Selection HTML bookmark.

  4. You’ll see an alert: Selection HTML copied!

  5. Paste (Ctrl+V) into VSCode, Notepad, or any other editor.

    • ✅ Only the HTML corresponding to your selected text is copied, including tags like <b>, <i>, <a>, etc.

========= end of Bookmarklet solution ========

I have given below edited extracts of some other parts of the chat.

Me: in chrome browser, how can I copy-paste selected content as HTML into another app like Notepad or VSCode (on Windows OS)

CG: Yes! You can copy HTML content from Chrome and paste it as actual HTML (not plain text) into apps like Notepad, VSCode, or other editors on Windows. Here's a detailed guide:

1. Copying HTML Source of Selected Content

Chrome doesn’t directly copy selected content as HTML by default; it copies the rendered text. To get HTML, you need to use Developer Tools:

Method A: Using “Inspect”

  1. Open the webpage in Chrome.

  2. Select the content you want to copy (text, images, etc.).

  3. Right-click → Inspect (or press Ctrl+Shift+I).

  4. In the Elements panel, the relevant HTML for your selection will be highlighted.

  5. Right-click the highlighted node → Copy → Copy outerHTML (copies the element and all its inner content).

  6. Open VSCode or Notepad and paste (Ctrl+V).

  • ✅ This will give you the HTML tags exactly as they are in the page.

Method B: Copy as “HTML” via Clipboard

If you want the selected part only (not necessarily the full element node):

  1. Install a Chrome extension like “Enable Copy HTML” or “Copy as HTML”.

  2. Select text on a webpage.

  3. Right-click → Copy as HTML.

  4. Paste into VSCode or Notepad.

  • Note: Standard Notepad won’t render HTML; it will just show the code. VSCode will handle it nicely.

Method C: Use “Copy -> Copy HTML” from Context Menu

If your Chrome already has “Copy HTML” in the context menu:

  1. Select the content.

  2. Right-click → Copy → Copy HTML.

  3. Paste into your editor.

2. Quick Tips

  • VSCode: You get syntax highlighting automatically.

  • Notepad: It’s just plain text; HTML will not render.

  • Images: If your HTML contains images, the src might be relative. You may need to adjust paths.

  • Tables/Formatting: Copying via DevTools preserves table structure, inline styles, etc.

[IFIRC ...  Method A did not work for me as it selected only one element. I did not want to install some third-party extension and so did not try Method B. Method C did not apply to my PC ('Copy HTML' was not shown in Chrome context menu). Then CG asked if I would like a bookmarklet solution to which I said yes. That's the bookmarklet code I have shared at the top of this post.]

[CG also provided 'tiny' Chrome extension code which I was very interested in. As I could check the source code of such an extension, I was ready to consider it. But the extension code provided by CG did not work for me. It could be due to some mistake I made as I have not developed a Chrome extension and so had to ask CG for step-by-step instruction which it gave. But perhaps I did not follow some instruction correctly.]

Comments

Post a Comment