Often, I need to copy text of certain elements from webpages to the clipboard for further data analysis, processing or alternative usage (like writing a blog post)

I wanted to figure out a way to automated this, but here is a quick tip to automate using Javascript that can be made seamless by creating a Text Expander snippet for the below javascript code

Here is a quick demonstration to collect the text for the title on the front page of Hacker News.


// Select the required elements. The selector will need to be modified depending on the use case

var notes = document.getElementsByClassName("s-tag");

var text = "";

for (var i = 0; i < notes.length; i++) {
    var note = notes[i].innerText;

    // concantenate the text
    text = text + "\n\n" + note;
}

// https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f
const copyToClipboard = str => {
    const el = document.createElement('textarea');
    el.value = str;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
};

console.log(text);

// copy to clipboard

copyToClipboard(text);

Extract titles from HN front page to a text editor

To Do: This can be further made efficient by modifying the extension and make the entire experience seamless!