| <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> |