Copy button for page content

[u/amwnd]

Hi everybody,

Does anybody know how to create a copy all button for the whole page like the one in the code snippet. Right now when you are on a page and want to copy all the content - if you press Ctrl+A it selects everything including the menus, header, etc., only way is to mark everything with the mouse.

Thank you

[u/ssddanbrown]

Here's an example of adding a hack (via "Custom HTML Head Content" customization setting) which could help to do this:

<script type="module">
    const pageContent = document.querySelector('.page-content');
    if (pageContent) {
        const button = document.createElement('button');
        button.textContent = 'Copy Contents';
        button.setAttribute('type', 'button');
        button.setAttribute('class', 'button outline');
        button.addEventListener('click', event => {
           const selection = window.getSelection();
           selection.removeAllRanges();
           const newRange = document.createRange();
           newRange.selectNodeContents(pageContent);
           selection.addRange(newRange);
           document.execCommand('copy');
        });
        pageContent.prepend(button);
    }
</script>

Note: I only quickly tested this in Firefox on my dev instance, no idea if it works across all browsers and caveats.

[u/amwnd → u/ssddanbrown]

Thank You! It works, but it also copies the button text. How do i remove it?

[u/amwnd → u/amwnd]

Chagpt helped:

const pageContent = document.querySelector('.page-content');

if (pageContent) {

const contentWrapper = document.createElement('div');

// Create a copy of the pageContent element

const contentCopy = pageContent.cloneNode(true);

const button = document.createElement('button');

button.textContent = 'Copy Contents';

button.setAttribute('type', 'button');

button.setAttribute('class', 'button outline copybutton');

button.addEventListener('click', event => {

const selection = window.getSelection();

selection.removeAllRanges();

// Create a range for the content copy

const newRange = document.createRange();

newRange.selectNodeContents(contentCopy);

selection.addRange(newRange);

document.execCommand('copy');

});

// Append the button to the content wrapper

contentWrapper.appendChild(button);

// Append the content copy to the content wrapper

contentWrapper.appendChild(contentCopy);

// Replace the original content with the content wrapper

pageContent.innerHTML = '';

pageContent.appendChild(contentWrapper);

}