Simple Userscripts for the My New Tab Chrome Extension

000-README.md

You can find the extension at: https://chrome.google.com/webstore/detail/my-new-tab/gpneodfkmdkgoakeelnklgmcgohmdcpn

001-basic-styling.js

// applying styles to DOM elements 
function (cb, id, size) {
  var html = "<img id='"+ id +"' src='http://webcam01.bigskyresort.com/jpg/image.jpg' />"
  html += "<style>#"+ id +" { position: relative; "
  html += "max-width: " + size.width + "px;"
  html += "max-height: " + size.height + "px;"
  html += "}</style>"

  cb(html);
}

002-calling-an-external-api.js

function (cb, id, size) {
  // new function definitions must be inside the wrapping function
  var stats = function (pid, records) {
    var url = "https://api.gdax.com/products/" + pid + "/stats"
    return fetch(url).
      then((resp) => (resp.json())).
      then((json) => {
        records[pid] = json
      })
  }

  var f = function (n) { return n.toFixed(2) }

  var records = {}
  var products = [ 'BTC-USD', 'LTC-USD', 'BCH-USD', 'ETH-USD', ]
  let html = ['<table class="table compact">']

  // prepare table
  html.push(`<thead><tr>
               <th>Pair</th> <th>Open</th> <th>Vol</th> <th>Last</th> <th colspan="2">Change</th>
             </tr></thead>`)
  html.push('<tbody>')

  Promise.all(
    // load every product via GDAX API call
    products.map((p) => stats(p, records))
  ).then(() => {
    // after products have all been loaded, render table rows
    products.forEach(p => {
      var r = records[p]
      if (r) {
        const open = parseFloat(r.open),
              last = parseFloat(r.last),
              high = parseFloat(r.high),
              low = parseFloat(r.low),
              vol = parseFloat(r.volume),
              change = last - open,
              perc = (change / open) * 100.0;

        const dir = change > 0 ? '+' : ''


        let color = 'style="color: #FD403E"'
        if (last > open) {
          color = 'style="color: #00965D"'
        }

        html.push(`<tr><td>${p}</td><td>${f(open)}</td><td>${f(vol)}</td><td ${color}>${f(last)}</td><td ${color}>${dir}${f(change)}</td><td ${color}>${f(perc)}%</td></tr>`)
      } else {
        html.push(`<tr><td colspan="6">Could not load ${p} data</td></tr>`)
      }
    })

    // return rendered HTML table
    cb(html.join(''))
  })
}

003-using-block-state.js

function (callback, id, size, state) {
  // Userscripts now receive 4 arguments (as of v1.2.0
  // of the extension) with the 4th being permanent
  // state. You can use state to store the results of
  // expensive calculations or to do your own caching
  // between new tab loads.
  //
  // While the block cache is deleted every time the block
  // is updated, state is persisted in localStorage until
  // the block is deleted. It's important to also note that
  // when cached block HTML is used, state is never updated.

  // initialize (in case state has never been set)
  let nextState = state || {inc: 0}

  // increment every time the block refreshes
  nextState.inc++

  // show the time of the last refresh
  nextState.now = new Date().toString()

  // render current state
  let html = ['<pre><code>HELLO FROM BLOCK WITH STATE\n\n']
  html.push(JSON.stringify(nextState, null, 1))
  html.push('</code></pre>')

  // Block state is persisted by sending it to the
  // rendering callback function with the HTML output.
  callback(html.join(''), nextState)
}