xfox111/TabsAsideExtension
1
0
Fork 0
mirror of https://github.com/XFox111/TabsAsideExtension.git synced 2026-04-22 07:58:01 +03:00
Code Wiki Activity

Basic functional done

Browse Source
This commit is contained in:
Michael Gordeev
2020-03-25 14:50:50 +03:00
parent 1480e88081
commit 995c7b76dd
10 changed files with 984 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TabsAside.html
+87
View File
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<title>Tabs aside</title>
<link id="icon" rel="shortcut icon" type="image/png" href="icons/light/empty/16.png" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/style.generic.css" />
<link rel="stylesheet" type="text/css" href="css/style.dark.css" />
<style type="text/css">
body {
margin: 0px;
overflow: hidden;
}
aside {
transform: none !important;
left: 0px;
width: initial !important;
}
</style>
</head>
<body class="tabsAside">
<aside class="tabsAside pane">
<header>
<div>
<h1>Tabs aside</h1>
<button title="Options">&#xE10C;</button>
<nav>
<div>
<button value="https://github.com/xfox111/ChromiumTabsAside">Visit GitHub page</button>
<button value="https://chrome.google.com/webstore/category/extensions">Leave feedback</button>
<button value="https://buymeacoffee.com/xfox111">Buy me a coffee!</button>
<button hidden>Backup saved tabs</button>
</div>
<p>
<small>v1.0</small><br />
Developed by Michael Gordeev (<a href="https://twitter.com/xfox111"
target="_blank">@xfox111</a>)
</p>
</nav>
</div>
<a class="saveTabs">&#xE0AB; Set current tabs aside</a>
<hr />
</header>
<section>
<h2>You have no aside tabs</h1>
<!--<div>
<div>
<span>Tabs: $(tabsCount)</span>
<small>$(timestamp)</small>
<a>Restore tabs</a>
<div>
<button title="More...">&#xE10C;</button>
<nav>
<button>Add tabs to favorites</button>
<button>Share tabs</button>
</nav>
</div>
<button title="Remove collection">&#xE106;</button>
</div>
<div>
<div title="Tab title caption">
<div>
<div></div>
<span>$(title)</span>
<button title="Remove tab from collection">&#xE106;</button>
</div>
</div>
</div>
</div>-->
</section>
</aside>
<script type="text/javascript" src="js/aside-script.js"></script>
</body>
</html>
collections.html
+48 -47
View File
@@ -1,56 +1,57 @@
<div class="aside pane" id="aside-pane" style="transform: translateX(110%);">
<div class="header">
<div class="title">
<h1>Tabs aside</h1>
<button title="Options">&#xE10C;</button>
<nav>
<div>
<button onclick="window.open('https://github.com/xfox111/ChromiumTabsAside', '_blank')">Visit GitHub page</button>
<button onclick="window.open('https://chrome.google.com/webstore/category/extensions', '_blank')">Leave feedback</button>
<button onclick="window.open('https://www.buymeacoffee.com/xfox111', '_blank')">Buy me a coffee!</button>
</div>
<p>
<small>v1.0</small><br />
Developed by Michael Gordeev (<a href="https://twitter.com/xfox111" target="_blank">@xfox111</a>)
</p>
</nav>
</div>
<a class="setAside">&#xE0AB; Set current tabs aside</a>
<hr />
</div>
<div id="content">
<h2 id="noTabsTitle" style="display: none;">You have no aside tabs</h1>
<div class="set">
<div class="setHeader">
<div class="tabsAside background">
<aside class="tabsAside pane">
<header>
<div>
<h1>Tabs aside</h1>
<button title="Options">&#xE10C;</button>
<nav>
<div>
<button onclick="window.open('https://github.com/xfox111/ChromiumTabsAside', '_blank')">Visit GitHub page</button>
<button onclick="window.open('https://chrome.google.com/webstore/category/extensions', '_blank')">Leave feedback</button>
<button onclick="window.open('https://buymeacoffee.com/xfox111', '_blank')">Buy me a coffee!</button>
<button hidden>Backup saved tabs</button>
</div>
<p>
<small>v1.0</small><br />
Developed by Michael Gordeev (<a href="https://twitter.com/xfox111" target="_blank">@xfox111</a>)
</p>
</nav>
</div>
<a class="saveTabs">&#xE0AB; Set current tabs aside</a>
<hr />
</header>
<section>
<h2>You have no aside tabs</h1>
<!--<div>
<div>
<span>Tabs: $(tabsCount)</span>
<small>$(timestamp)</small>
</div>
<div>
<a>Restore tabs</a>
<button title="More...">&#xE10C;</button>
<nav>
<button>Add tabs to favorites</button>
<button>Share tabs</button>
</nav>
<div>
<button title="More...">&#xE10C;</button>
<nav>
<button>Add tabs to favorites</button>
<button>Share tabs</button>
</nav>
</div>
<button title="Remove collection">&#xE106;</button>
</div>
</div>
<div class="collection">
<div class="item" title="Tab title caption">
<div class="caption">
<div></div>
<span>$(title)</span>
<button title="Remove tab from collection">&#xE106;</button>
<div>
<div title="Tab title caption">
<div>
<div></div>
<span>$(title)</span>
<button title="Remove tab from collection">&#xE106;</button>
</div>
</div>
</div>
</div>
</div>
</div>
<link id="darkCSS" rel="stylesheet" type="text/css" href="%EXTENSION_PATH%css/style.dark.css" disabled/>
</div>-->
</section>
</aside>
</div>
css/style.css
+158 -114
View File
@@ -1,178 +1,222 @@
.aside.pane
.tabsAside.background
{
font-family: 'Segoe UI', 'Segoe MDL2 Assets';
user-select: none;
position: fixed;
z-index: 999;
right: 0px;
top: 0px;
width: 40%;
min-width: 500px;
min-height: 100%;
background-color: #f7f7f7;
border: 1px solid rgba(100, 100, 100, .5);
box-sizing: border-box;
box-shadow: 6px 0px 12px black;
transition: .2s;
z-index: 9999 !important;
background-color: rgba(255, 255, 255, .5) !important;
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
right: 0 !important;
left: 0 !important;
transition: .2s !important;
opacity: 0;
}
.aside.pane > .header
.tabsAside.pane
{
font-family: 'Segoe UI', 'Segoe MDL2 Assets' !important;
user-select: none !important;
position: fixed !important;
right: 0px !important;
top: 0px !important;
bottom: 0px !important;
overflow: auto !important;
width: 40%;
min-width: 500px !important;
background-color: #f7f7f7 !important;
border: 1px solid rgba(100, 100, 100, .5) !important;
border-width: 0px 0px 0px 1px !important;
box-sizing: border-box !important;
box-shadow: 6px 0px 12px black !important;
font-size: small !important;
transform: translateX(110%); /* Pane is hidden */
transition: .2s !important;
}
.tabsAside.pane[opened]
{
margin: 20px 40px;
transform: translateX(0px) !important;
}
.aside.pane > .header > .title
/* Pane header*/
.tabsAside.pane > header
{
margin: 20px 40px !important;
}
.tabsAside.pane > header > div
{
display: grid;
grid-template-columns: 1fr auto;
display: grid !important;
grid-template-columns: 1fr auto !important;
}
.aside.pane > .header > .title > h1
.tabsAside.pane > header > div > h1
{
margin: 10px 0px;
font-weight: normal;
font-size: 21pt;
margin: 10px 0px !important;
font-weight: normal !important;
font-size: 21pt !important;
}
.aside.pane > .header > .title > button
.tabsAside.pane > header > div > button
{
margin: auto;
margin: auto !important;
}
.aside.pane > .header > .title > nav
.tabsAside.pane > header > div > nav
{
top: 70px;
right: 40px;
top: 70px !important;
right: 40px !important;
}
.aside.pane > .header > .title > nav > div
.tabsAside.pane > header > div > nav > div
{
box-shadow: 0px 4px 5px -2px rgba(100, 100, 100, .5);
box-shadow: 0px 4px 5px -2px rgba(100, 100, 100, .5) !important;
}
.aside.pane > .header > .title > nav > p
.tabsAside.pane > header > div > nav > p
{
margin: 10px;
margin: 10px !important;
}
.aside.pane > .header > hr
.tabsAside.pane > header > hr
{
border: 1px solid #8a8a8a;
border: 1px solid #8a8a8a !important;
}
.aside.pane > #content > h2
.tabsAside.pane > section > h2
{
margin: 0px 40px;
font-weight: normal;
margin: 0px 40px !important;
font-weight: normal !important;
}
.aside.pane > #content > .set > .setHeader
/* Collection header */
.tabsAside.pane > section > div
{
margin: 0px 20px;
display: grid;
grid-template-columns: 1fr auto;
transition: .2s !important;
}
.aside.pane > #content > .set > .setHeader small
.tabsAside.pane > section > div > div:first-child
{
margin: 0px 20px !important;
display: grid !important;
grid-template-columns: auto 1fr auto auto auto !important;
grid-column-gap: 10px !important;
align-items: center !important;
}
.tabsAside.pane > section > div > div:first-child > small
{
color: gray;
color: gray !important;
}
.tabsAside.pane > section > div > div:first-child > span
{
font-weight: 600 !important;
}
.tabsAside.pane > section > div > div:first-child > a
{
font-size: 11pt !important;
}
.aside.pane > #content > .set > .setHeader span
.tabsAside.pane > section > div > div:first-child > div
{
font-weight: 600;
display: none !important; /* TODO: Implement this menu */
}
.aside.pane > #content > .set > .setHeader a
{
font-size: 11pt;
font-weight: 500;
}
.aside.pane > #content > .set > .setHeader nav
{
width: 200px;
margin-top: 10px;
right: 50px;
}
.aside.pane > #content > .set > .setHeader > div:first-child
{
margin: auto 0px;
}
.aside.pane > #content > .set > .collection
{
padding: 10px 0px;
padding-left: 40px;
white-space: nowrap;
overflow: auto;
}
.aside.pane > #content > .set > .collection > .item
.tabsAside.pane > section > div > div:first-child > div > nav
{
width: 175px;
height: 148px;
margin: 5px;
background-color: #c2c2c2;
background-image: url("../images/tab_thumbnail.png");
display: inline-grid;
grid-template-rows: 1fr auto;
box-shadow: 0px 0px 5px rgba(100, 100, 100, .5);
transition: .25s;
cursor: pointer;
width: 200px !important;
margin-top: 10px !important;
right: 50px !important;
}
.aside.pane > #content > .set > .collection > .item:hover
/* Tabs collection */
.tabsAside.pane > section > div > div:last-child
{
margin: 0px 0px 0px 20px !important;
padding: 10px 40px 10px 20px !important;
white-space: nowrap !important;
overflow: auto !important;
}
.tabsAside.pane > section > div > div:last-child:hover::-webkit-scrollbar-thumb
{
visibility: visible !important;
}
.tabsAside.pane > section > div > div:last-child > div
{
width: 175px !important;
height: 148px !important;
margin: 5px !important;
background-color: #c2c2c2 !important;
background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_thumbnail.png");
display: inline-grid !important;
grid-template-rows: 1fr auto !important;
box-shadow: 0px 0px 5px rgba(100, 100, 100, .5) !important;
transition: .25s !important;
cursor: pointer !important;
}
.tabsAside.pane > section > div > div:last-child > div:hover
{
filter: brightness(120%);
box-shadow: 0px 0px 15px rgba(100, 100, 100, .5);
filter: brightness(120%) !important;
box-shadow: 0px 0px 15px rgba(100, 100, 100, .5) !important;
}
.aside.pane > #content > .set > .collection > .item > .caption
.tabsAside.pane > section > div > div:last-child > div > div
{
background-color: rgba(233, 233, 233, .75);
grid-row: 2;
display: grid;
grid-template-columns: auto 1fr auto;
background-color: rgba(233, 233, 233, .75) !important;
grid-row: 2 !important;
display: grid !important;
grid-template-columns: auto 1fr auto !important;
}
.aside.pane > #content > .set > .collection > .item > .caption > button
.tabsAside.pane > section > div > div:last-child > div > div > button
{
margin: auto;
margin-right: 5px;
visibility: hidden;
margin: auto !important;
margin-right: 5px !important;
display: none !important;
}
.aside.pane > #content > .set > .collection > .item:hover > .caption > button
.tabsAside.pane > section > div > div:last-child > div:hover > div > button
{
visibility: visible;
display: initial !important;
}
.aside.pane > #content > .set > .collection > .item > .caption > div
.tabsAside.pane > section > div > div:last-child > div > div > div
{
width: 20px;
height: 20px;
margin: 10px;
width: 20px !important;
height: 20px !important;
margin: 10px !important;
background-image: url("../images/tab_icon.png");
background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_icon.png");
background-size: 20px !important;
}
.aside.pane > #content > .set > .collection > .item > .caption > span
.tabsAside.pane > section > div > div:last-child > div > div > span
{
margin: auto 0px;
overflow: hidden !important;
margin: auto 0px !important;
margin-right: 10px !important;
}
.tabsAside.pane > section > div > div:last-child > div:hover > div > span
{
margin-right: 5px !important;
}
@media only screen and (max-width: 500px)
{
.aside.pane
.tabsAside.pane
{
right: initial;
width: 100%;
left: 0px;
min-width: initial;
width: initial !important;
left: 0px !important;
min-width: initial !important;
}
}
css/style.dark.css
+50 -45
View File
@@ -1,54 +1,59 @@
.aside.pane
.tabsAside[darkmode].background
{
background-color: rgba(0, 0, 0, .5) !important;
}
.tabsAside[darkmode] .pane
{
background-color: #333333;
color: white;
background-color: #333333 !important;
color: white !important;
}
.aside button
{
color: white;
}
.aside button:hover
{
background-color: gray;
}
.aside button:active
{
background-color: dimgray;
}
.aside.pane > #content > .set > .setHeader small
{
color: lightgray;
}
.aside ::-webkit-scrollbar-thumb
{
background: gray;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover
.tabsAside[darkmode] .pane button
{
background: dimgray;
color: white !important;
}
.tabsAside[darkmode] .pane button:hover
{
background-color: gray !important;
}
.tabsAside[darkmode] .pane button:active
{
background-color: dimgray !important;
}
.aside.pane > #content > .set > .collection > .item
{
background-color: #0c0c0c;
background-image: url("../images/tab_thumbnail_dark.png");
}
.tabsAside[darkmode] .pane > section > div > div:first-child > div:first-child > small
{
color: lightgray !important;
}
.aside.pane > #content > .set > .collection > .item > .caption
{
background-color: rgba(50, 50, 50, .75);
}
.tabsAside[darkmode] .pane ::-webkit-scrollbar-thumb
{
background: gray !important;
border-radius: 3px !important;
}
.tabsAside[darkmode] .pane ::-webkit-scrollbar-thumb:hover
{
background: dimgray !important;
}
.aside nav
{
background-color: #3f3f3f;
}
.tabsAside[darkmode] .pane > section > div > div:last-child > div
{
background-color: #0c0c0c !important;
background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_thumbnail_dark.png");
}
.aside.pane > #content > .set > .collection > .item > .caption > div
{
background-image: url("../images/tab_icon_dark.png");
}
.tabsAside[darkmode] .pane > section > div > div:last-child > div > div
{
background-color: rgba(50, 50, 50, .75) !important;
}
.tabsAside[darkmode] .pane > section > div > div:last-child > div > div > div
{
background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_icon_dark.png");
}
.tabsAside[darkmode] .pane nav
{
background-color: #3f3f3f !important;
}
css/style.generic.css
+81 -98
View File
@@ -1,123 +1,106 @@
.aside ::-webkit-scrollbar
/* Custom scrollbar */
.tabsAside ::-webkit-scrollbar
{
height: 6px;
height: 6px !important;
}
.aside ::-webkit-scrollbar-thumb
.tabsAside ::-webkit-scrollbar-thumb
{
background: darkgray;
border-radius: 3px;
visibility: hidden !important;
background: darkgray !important;
border-radius: 3px !important;
}
::-webkit-scrollbar-thumb:hover
.tabsAside ::-webkit-scrollbar-thumb:hover
{
background: gray;
background: gray !important;
}
.aside a
.tabsAside::-webkit-scrollbar
{
font-family: 'Segoe UI', 'Segoe MDL2 Assets';
color: #0078d7;
}
.aside a:hover
{
text-decoration: underline;
cursor: pointer;
}
.aside .slider
{
position: relative;
display: inline-block;
border-radius: 13px;
width: 50px;
height: 26px;
background-color: #cccccc;
transition: .4s;
width: 6px !important;
}
.aside .slider:before
{
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 5px;
top: 5px;
border-radius: 50%;
margin: auto;
background-color: white;
transition: .3s;
}
.aside input:checked + .slider,
.aside input:focus + .slider
{
background-color: #0078d7;
}
.aside input:checked + .slider:before
{
transform: translateX(24px);
background-color: #3f3f3f;
}
.aside nav
.tabsAside::-webkit-scrollbar-thumb
{
font-family: 'Segoe UI';
user-select: none;
background: gray !important;
border-radius: 3px !important;
}
.tabsAside::-webkit-scrollbar-thumb:hover
{
background: darkgray !important;
}
position: absolute;
width: 250px;
/* Links style */
.tabsAside a
{
font-family: 'Segoe UI', 'Segoe MDL2 Assets' !important;
color: #0078d7 !important;
}
.tabsAside a:hover
{
text-decoration: underline !important;
cursor: pointer !important;
}
box-shadow: 0px 0px 10px black;
background-color: white;
border-radius: 5px;
.tabsAside a:visited
{
color: #0078d7 !important;
}
z-index: 10;
/* Buttons style */
.tabsAside button
{
font-family: 'Segoe MDL2 Assets' !important;
width: 32px !important;
height: 32px !important;
background-color: transparent !important;
border: none !important;
cursor: pointer !important;
}
.tabsAside button:hover
{
background-color: #c6c6c6 !important;
}
.tabsAside button:active
{
background-color: gray !important;
}
visibility: hidden;
/* Context menus style */
.tabsAside nav
{
font-family: 'Segoe UI' !important;
user-select: none !important;
position: absolute !important;
width: 250px !important;
box-shadow: 0px 0px 10px black !important;
background-color: white !important;
border-radius: 5px !important;
z-index: 10 !important;
visibility: hidden !important;
}
.aside nav button
.tabsAside nav button
{
font-family: 'Segoe UI';
cursor: pointer;
background-color: transparent;
border: none;
font-family: 'Segoe UI' !important;
cursor: pointer !important;
background-color: transparent !important;
border: none !important;
font-size: medium;
text-align: start;
font-size: medium !important;
text-align: start !important;
padding: 10px;
width: 100%;
height: initial;
padding: 10px !important;
width: 100% !important;
height: initial !important;
}
.aside button + nav:active,
.aside button:focus + nav
.tabsAside button + nav:active,
.tabsAside button:focus + nav
{
visibility: visible;
}
.aside button
{
font-family: 'Segoe MDL2 Assets';
width: 32px;
height: 32px;
background-color: transparent;
border: none;
cursor: pointer;
}
.aside button:hover
{
background-color: #c6c6c6;
}
.aside button:active
{
background-color: gray;
visibility: visible !important;
}
js/aside-script.js
+316 -29
View File
@@ -1,40 +1,327 @@
chrome.runtime.onMessage.addListener(function(sender, request, sendResponse)
if (document.location.protocol == "chrome-extension:")
InitializeStandalone();
else
{
var pane = document.querySelector("#aside-pane");
if (pane.style.transform == "translateX(110%)")
setTimeout(function ()
{
pane.style.transform = "translateX(0%)";
}
else
{
pane.style.transform = "translateX(110%)";
}
var pane = document.querySelector(".tabsAside.pane");
UpdateTheme();
sendResponse();
});
if (pane == null)
{
var xhr = new XMLHttpRequest();
xhr.open('GET', chrome.extension.getURL("collections.html"), true);
xhr.onreadystatechange = function ()
{
if (this.status !== 200 || document.querySelector("#aside-pane") != null)
return;
var xhr = new XMLHttpRequest();
xhr.open('GET', chrome.extension.getURL("collections.html"), true);
xhr.onreadystatechange = function ()
if (document.querySelector(".tabsAside.pane") == null)
{
document.body.innerHTML += this.responseText;
chrome.runtime.sendMessage({ command: "loadData" }, function (collections)
{
if (document.querySelector(".tabsAside.pane section div") == null)
collections.forEach(i =>
{
AddCollection(i);
});
});
}
setTimeout(function ()
{
pane = document.querySelector(".tabsAside.pane");
if (window.matchMedia("(prefers-color-scheme: dark)").matches)
pane.parentElement.setAttribute("darkmode", "");
document.querySelector(".tabsAside .saveTabs").onclick = SetTabsAside;
document.querySelectorAll(".tabsAside.pane > header nav button").forEach(i =>
{
i.onclick = function () { window.open(i.value, '_blank'); };
});
document.querySelector(".tabsAside.background").addEventListener("click", function (event)
{
if (event.target == pane.parentElement)
{
pane.removeAttribute("opened");
pane.parentElement.style.opacity = 0;
document.body.style.overflow = "";
setTimeout(function ()
{
pane.parentElement.remove();
}, 300);
}
});
pane.setAttribute("opened", "");
pane.parentElement.style.opacity = 1;
document.body.style.overflow = "hidden";
}, 50);
};
xhr.send();
}
else
{
if (pane.hasAttribute("opened"))
{
pane.removeAttribute("opened");
pane.parentElement.style.opacity = 0;
document.body.style.overflow = "";
setTimeout(function ()
{
if (!pane.hasAttribute("opened"))
pane.parentElement.remove();
}, 300);
}
else
{
pane.setAttribute("opened", "");
pane.parentElement.style.opacity = 1;
}
}
}, 50);
}
function InitializeStandalone()
{
if (this.status !== 200 || document.querySelector("#aside-pane") != null)
return;
pane = document.querySelector(".tabsAside.pane");
document.body.innerHTML += this.responseText.split("%EXTENSION_PATH%").join(chrome.extension.getURL(""));
};
xhr.send();
function UpdateTheme()
{
var css = document.querySelector("#aside-pane #darkCSS")
if (window.matchMedia("(prefers-color-scheme: dark)").matches)
{
css.removeAttribute("disabled");
pane.parentElement.setAttribute("darkmode", "");
document.querySelector("#icon").href = "icons/dark/empty/16.png";
}
else
document.querySelector(".tabsAside .saveTabs").onclick = SetTabsAside;
document.querySelectorAll(".tabsAside.pane > header nav button").forEach(i =>
{
css.setAttribute("disabled", true);
i.onclick = function () { window.open(i.value, '_blank'); };
});
chrome.runtime.sendMessage({ command: "loadData" }, function (collections)
{
if (document.querySelector(".tabsAside.pane section div") == null)
collections.forEach(i =>
{
AddCollection(i);
});
});
}
function AddCollection(collection)
{
var list = document.querySelector(".tabsAside section");
list.querySelector("h2").setAttribute("hidden", "");
var rawTabs = "";
for (var i = 0; i < collection.links.length; i++)
{
rawTabs +=
"<div title='" + collection.titles[i] + "'>" +
"<span value='" + collection.links[i] + "'></span>" +
"<div>" +
"<div" + ((collection.icons[i] == 0 || collection.icons[i] == null) ? "" : " style='background-image: url(\"" + collection.icons[i] + "\")'") + "></div>" +
"<span>" + collection.titles[i] + "</span>" +
"<button title='Remove tab from collection'>&#xE106;</button>" +
"</div>" +
"</div>";
}
}
list.innerHTML += "<div>" +
"<div>" +
"<span>Tabs: " + collection.links.length + "</span>" +
"<small>" + GetAgo(collection.timestamp) + "</small>" +
"<a>Restore tabs</a>" +
"<div>" +
"<button title='More...'>&#xE10C;</button>" +
"<nav>" +
"<button>Add tabs to favorites</button>" +
"<button>Share tabs</button>" +
"</nav>" +
"</div>" +
"<button title='Remove collection'>&#xE106;</button>" +
"</div>" +
"<div>" + rawTabs + "</div>" +
"</div>"
list.querySelectorAll("a").forEach(i =>
{
i.onclick = function () { RestoreTabs(i.parentElement.parentElement) };
});
list.querySelectorAll("div > div:last-child > div > span").forEach(i =>
{
i.onclick = function () { window.open(i.getAttribute("value"), '_blank'); };
})
document.querySelectorAll(".tabsAside.pane > section > div > div:first-child > button").forEach(i =>
{
i.onclick = function () { RemoveTabs(i.parentElement.parentElement) };
});
document.querySelectorAll(".tabsAside.pane > section > div > div:first-child > div > nav > button:first-child").forEach(i =>
{
i.onclick = function () { AddToFavorites(i.parentElement.parentElement.parentElement.parentElement) };
});
document.querySelectorAll(".tabsAside.pane > section > div > div:first-child > div > nav > button:last-child").forEach(i =>
{
i.onclick = function () { ShareTabs(i.parentElement.parentElement.parentElement.parentElement) };
});
document.querySelectorAll(".tabsAside.pane > section > div > div:last-child > div > div > button").forEach(i =>
{
i.onclick = function () { RemoveOneTab(i.parentElement.parentElement) };
});
}
function SetTabsAside()
{
chrome.runtime.sendMessage({ command: "saveTabs" });
}
function RestoreTabs(collectionData)
{
chrome.runtime.sendMessage(
{
command: "restoreTabs",
collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
},
function ()
{
if (collectionData.parentElement.children.length < 3)
{
RemoveElement(collectionData);
setTimeout(function ()
{
document.querySelector(".tabsAside.pane > section > h2").removeAttribute("hidden");
}, 250);
}
else
RemoveElement(collectionData);
}
);
}
function RemoveTabs(collectionData)
{
chrome.runtime.sendMessage(
{
command: "deleteTabs",
collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
},
function ()
{
if (collectionData.parentElement.children.length < 3)
{
RemoveElement(collectionData);
setTimeout(function ()
{
document.querySelector(".tabsAside.pane > section > h2").removeAttribute("hidden");
}, 250);
}
else
RemoveElement(collectionData);
}
);
}
function AddToFavorites(collectionData)
{
chrome.runtime.sendMessage(
{
command: "toFavorites",
collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
});
}
function ShareTabs(collectionData)
{
chrome.runtime.sendMessage(
{
command: "share",
collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
});
}
function RemoveOneTab(tabData)
{
chrome.runtime.sendMessage(
{
command: "removeTab",
collectionIndex: Array.prototype.slice.call(tabData.parentElement.parentElement.parentElement.children).indexOf(tabData.parentElement.parentElement) - 1,
tabIndex: Array.prototype.slice.call(tabData.parentElement.children).indexOf(tabData)
},
function ()
{
tabData.parentElement.previousElementSibling.children[0].textContent = "Tabs: " + tabData.parentElement.children.length - 1;
if (tabData.parentElement.children.length < 2)
{
RemoveElement(tabData.parentElement.parentElement);
if (document.querySelector("tabsAside.pane > section").children.length < 2)
setTimeout(function ()
{
document.querySelector(".tabsAside.pane > section > h2").removeAttribute("hidden");
}, 250);
}
else
RemoveElement(tabData);
});
}
function GetAgo(timestamp)
{
var minutes = (Date.now() - timestamp) / 60000;
if (minutes < 1)
return "Just now";
else if (Math.floor(minutes) == 1)
return "1 minute ago";
else if (minutes < 60)
return Math.floor(minutes) + " minutes ago";
else if (Math.floor(minutes / 60) == 1)
return "1 hour ago";
else if (minutes < 24 * 60)
return Math.floor(minutes / 60) + " hours ago";
else if (Math.floor(minutes / 24 / 60) == 1)
return "1 day ago";
else if (minutes < 7 * 24 * 60)
return Math.floor(minutes / 24 / 60) + " days ago";
else if (Math.floor(minutes / 7 / 24 / 60) == 1)
return "1 week ago";
else if (minutes < 30 * 24 * 60)
return Math.floor(minutes / 7 / 24 / 60) + " weeks ago";
else if (Math.floor(minutes / 30 / 24 / 60) == 1)
return "1 month ago";
else if (minutes < 365 * 24 * 60)
return Math.floor(minutes / 30 / 24 / 60) + " months ago";
else if (Math.floor(minutes / 24 / 60) == 365)
return "1 year ago";
else
return Math.floor(minutes / 365 / 24 / 60) + "years ago";
}
function RemoveElement(el)
{
el.style.opacity = 0;
setTimeout(function ()
{
el.remove();
}, 200);
}
// TODO: Add more actions
// TODO: Make backup system
// TODO: Override websites' CSS
js/background.js
+230 -22
View File
@@ -1,33 +1,130 @@
chrome.browserAction.onClicked.addListener(function (tab)
{
if (tab.url.startsWith("http"))
{
chrome.tabs.executeScript(tab.id,
{
file: "js/aside-script.js",
allFrames: true,
runAt: "document_idle"
});
}
else if (tab.url.startsWith("chrome-extension") && tab.url.endsWith("TabsAside.html"))
chrome.tabs.remove(tab.id);
else
{
chrome.tabs.create({
url: chrome.extension.getURL("TabsAside.html"),
active: true
});
}
});
chrome.tabs.onActivated.addListener(function (activeInfo)
{
chrome.tabs.query({ url: chrome.extension.getURL("TabsAside.html") }, function (result)
{
if (result.length)
setTimeout(function ()
{
result.forEach(i =>
{
if (activeInfo.tabId != i.id)
chrome.tabs.remove(i.id);
});
}, 200);
});
});
function UpdateTheme()
{
if (window.matchMedia("(prefers-color-scheme: dark)").matches)
{
chrome.browserAction.setIcon(
{
path:
{
"128": "icons/dark/empty/128.png",
"48": "icons/dark/empty/48.png",
"32": "icons/dark/empty/32.png",
"16": "icons/dark/empty/16.png"
}
});
if (collections.length)
chrome.browserAction.setIcon(
{
path:
{
"128": "icons/dark/full/128.png",
"48": "icons/dark/full/48.png",
"32": "icons/dark/full/32.png",
"16": "icons/dark/full/16.png"
}
});
else
chrome.browserAction.setIcon(
{
path:
{
"128": "icons/dark/empty/128.png",
"48": "icons/dark/empty/48.png",
"32": "icons/dark/empty/32.png",
"16": "icons/dark/empty/16.png"
}
});
}
else
{
chrome.browserAction.setIcon(
{
path:
{
"128": "icons/light/empty/128.png",
"48": "icons/light/empty/48.png",
"32": "icons/light/empty/32.png",
"16": "icons/light/empty/16.png"
}
});
if (collections.length)
chrome.browserAction.setIcon(
{
path:
{
"128": "icons/light/full/128.png",
"48": "icons/light/full/48.png",
"32": "icons/light/full/32.png",
"16": "icons/light/full/16.png"
}
});
else
chrome.browserAction.setIcon(
{
path:
{
"128": "icons/light/empty/128.png",
"48": "icons/light/empty/48.png",
"32": "icons/light/empty/32.png",
"16": "icons/light/empty/16.png"
}
});
}
}
var collections = JSON.parse(localStorage.getItem("sets"));
if (collections == null)
collections = [];
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse)
{
switch (message.command)
{
case "loadData":
sendResponse(collections);
break;
case "saveTabs":
SaveCollection();
break;
case "restoreTabs":
RestoreCollection(message.collectionIndex);
sendResponse();
break;
case "deleteTabs":
DeleteCollection(message.collectionIndex);
sendResponse();
break;
case "removeTab":
RemoveTab(message.collectionIndex, message.tabIndex);
sendResponse();
break;
case "toFavorites":
AddTabsToFavorites(message.collectionIndex);
break;
case "share":
ShareTabs(message.collectionIndex);
break;
}
});
UpdateTheme();
chrome.windows.onCreated.addListener(UpdateTheme);
chrome.windows.onRemoved.addListener(UpdateTheme);
@@ -45,6 +142,117 @@ chrome.tabs.onDetached.addListener(UpdateTheme);
chrome.tabs.onAttached.addListener(UpdateTheme);
chrome.tabs.onRemoved.addListener(UpdateTheme);
chrome.tabs.onReplaced.addListener(UpdateTheme);
chrome.tabs.onZoomChange.addListener(UpdateTheme);
// TODO: Load saved tabs
function SaveCollection()
{
chrome.tabs.query({ currentWindow: true }, function (tabs)
{
tabs = tabs.filter(i => !i.url.startsWith("chrome-extension") && !i.url.endsWith("TabsAside.html"));
var collection =
{
timestamp: Date.now(),
tabsCount: tabs.length,
titles: tabs.map(tab => tab.title ?? ""),
links: tabs.map(tab => tab.url ?? ""),
icons: tabs.map(tab => tab.favIconUrl ?? "")//,
//tumbnails: tabs.map(tab => chrome.tabs.captureVisibleTab)
};
var rawData;
if (localStorage.getItem("sets") === null)
rawData = [collection];
else
{
rawData = JSON.parse(localStorage.getItem("sets"));
rawData.unshift(collection);
}
localStorage.setItem("sets", JSON.stringify(rawData));
collections = JSON.parse(localStorage.getItem("sets"));
chrome.tabs.create({});
chrome.tabs.remove(tabs.map(tab => tab.id));
});
UpdateTheme();
}
function DeleteCollection(collectionIndex)
{
collections = collections.filter(i => i != collections[collectionIndex]);
localStorage.setItem("sets", JSON.stringify(collections));
UpdateTheme();
}
function RestoreCollection(collectionIndex)
{
collections[collectionIndex].links.forEach(i =>
{
chrome.tabs.create(
{
url: i,
active: false
});
});
collections = collections.filter(i => i != collections[collectionIndex]);
localStorage.setItem("sets", JSON.stringify(collections));
UpdateTheme();
}
function AddTabsToFavorites(collectionIndex)
{
alert("Adding to favorites");
/*for (var i = 0; i < collections[collectionIndex].links.length; i++)
{
chrome.bookmarks.create(
{
title: collections[collectionIndex].titles[i],
url: collections[collectionIndex].links[i],
});
}*/
}
function ShareTabs(collectionId)
{
alert("Sharing");
}
function RemoveTab(collectionIndex, tabIndex)
{
var set = collections[collectionIndex];
if (--set.tabsCount < 1)
{
collections = collections.filter(i => i != set);
localStorage.setItem("sets", JSON.stringify(collections));
UpdateTheme();
return;
}
var titles = [];
var links = [];
var icons = [];
for (var i = set.links.length - 1; i >= 0; i--)
{
if (i == tabIndex)
continue;
titles.unshift(set.titles[i]);
links.unshift(set.links[i]);
icons.unshift(set.icons[i]);
}
set.titles = titles;
set.links = links;
set.icons = icons;
localStorage.setItem("sets", JSON.stringify(collections));
UpdateTheme();
}
manifest.json
+14 -10
View File
@@ -2,9 +2,15 @@
"name": "Tabs Aside",
"version": "0.1",
"manifest_version": 2,
"description": "Classic Microsoft Edge \"Tabs Aside\" feature",
"description": "Classic Microsoft Edge \"Tabs Aside\" feature for Chromium browers",
"author": "Michael \"XFox\" Gordeev",
"permissions": [ "tabs" ],
"permissions":
[
"tabs",
"unlimitedStorage",
"<all_urls>",
"bookmarks"
],
"icons":
{
@@ -13,27 +19,25 @@
"32": "icons/light/empty/32.png",
"16": "icons/light/empty/16.png"
},
"browser_action": { "default_icon": "icons/light/empty/32.png" },
"web_accessible_resources": [ "*" ],
"browser_action":
{
"default_popup": "popup/popup.html"
},
"content_scripts":
[
{
"matches": [ "<all_urls>" ],
"js": [ "js/aside-script.js" ],
"css":
[
"css/style.css",
"css/style.generic.css"
]
"css/style.generic.css",
"css/style.dark.css"
],
"run_at": "document_start"
}
],
"background":
{
"scripts": ["js/background.js"],
"scripts": [ "js/background.js" ],
"persistent": true
}
}
popup/popup.html
-8
View File
@@ -1,8 +0,0 @@
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript" src="trigger.js"></script>
</body>
</html>
popup/trigger.js
-11
View File
@@ -1,11 +0,0 @@
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs)
{
chrome.tabs.sendMessage(
tabs[0].id,
{ },
function()
{
window.close();
}
);
});