Add button to Scryfall.com queries to copy all search results to clipboard

[Greasemonkey] Scryfall Results to Clipboard.user.js

// ==UserScript==
// @name     Scryfall search results to clipboard
// @version  1.6
// @grant    none
// @include https://scryfall.com/search*
// @updateURL https://gist.github.com/TheCDC/1114479a7ef7ee2647bff5187068ba66/raw/Scryfall%2520Results%2520to%2520Clipboard.user.js
// @downloadURL https://gist.github.com/TheCDC/1114479a7ef7ee2647bff5187068ba66/raw/Scryfall%2520Results%2520to%2520Clipboard.user.js
// ==/UserScript==

//================== Globals

const APPNAME = "scryfallToClipboard";

var cards = [];
btnStyle= `
	margin-top:auto;
	margin-bottom:auto;
	margin-left:0.25em;
	padding:0.25em;
	font-size:2em;
	background-color:white;
	color:black;
	padding-left:0.25em;
	padding-right:0.25em;
	border-radius:1em;
`

//================== DOM Objects
let containerName = APPNAME+"-container";

var myDiv = document.createElement("div");				   
myDiv.style=`
	background-color:#494659;
	display:flex; flex-direction:row;
	justify-content:center;
	flex-wrap:wrap;
`
myDiv.setAttribute('id', containerName);
				   
var copySimpleButton=document.createElement("input");
copySimpleButton.type="button";
copySimpleButton.value="Copy simple";
copySimpleButton.style = btnStyle;
copySimpleButton.setAttribute('id', APPNAME+"-copySimpleButton");


var copyTappedoutButton=document.createElement("input");
copyTappedoutButton.type="button";
copyTappedoutButton.value="Copy for TappedOut";
copyTappedoutButton.style = btnStyle;
copyTappedoutButton.setAttribute('id', APPNAME+"-copyTappedoutButton");


var clipboardElement = document.createElement("textarea");
clipboardElement.style= `
	margin-left:1em;
	background-color:white;
	height:20em;
	width:20em;
`
clipboardElement.setAttribute('id', APPNAME+"-clipboardElement");



//================== Logic

function get(url){
  
  clipboardElement.style.display = "none";
  
  const Http = new XMLHttpRequest();
  Http.open("GET", url);
  Http.send();
  Http.onreadystatechange= function(e){
    //console.log("response: " + Http.responseText);
		//console.log(this.readyState + ' ' + this.status); 
    if (this.readyState == 4 && this.status == 200){
    	obj = JSON.parse(Http.responseText);
      //console.log(obj);
      
      cards = obj.data.map(e=>e.name);
      var t = cards.join('\n');
      clipboardElement.value = t;
     
      //console.log(t);
      
  		clipboardElement.style.display = null;
    }
    
  }
}


function doThing(){
  var l = window.location.href.split('/');
  var s = l[l.length-1];
	var target = "https://api.scryfall.com/cards/" + s;
  get(target);
}


function copySimple(){
	clipboardElement.value = cards.join('\n');
  clipboardElement.select();
	document.execCommand('copy') 
}

function copyTappedout(){
	clipboardElement.value = cards.map(s => '1x ' + s).join('\n');
	clipboardElement.select();
	document.execCommand('copy');
}



//================== DOM + Logic

function injectUI(){
	// Add buttons/etc. the the page.
	copySimpleButton.onclick = copySimple;
	copyTappedoutButton.onclick = copyTappedout
	document.body.appendChild(myDiv);
	myDiv.appendChild(copySimpleButton);
	myDiv.appendChild(copyTappedoutButton);
	myDiv.appendChild(clipboardElement);
	console.log('Created UI');

}


//Startup
injectUI();
doThing();