add tabs-tabs-tabs example to show switching active tabs

tabs-tabs-tabs/tabs.css

@@ -7,6 +7,14 @@ a {
   display: inline-block;
 }
 
+.switch-tabs {
+	padding-left: 10px;
+}
+
+.switch-tabs a {
+	display: block;
+}
+
 .panel {
   margin: 5px;
 }

tabs-tabs-tabs/tabs.html

@@ -33,6 +33,13 @@
     <a href="#" id="tabs-default-zoom">Reset zoom</a><br>
     <a href="#" id="tabs-decrease-zoom">Zoom out</a>
 
+    <div class="panel-section-separator"></div>
+
+    <div class="switch-tabs">
+      <p>Switch tabs</p>
+
+      <div id="tabs-list"></div>
+    </div>
   </div>
 
   <script src="tabs.js"></script>

tabs-tabs-tabs/tabs.js

@@ -12,6 +12,30 @@ function firstUnpinnedTab(tabs) {
   }
 }
 
+function listTabs() {
+  chrome.tabs.query({
+    currentWindow: true
+  }, function(tabs) {
+    var tabsList = document.getElementById('tabs-list'),
+        currentTabs = document.createDocumentFragment();
+
+    tabsList.innerHTML = '';
+
+    for (var tab of tabs) {
+      if (!tab.active) {
+        var tabLink = document.createElement('a');
+
+        tabLink.innerHTML = tab.title || tab.id;
+        tabLink.setAttribute('href', tab.id);
+        tabLink.classList.add('switch-tabs');
+        currentTabs.appendChild(tabLink);
+      }
+    }
+
+    tabsList.appendChild(currentTabs);
+  });
+}
+
 document.addEventListener("click", function(e) {
   function callOnActiveTab(callback) {
     chrome.tabs.query({currentWindow: true}, function(tabs) {
@@ -122,5 +146,23 @@ document.addEventListener("click", function(e) {
     });
   }
 
+  else if (e.target.classList.contains('switch-tabs')) {
+    var tabId = +e.target.getAttribute('href');
+
+    chrome.tabs.query({
+      currentWindow: true
+    }, function(tabs) {
+      for (var tab of tabs) {
+        if (tab.id === tabId) {
+          chrome.tabs.update(tabId, {
+              active: true
+          });
+        }
+      }
+    });
+  }
+
   e.preventDefault();
 });
+
+document.addEventListener("DOMContentLoaded", listTabs);