chrome/test/data/extensions/samples/tabs/tabs_api.html - chromium/src - Git at Google

 <html>
 <head>
 <script src="jstemplate_compiled.js" type="text/javascript"></script>
 <script>

 tabs = {};
 tabIds = [];

 focusedWindowId = undefined;
 currentWindowId = undefined;

 function bootStrap() {
   chrome.windows.getCurrent(function(currentWindow) {
     currentWindowId = currentWindow.id;
     chrome.windows.getLastFocused(function(focusedWindow) {
       focusedWindowId = focusedWindow.id;
       loadWindowList();
     });
   });
 }

 function isInt(i) {
   return (typeof i == "number") && !(i % 1) && !isNaN(i);
 }

 function loadWindowList() {
   chrome.windows.getAll({ populate: true }, function(windowList) {
     tabs = {};
     tabIds = [];
     for (var i = 0; i < windowList.length; i++) {
       windowList[i].current = (windowList[i].id == currentWindowId);
       windowList[i].focused = (windowList[i].id == focusedWindowId);

       for (var j = 0; j < windowList[i].tabs.length; j++) {
         tabIds[tabIds.length] = windowList[i].tabs[j].id;
         tabs[windowList[i].tabs[j].id] = windowList[i].tabs[j];
       }
     }

     var input = new JsExprContext(windowList);
     var output = document.getElementById('windowList');
     jstProcess(input, output);
   });
 }

 function updateTabData(id) {
   var retval = {
     url: document.getElementById('url_' + id).value,
     selected: document.getElementById('selected_' + id).value ? true : false
   }

   return retval;
 }

 function updateTab(id){
   try {
     chrome.tabs.update(id, updateTabData(id));
   } catch (e) {
     alert(e);
   }
 }

 function moveTabData(id) {
 	return {
     'index': parseInt(document.getElementById('index_' + id).value),
     'windowId': parseInt(document.getElementById('windowId_' + id).value)
   }
 }
 function moveTab(id) {
   try {
     chrome.tabs.move(id, moveTabData(id));
   } catch (e) {
     alert(e);
   }
 }

 function createTabData(id) {
   return {
     'index': parseInt(document.getElementById('index_' + id).value),
     'windowId': parseInt(document.getElementById('windowId_' + id).value),
     'index': parseInt(document.getElementById('index_' + id).value),
     'url': document.getElementById('url_' + id).value,
     'selected': document.getElementById('selected_' + id).value ? true : false
   }
 }

 function createTab() {
   var args = createTabData('new')

   if (!isInt(args.windowId))
     delete args.windowId;
   if (!isInt(args.index))
     delete args.index;

   try {
     chrome.tabs.create(args);
   } catch (e) {
     alert(e);
   }
 }

 function updateAll() {
   try {
     for (var i = 0; i < tabIds.length; i++) {
       chrome.tabs.update(tabIds[i], updateTabData(tabIds[i]));
     }
   } catch(e) {
     alert(e);
   }
 }

 function moveAll() {
   appendToLog('moving all');
   try {
     for (var i = 0; i < tabIds.length; i++) {
       chrome.tabs.move(tabIds[i], moveTabData(tabIds[i]));
     }
   } catch(e) {
     alert(e);
   }
 }

 function removeTab(tabId) {
   try {
     chrome.tabs.remove(tabId, function() {
       appendToLog('tab: ' + tabId + ' removed.');
     });
   } catch (e) {
     alert(e);
   }
 }

 function appendToLog(logLine) {
   var log = document.getElementById('log');
   log.innerHTML = '<div> &gt;&nbsp;' + logLine + '</div>' + log.innerHTML;
 }

 function clearLog() {
   document.getElementById('log').innerHTML = '';
 }

 chrome.windows.onCreated.addListener(function(createInfo) {
   appendToLog('windows.onCreated -- window: ' + createInfo.id);
   loadWindowList();
 });

 chrome.windows.onFocusChanged.addListener(function(windowId) {
   focusedWindowId = windowId;
   appendToLog('windows.onFocusChanged -- window: ' + windowId);
   loadWindowList();
 });

 chrome.windows.onRemoved.addListener(function(windowId) {
   appendToLog('windows.onRemoved -- window: ' + windowId);
   loadWindowList();
 });

 chrome.tabs.onCreated.addListener(function(tab) {
   appendToLog('tabs.onCreated -- window: ' + tab.windowId + ' tab: ' + tab.id + ' index ' + tab.index + ' url ' + tab.url);
   loadWindowList();
 });

 chrome.tabs.onAttached.addListener(function(tabId, props) {
   appendToLog('tabs.onAttached -- window: ' + props.newWindowId + ' tab: ' + tabId + ' index ' + props.newPosition);
   loadWindowList();
 });

 chrome.tabs.onMoved.addListener(function(tabId, props) {
   appendToLog('tabs.onMoved -- window: ' + props.windowId + ' tab: ' + tabId + ' from ' + props.fromIndex + ' to ' +  props.toIndex);
   loadWindowList();
 });

 function refreshTab(tabId) {
   chrome.tabs.get(tabId, function(tab) {
     var input = new JsExprContext(tab);
     var output = document.getElementById('tab_' + tab.id);
     jstProcess(input, output);
     appendToLog('tab refreshed -- tabId: ' + tab.id + ' url: ' + tab.url);
   });
 }

 chrome.tabs.onUpdated.addListener(function(tabId, props) {
   appendToLog('tabs.onUpdated -- tab: ' + tabId + ' status ' + props.status + ' url ' + props.url);
   refreshTab(tabId);
 });

 chrome.tabs.onDetached.addListener(function(tabId, props) {
   appendToLog('tabs.onDetached -- window: ' + props.oldWindowId + ' tab: ' + tabId + ' index ' + props.oldPosition);
   loadWindowList();
 });

 chrome.tabs.onSelectionChanged.addListener(function(tabId, props) {
   appendToLog('tabs.onSelectionChanged -- window: ' + props.windowId + ' tab: ' + tabId);
   loadWindowList();
 });

 chrome.tabs.onRemoved.addListener(function(tabId) {
   appendToLog('tabs.onRemoved -- tab: ' + tabId);
   loadWindowList();
 });

 function createWindow() {
   var args = {
     'left': parseInt(document.getElementById('new_window_left').value),
     'top': parseInt(document.getElementById('new_window_top').value),
     'width': parseInt(document.getElementById('new_window_width').value),
     'height': parseInt(document.getElementById('new_window_height').value),
     'url': document.getElementById('new_window_url').value
   }

   if (!isInt(args.left))
     delete args.left;
   if (!isInt(args.top))
     delete args.top;
   if (!isInt(args.width))
     delete args.width;
   if (!isInt(args.height))
     delete args.height;
   if (!args.url)
     delete args.url;

   try {
     chrome.windows.create(args);
   } catch(e) {
     alert(e);
   }
 }

 function refreshWindow(windowId) {
   chrome.windows.get(windowId, function(window) {
     chrome.tabs.getAllInWindow(window.id, function(tabList) {
       window.tabs = tabList;
       var input = new JsExprContext(window);
       var output = document.getElementById('window_' + window.id);
       jstProcess(input, output);

       appendToLog('window refreshed -- windowId: ' + window.id + ' tab count:' + window.tabs.length);
     });
   });
 }

 function updateWindowData(id) {
   var retval = {
     left: parseInt(document.getElementById('left_' + id).value),
     top: parseInt(document.getElementById('top_' + id).value),
     width: parseInt(document.getElementById('width_' + id).value),
     height: parseInt(document.getElementById('height_' + id).value)
   }

   if (!isInt(retval.left))
     delete retval.left;
   if (!isInt(retval.top))
     delete retval.top;
   if (!isInt(retval.width))
     delete retval.width;
   if (!isInt(retval.height))
     delete retval.height;

   return retval;
 }

 function updateWindow(id){
   try {
     chrome.windows.update(id, updateWindowData(id));
   } catch (e) {
     alert(e);
   }
 }

 function removeWindow(windowId) {
   try {
     chrome.windows.remove(windowId, function() {
       appendToLog('window: ' + windowId + ' removed.');
     });
   } catch (e) {
     alert(e);
   }
 }

 function refreshSelectedTab(windowId) {
   chrome.tabs.getSelected(windowId, function(tab) {
     var input = new JsExprContext(tab);
     var output = document.getElementById('tab_' + tab.id);
     jstProcess(input, output);
     appendToLog('selected tab refreshed -- tabId: ' + tab.id + ' url:' + tab.url);
   });
 }

 </script>
 </head>
   <body onload="bootStrap();">
     <div id="windowList">
       <div style="background-color: #AAEEEE; margin: 4px; padding: 8px; margin: 20px" jsselect="$this"
           jsvalues="id:'window_' + id">
         <div style="font-style: italic; width: 80px; display: inline-block">
           Window: <span jscontent="id"></span>
         </div>
         <div style="display: inline-block">
           left: <input style="width: 60px" type="text" jsvalues="value:$this.left;id:'left_' + id" />
           top: <input style="width: 60px" type="text" jsvalues="value:$this.top;id:'top_' + id" />
           width: <input style="width: 60px" type="text" jsvalues="value:$this.width;id:'width_' + id" />
           height: <input style="width: 60px" type="text" jsvalues="value:$this.height;id:'height_' + id" />
           <input type="checkbox" jsvalues="checked:focused; id:'focused_' + id" /> Focused
           <input type="checkbox" jsvalues="checked:current; id:'current_' + id" /> Current
           <button onclick="refreshWindow(this.jstdata);" jsvalues=".jstdata:id">Refresh</button>
         </div>
         <div id="tabList">
           <div jsselect="tabs">
             <div style="background-color: #EEEEEE; margin: 8px; padding: 4px"  jsvalues="id:'tab_' + id">
               <div style="margin: 8px">
                 <div style="font-style: italic; width: 80px; display: inline-block" jscontent="'TabId: ' + id"></div>
                 <div style="width: 300px; display: inline-block">
                   index: <input style="width: 20px" type="text" jsvalues="value:$this.index;id:'index_' + id" />
                   windowId: <input style="width: 20px" type="text" jsvalues="value:windowId;id:'windowId_' + id" />
                   <button onclick="moveTab(this.jstdata);" jsvalues=".jstdata:id">Move</button>
                   <button onclick="refreshTab(this.jstdata);" jsvalues=".jstdata:id">Refresh</button>
                 </div>
               </div>
               <div style="margin: 8px">
                 <div>
                   <div style="width: 40px; display:inline-block">title:</div>
                   <input style="width: 90%" type="text" jsvalues="value:title;id:'title_' + id" />
                 </div>
                 <div>
                   <div style="width: 40px; display:inline-block">url:</div>
                   <input style="width: 90%" type="text" jsvalues="value:url;id:'url_' + id" />
                 </div>
                 <div><input type="checkbox" jsvalues="checked:selected; id:'selected_' + id" /> Selected</div>
               </div>
               <button onclick="updateTab(this.jstdata)" jsvalues=".jstdata:id">Update Tab</button>
               <button onclick="removeTab(this.jstdata);" jsvalues=".jstdata:id">Close Tab</button>
             </div>
           </div>
         </div>
         <button onclick="updateWindow(this.jstdata);" jsvalues=".jstdata:id">Update Window</button>
         <button onclick="removeWindow(this.jstdata);" jsvalues=".jstdata:id">Close Window</button>
         <button onclick="refreshSelectedTab(this.jstdata);" jsvalues=".jstdata:id">Refresh Selected Tab</button>
       </div>
     </div>
     <div style="background-color: #EEEEBB; margin: 20px; padding: 8px">
       <h3 style="text-align: center; margin: 8px"> Create Window</h3>
       <div style="margin: 8px">
         <div style="width: 300px; display: inline-block">
           left: <input style="width: 20px" type="text" id="new_window_left" />
           top: <input style="width: 20px" type="text" id="new_window_top" />
           width: <input style="width: 20px" type="text" id="new_window_width" />
           height: <input style="width: 20px" type="text" id="new_window_height" />
         </div>
       </div>
       <div style="margin: 8px">
         <div>
           <div style="width: 40px; display:inline-block">url:</div>
           <input style="width: 90%" type="text" id="new_window_url" />
         </div>
       </div>
       <button onclick="createWindow();">Create</button>
     </div>
     <div style="background-color: #EEEEAA; margin: 20px; padding: 8px">
       <h3 style="text-align: center; margin: 8px"> Create Tab</h3>
       <div style="margin: 8px">
         <div style="width: 300px; display: inline-block">
           index: <input style="width: 20px" type="text" id="index_new" />
           windowId: <input style="width: 20px" type="text" id="windowId_new" />
           <button onclick="moveTab(this.jstdata);" jsvalues=".jstdata:id">Move</button>
         </div>
       </div>
       <div style="margin: 8px">
         <div>
           <div style="width: 40px; display:inline-block">title:</div>
           <input style="width: 90%" type="text" id="title_new" />
         </div>
         <div>
           <div style="width: 40px; display:inline-block">url:</div>
           <input style="width: 90%" type="text" id="url_new" />
         </div>
         <div><input type="checkbox" id="selected_new" /> Selected</div>
       </div>
       <button onclick="createTab();">Create</button>
     </div>
     <div style="margin: 20px;">
       <button onclick="loadWindowList();">Refresh</button>
       <button onclick="updateAll();">Update All</button>
       <button onclick="moveAll();">Move All</button>
       <button onclick="clearLog();">-->Clear Log</button>
       <button onclick="chrome.windows.create();">New Window</button>
     </div>
     <div id="log" style="background-color: #EEAAEE; margin: 20px; padding: 8px">
     </div>
   </body>
 </html>
	<html>
	<head>
	<script src="jstemplate_compiled.js" type="text/javascript"></script>
	<script>

	tabs = {};
	tabIds = [];

	focusedWindowId = undefined;
	currentWindowId = undefined;

	function bootStrap() {
	chrome.windows.getCurrent(function(currentWindow) {
	currentWindowId = currentWindow.id;
	chrome.windows.getLastFocused(function(focusedWindow) {
	focusedWindowId = focusedWindow.id;
	loadWindowList();
	});
	});
	}

	function isInt(i) {
	return (typeof i == "number") && !(i % 1) && !isNaN(i);
	}

	function loadWindowList() {
	chrome.windows.getAll({ populate: true }, function(windowList) {
	tabs = {};
	tabIds = [];
	for (var i = 0; i < windowList.length; i++) {
	windowList[i].current = (windowList[i].id == currentWindowId);
	windowList[i].focused = (windowList[i].id == focusedWindowId);

	for (var j = 0; j < windowList[i].tabs.length; j++) {
	tabIds[tabIds.length] = windowList[i].tabs[j].id;
	tabs[windowList[i].tabs[j].id] = windowList[i].tabs[j];
	}
	}

	var input = new JsExprContext(windowList);
	var output = document.getElementById('windowList');
	jstProcess(input, output);
	});
	}

	function updateTabData(id) {
	var retval = {
	url: document.getElementById('url_' + id).value,
	selected: document.getElementById('selected_' + id).value ? true : false
	}

	return retval;
	}

	function updateTab(id){
	try {
	chrome.tabs.update(id, updateTabData(id));
	} catch (e) {
	alert(e);
	}
	}

	function moveTabData(id) {
	return {
	'index': parseInt(document.getElementById('index_' + id).value),
	'windowId': parseInt(document.getElementById('windowId_' + id).value)
	}
	}
	function moveTab(id) {
	try {
	chrome.tabs.move(id, moveTabData(id));
	} catch (e) {
	alert(e);
	}
	}

	function createTabData(id) {
	return {
	'index': parseInt(document.getElementById('index_' + id).value),
	'windowId': parseInt(document.getElementById('windowId_' + id).value),
	'index': parseInt(document.getElementById('index_' + id).value),
	'url': document.getElementById('url_' + id).value,
	'selected': document.getElementById('selected_' + id).value ? true : false
	}
	}

	function createTab() {
	var args = createTabData('new')

	if (!isInt(args.windowId))
	delete args.windowId;
	if (!isInt(args.index))
	delete args.index;

	try {
	chrome.tabs.create(args);
	} catch (e) {
	alert(e);
	}
	}

	function updateAll() {
	try {
	for (var i = 0; i < tabIds.length; i++) {
	chrome.tabs.update(tabIds[i], updateTabData(tabIds[i]));
	}
	} catch(e) {
	alert(e);
	}
	}

	function moveAll() {
	appendToLog('moving all');
	try {
	for (var i = 0; i < tabIds.length; i++) {
	chrome.tabs.move(tabIds[i], moveTabData(tabIds[i]));
	}
	} catch(e) {
	alert(e);
	}
	}

	function removeTab(tabId) {
	try {
	chrome.tabs.remove(tabId, function() {
	appendToLog('tab: ' + tabId + ' removed.');
	});
	} catch (e) {
	alert(e);
	}
	}

	function appendToLog(logLine) {
	var log = document.getElementById('log');
	log.innerHTML = '<div> > ' + logLine + '</div>' + log.innerHTML;
	}

	function clearLog() {
	document.getElementById('log').innerHTML = '';
	}

	chrome.windows.onCreated.addListener(function(createInfo) {
	appendToLog('windows.onCreated -- window: ' + createInfo.id);
	loadWindowList();
	});

	chrome.windows.onFocusChanged.addListener(function(windowId) {
	focusedWindowId = windowId;
	appendToLog('windows.onFocusChanged -- window: ' + windowId);
	loadWindowList();
	});

	chrome.windows.onRemoved.addListener(function(windowId) {
	appendToLog('windows.onRemoved -- window: ' + windowId);
	loadWindowList();
	});

	chrome.tabs.onCreated.addListener(function(tab) {
	appendToLog('tabs.onCreated -- window: ' + tab.windowId + ' tab: ' + tab.id + ' index ' + tab.index + ' url ' + tab.url);
	loadWindowList();
	});

	chrome.tabs.onAttached.addListener(function(tabId, props) {
	appendToLog('tabs.onAttached -- window: ' + props.newWindowId + ' tab: ' + tabId + ' index ' + props.newPosition);
	loadWindowList();
	});

	chrome.tabs.onMoved.addListener(function(tabId, props) {
	appendToLog('tabs.onMoved -- window: ' + props.windowId + ' tab: ' + tabId + ' from ' + props.fromIndex + ' to ' + props.toIndex);
	loadWindowList();
	});

	function refreshTab(tabId) {
	chrome.tabs.get(tabId, function(tab) {
	var input = new JsExprContext(tab);
	var output = document.getElementById('tab_' + tab.id);
	jstProcess(input, output);
	appendToLog('tab refreshed -- tabId: ' + tab.id + ' url: ' + tab.url);
	});
	}

	chrome.tabs.onUpdated.addListener(function(tabId, props) {
	appendToLog('tabs.onUpdated -- tab: ' + tabId + ' status ' + props.status + ' url ' + props.url);
	refreshTab(tabId);
	});

	chrome.tabs.onDetached.addListener(function(tabId, props) {
	appendToLog('tabs.onDetached -- window: ' + props.oldWindowId + ' tab: ' + tabId + ' index ' + props.oldPosition);
	loadWindowList();
	});

	chrome.tabs.onSelectionChanged.addListener(function(tabId, props) {
	appendToLog('tabs.onSelectionChanged -- window: ' + props.windowId + ' tab: ' + tabId);
	loadWindowList();
	});

	chrome.tabs.onRemoved.addListener(function(tabId) {
	appendToLog('tabs.onRemoved -- tab: ' + tabId);
	loadWindowList();
	});

	function createWindow() {
	var args = {
	'left': parseInt(document.getElementById('new_window_left').value),
	'top': parseInt(document.getElementById('new_window_top').value),
	'width': parseInt(document.getElementById('new_window_width').value),
	'height': parseInt(document.getElementById('new_window_height').value),
	'url': document.getElementById('new_window_url').value
	}

	if (!isInt(args.left))
	delete args.left;
	if (!isInt(args.top))
	delete args.top;
	if (!isInt(args.width))
	delete args.width;
	if (!isInt(args.height))
	delete args.height;
	if (!args.url)
	delete args.url;

	try {
	chrome.windows.create(args);
	} catch(e) {
	alert(e);
	}
	}

	function refreshWindow(windowId) {
	chrome.windows.get(windowId, function(window) {
	chrome.tabs.getAllInWindow(window.id, function(tabList) {
	window.tabs = tabList;
	var input = new JsExprContext(window);
	var output = document.getElementById('window_' + window.id);
	jstProcess(input, output);

	appendToLog('window refreshed -- windowId: ' + window.id + ' tab count:' + window.tabs.length);
	});
	});
	}

	function updateWindowData(id) {
	var retval = {
	left: parseInt(document.getElementById('left_' + id).value),
	top: parseInt(document.getElementById('top_' + id).value),
	width: parseInt(document.getElementById('width_' + id).value),
	height: parseInt(document.getElementById('height_' + id).value)
	}

	if (!isInt(retval.left))
	delete retval.left;
	if (!isInt(retval.top))
	delete retval.top;
	if (!isInt(retval.width))
	delete retval.width;
	if (!isInt(retval.height))
	delete retval.height;

	return retval;
	}

	function updateWindow(id){
	try {
	chrome.windows.update(id, updateWindowData(id));
	} catch (e) {
	alert(e);
	}
	}

	function removeWindow(windowId) {
	try {
	chrome.windows.remove(windowId, function() {
	appendToLog('window: ' + windowId + ' removed.');
	});
	} catch (e) {
	alert(e);
	}
	}

	function refreshSelectedTab(windowId) {
	chrome.tabs.getSelected(windowId, function(tab) {
	var input = new JsExprContext(tab);
	var output = document.getElementById('tab_' + tab.id);
	jstProcess(input, output);
	appendToLog('selected tab refreshed -- tabId: ' + tab.id + ' url:' + tab.url);
	});
	}

	</script>
	</head>
	<body onload="bootStrap();">
	<div id="windowList">
	<div style="background-color: #AAEEEE; margin: 4px; padding: 8px; margin: 20px" jsselect="$this"
	jsvalues="id:'window_' + id">
	<div style="font-style: italic; width: 80px; display: inline-block">
	Window: <span jscontent="id"></span>
	</div>
	<div style="display: inline-block">
	left: <input style="width: 60px" type="text" jsvalues="value:$this.left;id:'left_' + id" />
	top: <input style="width: 60px" type="text" jsvalues="value:$this.top;id:'top_' + id" />
	width: <input style="width: 60px" type="text" jsvalues="value:$this.width;id:'width_' + id" />
	height: <input style="width: 60px" type="text" jsvalues="value:$this.height;id:'height_' + id" />
	<input type="checkbox" jsvalues="checked:focused; id:'focused_' + id" /> Focused
	<input type="checkbox" jsvalues="checked:current; id:'current_' + id" /> Current
	<button onclick="refreshWindow(this.jstdata);" jsvalues=".jstdata:id">Refresh</button>
	</div>
	<div id="tabList">
	<div jsselect="tabs">
	<div style="background-color: #EEEEEE; margin: 8px; padding: 4px" jsvalues="id:'tab_' + id">
	<div style="margin: 8px">
	<div style="font-style: italic; width: 80px; display: inline-block" jscontent="'TabId: ' + id"></div>
	<div style="width: 300px; display: inline-block">
	index: <input style="width: 20px" type="text" jsvalues="value:$this.index;id:'index_' + id" />
	windowId: <input style="width: 20px" type="text" jsvalues="value:windowId;id:'windowId_' + id" />
	<button onclick="moveTab(this.jstdata);" jsvalues=".jstdata:id">Move</button>
	<button onclick="refreshTab(this.jstdata);" jsvalues=".jstdata:id">Refresh</button>
	</div>
	</div>
	<div style="margin: 8px">
	<div>
	<div style="width: 40px; display:inline-block">title:</div>
	<input style="width: 90%" type="text" jsvalues="value:title;id:'title_' + id" />
	</div>
	<div>
	<div style="width: 40px; display:inline-block">url:</div>
	<input style="width: 90%" type="text" jsvalues="value:url;id:'url_' + id" />
	</div>
	<div><input type="checkbox" jsvalues="checked:selected; id:'selected_' + id" /> Selected</div>
	</div>
	<button onclick="updateTab(this.jstdata)" jsvalues=".jstdata:id">Update Tab</button>
	<button onclick="removeTab(this.jstdata);" jsvalues=".jstdata:id">Close Tab</button>
	</div>
	</div>
	</div>
	<button onclick="updateWindow(this.jstdata);" jsvalues=".jstdata:id">Update Window</button>
	<button onclick="removeWindow(this.jstdata);" jsvalues=".jstdata:id">Close Window</button>
	<button onclick="refreshSelectedTab(this.jstdata);" jsvalues=".jstdata:id">Refresh Selected Tab</button>
	</div>
	</div>
	<div style="background-color: #EEEEBB; margin: 20px; padding: 8px">
	<h3 style="text-align: center; margin: 8px"> Create Window</h3>
	<div style="margin: 8px">
	<div style="width: 300px; display: inline-block">
	left: <input style="width: 20px" type="text" id="new_window_left" />
	top: <input style="width: 20px" type="text" id="new_window_top" />
	width: <input style="width: 20px" type="text" id="new_window_width" />
	height: <input style="width: 20px" type="text" id="new_window_height" />
	</div>
	</div>
	<div style="margin: 8px">
	<div>
	<div style="width: 40px; display:inline-block">url:</div>
	<input style="width: 90%" type="text" id="new_window_url" />
	</div>
	</div>
	<button onclick="createWindow();">Create</button>
	</div>
	<div style="background-color: #EEEEAA; margin: 20px; padding: 8px">
	<h3 style="text-align: center; margin: 8px"> Create Tab</h3>
	<div style="margin: 8px">
	<div style="width: 300px; display: inline-block">
	index: <input style="width: 20px" type="text" id="index_new" />
	windowId: <input style="width: 20px" type="text" id="windowId_new" />
	<button onclick="moveTab(this.jstdata);" jsvalues=".jstdata:id">Move</button>
	</div>
	</div>
	<div style="margin: 8px">
	<div>
	<div style="width: 40px; display:inline-block">title:</div>
	<input style="width: 90%" type="text" id="title_new" />
	</div>
	<div>
	<div style="width: 40px; display:inline-block">url:</div>
	<input style="width: 90%" type="text" id="url_new" />
	</div>
	<div><input type="checkbox" id="selected_new" /> Selected</div>
	</div>
	<button onclick="createTab();">Create</button>
	</div>
	<div style="margin: 20px;">
	<button onclick="loadWindowList();">Refresh</button>
	<button onclick="updateAll();">Update All</button>
	<button onclick="moveAll();">Move All</button>
	<button onclick="clearLog();">-->Clear Log</button>
	<button onclick="chrome.windows.create();">New Window</button>
	</div>
	<div id="log" style="background-color: #EEAAEE; margin: 20px; padding: 8px">
	</div>
	</body>
	</html>