Ctrl+A Only Copied a Third of the Page, So I Built a Chrome Extension

A software developer was copying content from an interactive online course into their notes. They tried using Ctrl+A, Ctrl+C, but only a third of the content copied over. The problem was that the hidden slides, flip cards, and reveal boxes were intentionally not showing up in the rendered page. The developer discovered that the HTML contained all the content, but it was being hidden with CSS.

The solution was to read the DOM directly instead of relying on the browser's selection. They created a script that traversed every text node on the page and copied it to the clipboard. The developer initially tried this in the browser's Developer Tools console, but found it annoying to open the console every time they needed to copy content.

So, they turned the script into a Chrome extension. The extension provides a simple button that injects the extraction function into the current tab and copies the text to the clipboard. The developer learned several things during the process, such as the importance of writing self-contained functions, writing to the clipboard from the popup, and walking the shadow roots to include content inside shadow DOM elements.

The extension outputs rough markdown, including headings, list items, and table rows, making it easy to paste into Notion or other note-taking apps. The developer found that the extension works well on most pages but has limitations, such as not being able to read lazy-loaded content or text inside images. They are considering adding a keyboard shortcut and an option to automatically click through "next" buttons, but are unsure about the potential challenges.

The extension's code is available on GitHub for those interested in using or contributing to the project.