popup.html

<script src="commons.js"></script>

<script>
function openTab(tabUrl) {
  var button = event.button;
  if(button > 1)
    return;
  var selected = true;
  if(button == 1 || event.ctrlKey) // Middle Button or Ctrl click
    selected = false;
  chrome.tabs.create({ url: tabUrl, selected: selected });
}

function goToEvents() {
  chrome.tabs.getAllInWindow(undefined, function(tabs) {
    for (var i = 0, tab; tab = tabs[i]; i++) {
      if (tab.url && isEventsUrl(tab.url)) {
        chrome.tabs.update(tab.id, {selected: true});
        window.close();
        return;
      }
    }
    window.close();
    chrome.tabs.create({url: getEventsUrl()});
  });
}

</script>

<style>

li {}

body {
  width:500px;
  max-height:600px;
  overflow-x:hidden;
  color:#333;
  margin:0;
  padding:0;
}


h1 {
  font-size:1em;
  font-family:Verdana;
  }

.menu {float:right;}

.menu a { text-decoration:none;color:#9FAF35;}

.row1 {background:#eee;}

.event { padding: 5px;
         margin-top:5px;
         font-size:0.8em;
         font-family:Verdana;
        -webkit-border-radius:5px; border:1px solid #ddd;}

.image { float:left;
         margin-right:5px;
         margin-top:-3px;
         vertical-align:top;
         -webkit-border-radius:5px;
         background: #ddd;
         padding:3px;}

.created_at { font-weight: bold;}

.source_badge {
  display:inline-block;
  background:silver;
  padding:1px 3px;
}

.trabe_exceptions {
  background:#990000 !important;
}

.trabe_work {
  background:#EA9E28 !important;
}

.info {
  font-size:1.1em;
}

.event_description {
  font-family:monospaced;
}

</style>


<div class="menu">
  <a href="#" onclick="javascript:goToEvents();">todos</a>
  |
  <a href="#" onclick="javascript:window.location.reload()">refrescar</a>
  |
  <a href="#" onclick="javascript:window.close()"> cerrar </a>
</div>

<!-- all the stuff happens on the server -->

<script src="http://events.trabesoluciones.net/new_events.js"></script>