bmux/popup.js

    function start() {
        messenger.request(["sessions", ""]);

        var clearButton = document.getElementById("btn_clear");
        clearButton.onclick = function() {
          messenger.request(["clearSessions", ""]);
        };

        var confirmSaveButton = document.getElementById("btn_confirmSave");
        var inputSession = document.getElementById("input_session");

        confirmSaveButton.onclick = function() {
          messenger.request(["createSession", inputSession.value]);
        };
    }
    
    function updateCurrentSession(currentSession) {
        var currentSessionName = document.getElementById("current_session_name");
        currentSessionName.textContent = currentSession;
    }

    function setData(sessionName, windows, timeStamp) {

        //Session HTML Element
        var session = document.createElement("p");
        session.setAttribute("class", "session_cell ellipsis");
        session.appendChild(document.createTextNode(sessionName + ' (' + windows.length + ')'));

        //Session timestamp
        var date = document.createElement("p");
        date.setAttribute("class", "date");
        date.appendChild(document.createTextNode(timeStamp));

        var sessionContents = document.createElement('div');
        sessionContents.setAttribute('class', 'sessionContents');
        windows.forEach(function(window) {

          var sessionWindow = document.createElement('div');
          sessionWindow.setAttribute("class", "sessionWindow");
          var sessionWindowId = document.createElement('p');
          sessionWindowId.setAttribute('class', 'sessionWindowId');
          sessionWindowId.appendChild(document.createTextNode(window.id));
          sessionWindow.appendChild(sessionWindowId);

          var sessionTabList = document.createElement('ul');
          window.tabs.forEach(function(tab) {
            var sessionTab = document.createElement('li');
            sessionTab.setAttribute('class', 'sessionTab');
            sessionTab.appendChild(document.createTextNode(tab.title));
            sessionTabList.appendChild(sessionTab);
          });
          sessionWindow.appendChild(sessionTabList);
          sessionContents.appendChild(sessionWindow);
        });

        //Remove button icon and HTML Element
        var iconRemove = document.createElement("i");
        iconRemove.setAttribute("class", "fa fa fa-times");
        var removeP = document.createElement("p");
        removeP.setAttribute("class", "remove_session");
        removeP.appendChild(iconRemove); 
        removeP.style.visibility = "hidden";

        var openNewP = document.createElement("p");
        openNewP.setAttribute("class", "new_window_session");
        openNewP.style.visibility = "hidden";

        //Adding session HTML elements to the table
        var table = document.getElementById("sessions_table");
        var row = table.insertRow(0);

        var cellSession = row.insertCell(0);
        cellSession.setAttribute("title", sessionName);
        cellSession.appendChild(session);
        cellSession.appendChild(date);

        var cellRemove = row.insertCell(1);
        cellRemove.setAttribute("class", "remove_cell");
        cellRemove.appendChild(removeP);

        var cellContent = table.insertRow(1);
        cellContent.setAttribute("class", "sessionContents");
        cellContent.appendChild(sessionContents);

        cellSession.addEventListener("click", function() { 
          messenger.request(["attach", sessionName]);
        });
        cellRemove.addEventListener("click", function() {
          messenger.request(["removeSession", sessionName]);
        });
        
        row.onmouseover =  function() { 
            removeP.style.visibility = "visible";
            cellSession.style.borderRight = "2px solid white";
        }
        row.onmouseout =  function() { 
            removeP.style.visibility = "hidden";
            cellSession.style.borderRight = "";
        }
    }

function clearTable() {
  document.getElementsByTagName("tbody")[0].innerHTML = '';
  document.getElementById("current_session_name").textContent = '';
}


// kickoff when popup is opened
document.addEventListener('DOMContentLoaded', function() {
  start();
});

/*
 *
 * make requests to background
 *
 */
var messenger = {
  request: function(message) {
    chrome.runtime.sendMessage({request: message});
  }
}

chrome.runtime.onMessage.addListener(function(msg) {
  if (msg.sessionList) {
    clearTable();
    console.log(JSON.stringify(msg.sessionList));
    msg.sessionList.forEach(function(session) {
      setData(session.name, session.windows, session.timeStamp);
    });
  }
});