var scripts;
var httpRegex = /^(http\:\/\/|https\:\/\/)/;

function tabCallback(scriptInfo) {
  return function(tabs) {
    // save selected script info to "background.js"
    chrome.extension.sendMessage({type:'SCRIPT_SELECTED', data:scriptInfo, tab:tabs[0].id});
    // request reload current page to "content.js"
    chrome.tabs.sendMessage(tabs[0].id, {type:'SCRIPT_SELECTED'});
  }
}

function convertDepends(scriptInfo) {
  if (!scriptInfo.depends) return scriptInfo;

  var result = httpRegex.exec(scriptInfo.depends);

  if (result) return scriptInfo;

  for(var s in scripts) {
    if (scripts[s].name === scriptInfo.depends) {
      scriptInfo.depends = scripts[s].url;
      break;
    }
    delete scriptInfo.depends;
  }
  return scriptInfo;
}

function handleEvent(e) {
  console.log('click on : ' + e.currentTarget.dataset.index);
  var selected = e.currentTarget.dataset.index;
  var scriptInfo = convertDepends(scripts[selected]);
  // check depends and convert to url
  chrome.tabs.query({active:true, currentWindow:true}, tabCallback(scriptInfo));
}

function updateScriptList() {
  var container  = document.querySelector('.container');
  // TODO: we don't need to clear every child(compare & remove)
  while (container.firstChild) container.removeChild(container.firstChild);

  for(var i = 0 ; i < scripts.length ; i++) {
    var div = document.createElement('div');
    div.classList.add('item');
    div.innerHTML = scripts[i].name;
    div.setAttribute('data-index', i);
    div.addEventListener('click', handleEvent);
    container.appendChild(div);
  }
}

function handleResponse(res) {
  console.log('received : ' + res.type);

  switch(res.type) {
    case 'REQ_SCRIPT_LIST':
      // TODO: merge scripts & res.scripts
      scripts = res.scripts;
      updateScriptList();
      break;
    case 'DATA_CHANGED':
      console.log('data changed');
      requestScriptList();
      break;
  }
}

function requestScriptList() {
  // send msg to background.js
  chrome.extension.sendMessage({type:'REQ_SCRIPT_LIST'}, handleResponse);
}

function onLoad() {
  requestScriptList();
  chrome.extension.onMessage.addListener(handleResponse);
}

window.onload = onLoad;

@@ -2068,18 +2068,566 @@
 ion 
-onLoad() %7B
+initSoakControl() %7B%0A  var input = document.getElementById('query');%0A  var btn   = document.getElementsByClassName('soak-btn')%5B0%5D;%0A  input.addEventListener('keyup', function(e) %7B%0A    var value = e.target.value;%0A    if (e.keyCode === 13 && value) %7B%0A      // TODO: search or add url%0A    %7D%0A    var result = httpRegex.exec(value);%0A%0A    if (result) %7B%0A      btn.style.display = 'block';%0A    %7D else %7B%0A      btn.style.display = 'none';%0A    %7D%0A  %7D);%0A  btn.addEventListener('click', function(e) %7B%0A    // TODO: add script%0A  %7D);%0A%7D%0A%0Afunction onLoad() %7B%0A  initSoakControl();
 %0A  r

add init function to handle user input.