     chrome.windows.create
       url: "edit.html?color=#{encodeURIComponent '#00ff00'}"
       type: 'popup'
-      focused: yes
     ,
       ({tabs: [ child ] }) ->
         console.log child

              url: "edit.html?color=#{encodeURIComponent color}&name=#{
                encodeURIComponent name}&index=#{i}"
              type: 'popup'
              focused: yes
            ,
              ({tabs: [ child ] }) ->
                console.log child

window.addEventListener 'focus', update


update = ->
  chrome.storage.sync.get storageKey, (got) ->
    items = got[storageKey]
    hats = document.querySelector '#hats'
    # start with empty div
    while hats.firstChild
      hats.removeChild hats.firstChild
    # now fill it in
    for { color, name }, i in items
      do (color, name, i) ->
        hats.insertAdjacentHTML 'beforeend', "
          <button id=hat-#{i} style='background-color:#{color}'
              title='Open new window with this hat'>
            <span class=hat>#{name}</span>
            <img class=delete title=Delete src=icons/000106-circle-cross-mark.png />
            <img class=edit title=Edit src=icons/000150-pencil.png />
          </button>"
        document.querySelector "#hat-#{i}"
          .addEventListener 'click', ->
            alert "hat #{i}"
