diff --git a/tabs-tabs-tabs/tabs.css b/tabs-tabs-tabs/tabs.css index 959491f..bfd9822 100644 --- a/tabs-tabs-tabs/tabs.css +++ b/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; } diff --git a/tabs-tabs-tabs/tabs.html b/tabs-tabs-tabs/tabs.html index 7085c0c..6113ed0 100644 --- a/tabs-tabs-tabs/tabs.html +++ b/tabs-tabs-tabs/tabs.html @@ -36,6 +36,13 @@ Highlight (only supported by Chrome) +
+ +
+

Switch to tab

+ +
+
diff --git a/tabs-tabs-tabs/tabs.js b/tabs-tabs-tabs/tabs.js index eade5d3..dba3dfc 100644 --- a/tabs-tabs-tabs/tabs.js +++ b/tabs-tabs-tabs/tabs.js @@ -12,6 +12,37 @@ function firstUnpinnedTab(tabs) { } } +/** + * listTabs to switch to + */ +function listTabs() { + getCurrentWindowTabs().then((tabs) => { + let tabsList = document.getElementById('tabs-list'); + let currentTabs = document.createDocumentFragment(); + let limit = 5; + let counter = 0; + + tabsList.textContent = ''; + + for (let tab of tabs) { + if (!tab.active && counter <= limit) { + let tabLink = document.createElement('a'); + + tabLink.textContent = tab.title || tab.id; + tabLink.setAttribute('href', tab.id); + tabLink.classList.add('switch-tabs'); + currentTabs.appendChild(tabLink); + } + + counter += 1; + } + + tabsList.appendChild(currentTabs); + }); +} + +document.addEventListener("DOMContentLoaded", listTabs); + function getCurrentWindowTabs() { return browser.tabs.query({currentWindow: true}); } @@ -137,6 +168,22 @@ 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(); });