Baldwin's Cheatsheet

Adds a quick reference box to the Transmute page so you can see what type of item transmutes to what type of compound without leaving the page

// ==UserScript==
// @name        Baldwin's Cheatsheet
// @namespace   https://greasyfork.org
// @description Adds a quick reference box to the Transmute page so you can see what type of item transmutes to what type of compound without leaving the page
// @include     http://www1.flightrising.com/trading/baldwin/transmute
// @include     http://www.flightrising.com/trading/baldwin/transmute
// @include     https://www1.flightrising.com/trading/baldwin/transmute
// @include     https://www.flightrising.com/trading/baldwin/transmute
// @version     1
// @grant       none
// ==/UserScript==

var newHTML = document.createElement('div');
newHTML.innerHTML = ' \
  <div id="baldwinRef"> \
   <style scoped> \
    table, th, td {border:1px solid black;} \
    td, th {padding: 5px 0px;} \
    td {text-align: center;} \
   </style> \
   <table style = "width:100%;"> \
    <tr> \
     <th>Food</th> \
     <th>Materials</th> \
     <th>Trinkets/Other</th> \
     <th>Apparel</th> \
     <th>Familiars</th> \
    </tr> \
    <tr> \
     <td colspan="5">BECOME(S)</td> \
    </tr> \
    <tr> \
     <th>Goo</th> \
     <th>Ooze</th> \
     <th>Sludge</th> \
     <th>Slime</th> \
     <th>Muck</th> \
    </tr> \
    <tr> \
     <th><img src="http://www1.flightrising.com/static/cms/trinket/1886.png"></td> \
     <th><img src="http://www1.flightrising.com/static/cms/trinket/1892.png"></td> \
     <th><img src="http://www1.flightrising.com/static/cms/trinket/1898.png"></td> \
     <th><img src="http://www1.flightrising.com/static/cms/trinket/1904.png"></td> \
     <th><img src="http://www1.flightrising.com/static/cms/trinket/1907.png"></td> \
    </tr> \
    <tr><td colspan = "5" style = "background-color:black;"></td></tr> \
    <tr> \
     <td colspan = "5">Color Rarity (most common to most rare):</td> \
    </tr> \
    <tr> \
     <td colspan = "3"> \
      <ul style="list-style-type: none;"> \
        <li>Green</li> \
        <li>Yellow</li> \
        <li>Orange</li> \
        <li>Red</li> \
        <li>Purple</li> \
        <li>Blue</li> \
      </ul> \
     </td> \
     <td> \
      <ul style="list-style-type: none;"> \
        <li>Grey</li> \
        <li>White</li> \
        <li>Black</li> \
      </ul> \
     </td> \
     <td> \
      <ul style="list-style-type: none;"> \
        <li>Copper</li> \
        <li>Silver</li> \
        <li>Gold</li> \
      </ul> \
     </td> \
    </tr> \
   </table> \
  </div> \
';

var elmBaldwin = document.getElementById('baldwin');
elmBaldwin.parentNode.insertBefore(newHTML, elmBaldwin.nextSibling);
//document.body.appendChild(newHTML)

var elmRef = document.getElementById('baldwinRef');
elmRef.style.position = 'absolute';
elmRef.style.top = '500px';
elmRef.style.width = '700px';