Printer-friendly support threads on Simple bank

print-simple-bank-support-thread.md

Here's a messy yet working way to print support threads from Simple Bank. I don't make the printed thread look the same, I only put the messages and ONLY the messages in chronological order.

The method below may no longer work when the Simple site updates. Please ping me here or on Reddit (u/vzen) if this page needs updating.

Quick and easy, and bad-habit forming

BEWARE!! In 100% of circumstances it is a huge, nasty, no-good, blood-red flag for a stranger on the internet like me to ask you to run arbitrary code with your bank portal visible. But because not everyone reading this page is an engineer, I have to make this easy somehow. Just do NOT trust me off the bat. You really should read on to see how I break this code down and show you what each instruction does in plain English.

But for convenience of less-technically inclined users, you can do one of two things:

Use a bookmarklet (after possibly making bookmarklets work again)

This takes some work, you can make it your own "Printer Friendly version" button for Simple support threads.

Unfortunately, this approach will NOT WORK out of the box in any modern browser that correctly recognizes the code here as, for lack of a better word, foreign. If you want to do more digging on this, use GreaseMonkey (TamperMonkey for Chrome) and try using William Donnelly's script to restore use of bookmarklets in your browser. If you don't do this, then the steps below may not work at all.

1. Create a bookmark in your browser called "Print Simple Support thread".
2. Instead of putting in a link to a page, paste in the below code.
3. Open a support thread on Simple and click the bookmark to print the thread.

javascript:(function()%7Bi%20%3D%20document.createElement('iframe')%3Bi.style%20%3D%20'display%3A%20none'%3Bdocument.body.appendChild(i)%3Bt%20%3D%20document.querySelector('.support-messages-list')%3Bclone%20%3D%20t.cloneNode()%3Bclone.style.listStyle%20%3D%20'none'%3BArray.from(t.children).reverse().forEach(n%20%3D%3E%20%7Bconst%20cc%20%3D%20n.cloneNode(true)%3Bcc.style.borderBottom%20%3D%20'1px%20solid%20%23dfdfe1'%3Bcc.style.padding%20%3D%20'1.25em%200'%3Bclone.appendChild(cc)%3B%7D)%3Bi.contentWindow.document.body.appendChild(clone)%3Bi.contentWindow.print()%7D)()

Use developer tools

This is less convenient because you have to do these steps every time you want to print a thread. However, they will always work.

1. Open a support thread on Simple.
2. Press F12 to open DevTools in most browsers. You should see a "Console" tab.
3. Click the Console tab. You should be able to click in the little area near the bottom and type in it.
4. Copy/paste in the code from the next section and hit Enter.

Break it down

Here's the code above formatted and annotated for your viewing pleasure.

// Make a new, invisible place to put stuff so we don't mess with your page.
i = document.createElement('iframe');
i.style = 'display: none';
document.body.appendChild(i);

// This the support thread you have on screen. This will not work if a thread is not visible.
t = document.querySelector('.support-messages-list');

// Copy only the container of the messages.
clone = t.cloneNode();
clone.style.listStyle = 'none';

// Put messages in the copy in reverse order, so the oldest message comes first.
Array.from(t.children).reverse().forEach(n => {
  const cc = n.cloneNode(true);
  cc.style.borderBottom = '1px solid #dfdfe1';
  cc.style.padding = '1.25em 0';
  clone.appendChild(cc);
});

// Put the thread in the new space.
i.contentWindow.document.body.appendChild(clone);

// Print it!
i.contentWindow.print();