mirror of
https://github.com/XFox111/TabsAsideExtension.git
synced 2026-04-22 07:58:01 +03:00
Basic functional done
This commit is contained in:
Michael Gordeev
@@ -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"></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"> 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..."></button>
|
||||||
|
<nav>
|
||||||
|
<button>Add tabs to favorites</button>
|
||||||
|
<button>Share tabs</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<button title="Remove collection"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div title="Tab title caption">
|
||||||
|
<div>
|
||||||
|
<div></div>
|
||||||
|
<span>$(title)</span>
|
||||||
|
<button title="Remove tab from collection"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>-->
|
||||||
|
</section>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="js/aside-script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
+21
-20
@@ -1,6 +1,7 @@
|
|||||||
<div class="aside pane" id="aside-pane" style="transform: translateX(110%);">
|
<div class="tabsAside background">
|
||||||
<div class="header">
|
<aside class="tabsAside pane">
|
||||||
<div class="title">
|
<header>
|
||||||
|
<div>
|
||||||
<h1>Tabs aside</h1>
|
<h1>Tabs aside</h1>
|
||||||
<button title="Options"></button>
|
<button title="Options"></button>
|
||||||
|
|
||||||
@@ -8,7 +9,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<button onclick="window.open('https://github.com/xfox111/ChromiumTabsAside', '_blank')">Visit GitHub page</button>
|
<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://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>
|
<button onclick="window.open('https://buymeacoffee.com/xfox111', '_blank')">Buy me a coffee!</button>
|
||||||
|
<button hidden>Backup saved tabs</button>
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<p>
|
||||||
<small>v1.0</small><br />
|
<small>v1.0</small><br />
|
||||||
@@ -16,41 +18,40 @@
|
|||||||
</p>
|
</p>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<a class="setAside"> Set current tabs aside</a>
|
<a class="saveTabs"> Set current tabs aside</a>
|
||||||
<hr />
|
<hr />
|
||||||
</div>
|
</header>
|
||||||
|
|
||||||
<div id="content">
|
<section>
|
||||||
<h2 id="noTabsTitle" style="display: none;">You have no aside tabs</h1>
|
<h2>You have no aside tabs</h1>
|
||||||
|
|
||||||
<div class="set">
|
<!--<div>
|
||||||
<div class="setHeader">
|
|
||||||
<div>
|
<div>
|
||||||
<span>Tabs: $(tabsCount)</span>
|
<span>Tabs: $(tabsCount)</span>
|
||||||
<small>$(timestamp)</small>
|
<small>$(timestamp)</small>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a>Restore tabs</a>
|
<a>Restore tabs</a>
|
||||||
|
|
||||||
|
<div>
|
||||||
<button title="More..."></button>
|
<button title="More..."></button>
|
||||||
<nav>
|
<nav>
|
||||||
<button>Add tabs to favorites</button>
|
<button>Add tabs to favorites</button>
|
||||||
<button>Share tabs</button>
|
<button>Share tabs</button>
|
||||||
</nav>
|
</nav>
|
||||||
|
</div>
|
||||||
<button title="Remove collection"></button>
|
<button title="Remove collection"></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="collection">
|
<div>
|
||||||
<div class="item" title="Tab title caption">
|
<div title="Tab title caption">
|
||||||
<div class="caption">
|
<div>
|
||||||
<div></div>
|
<div></div>
|
||||||
<span>$(title)</span>
|
<span>$(title)</span>
|
||||||
<button title="Remove tab from collection"></button>
|
<button title="Remove tab from collection"></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>-->
|
||||||
</div>
|
</section>
|
||||||
|
</aside>
|
||||||
<link id="darkCSS" rel="stylesheet" type="text/css" href="%EXTENSION_PATH%css/style.dark.css" disabled/>
|
|
||||||
</div>
|
</div>
|
||||||
+153
-109
@@ -1,178 +1,222 @@
|
|||||||
.aside.pane
|
.tabsAside.background
|
||||||
{
|
{
|
||||||
font-family: 'Segoe UI', 'Segoe MDL2 Assets';
|
z-index: 9999 !important;
|
||||||
user-select: none;
|
background-color: rgba(255, 255, 255, .5) !important;
|
||||||
position: fixed;
|
position: fixed !important;
|
||||||
z-index: 999;
|
top: 0 !important;
|
||||||
|
bottom: 0 !important;
|
||||||
right: 0px;
|
right: 0 !important;
|
||||||
top: 0px;
|
left: 0 !important;
|
||||||
width: 40%;
|
transition: .2s !important;
|
||||||
min-width: 500px;
|
opacity: 0;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.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
|
|
||||||
{
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > .header > .title > h1
|
/* Pane header*/
|
||||||
|
.tabsAside.pane > header
|
||||||
{
|
{
|
||||||
margin: 10px 0px;
|
margin: 20px 40px !important;
|
||||||
font-weight: normal;
|
}
|
||||||
font-size: 21pt;
|
.tabsAside.pane > header > div
|
||||||
|
{
|
||||||
|
display: grid !important;
|
||||||
|
grid-template-columns: 1fr auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > .header > .title > button
|
.tabsAside.pane > header > div > h1
|
||||||
{
|
{
|
||||||
margin: auto;
|
margin: 10px 0px !important;
|
||||||
|
font-weight: normal !important;
|
||||||
|
font-size: 21pt !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > .header > .title > nav
|
.tabsAside.pane > header > div > button
|
||||||
{
|
{
|
||||||
top: 70px;
|
margin: auto !important;
|
||||||
right: 40px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > .header > .title > nav > div
|
.tabsAside.pane > header > div > nav
|
||||||
{
|
{
|
||||||
box-shadow: 0px 4px 5px -2px rgba(100, 100, 100, .5);
|
top: 70px !important;
|
||||||
|
right: 40px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > .header > .title > nav > p
|
.tabsAside.pane > header > div > nav > div
|
||||||
{
|
{
|
||||||
margin: 10px;
|
box-shadow: 0px 4px 5px -2px rgba(100, 100, 100, .5) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > .header > hr
|
.tabsAside.pane > header > div > nav > p
|
||||||
{
|
{
|
||||||
border: 1px solid #8a8a8a;
|
margin: 10px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > #content > h2
|
.tabsAside.pane > header > hr
|
||||||
{
|
{
|
||||||
margin: 0px 40px;
|
border: 1px solid #8a8a8a !important;
|
||||||
font-weight: normal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > #content > .set > .setHeader
|
.tabsAside.pane > section > h2
|
||||||
{
|
{
|
||||||
margin: 0px 20px;
|
margin: 0px 40px !important;
|
||||||
display: grid;
|
font-weight: normal !important;
|
||||||
grid-template-columns: 1fr auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > #content > .set > .setHeader small
|
/* Collection header */
|
||||||
|
.tabsAside.pane > section > div
|
||||||
{
|
{
|
||||||
color: gray;
|
transition: .2s !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > #content > .set > .setHeader span
|
.tabsAside.pane > section > div > div:first-child
|
||||||
{
|
{
|
||||||
font-weight: 600;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > #content > .set > .setHeader a
|
.tabsAside.pane > section > div > div:first-child > small
|
||||||
{
|
{
|
||||||
font-size: 11pt;
|
color: gray !important;
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.aside.pane > #content > .set > .setHeader nav
|
|
||||||
{
|
|
||||||
width: 200px;
|
|
||||||
margin-top: 10px;
|
|
||||||
right: 50px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > #content > .set > .setHeader > div:first-child
|
.tabsAside.pane > section > div > div:first-child > span
|
||||||
{
|
{
|
||||||
margin: auto 0px;
|
font-weight: 600 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > #content > .set > .collection
|
.tabsAside.pane > section > div > div:first-child > a
|
||||||
{
|
{
|
||||||
padding: 10px 0px;
|
font-size: 11pt !important;
|
||||||
padding-left: 40px;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > #content > .set > .collection > .item
|
.tabsAside.pane > section > div > div:first-child > div
|
||||||
{
|
{
|
||||||
width: 175px;
|
display: none !important; /* TODO: Implement this menu */
|
||||||
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;
|
|
||||||
}
|
|
||||||
.aside.pane > #content > .set > .collection > .item:hover
|
|
||||||
{
|
|
||||||
filter: brightness(120%);
|
|
||||||
box-shadow: 0px 0px 15px rgba(100, 100, 100, .5);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > #content > .set > .collection > .item > .caption
|
.tabsAside.pane > section > div > div:first-child > div > nav
|
||||||
{
|
{
|
||||||
background-color: rgba(233, 233, 233, .75);
|
width: 200px !important;
|
||||||
grid-row: 2;
|
margin-top: 10px !important;
|
||||||
display: grid;
|
right: 50px !important;
|
||||||
grid-template-columns: auto 1fr auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > #content > .set > .collection > .item > .caption > button
|
/* Tabs collection */
|
||||||
|
.tabsAside.pane > section > div > div:last-child
|
||||||
{
|
{
|
||||||
margin: auto;
|
margin: 0px 0px 0px 20px !important;
|
||||||
margin-right: 5px;
|
padding: 10px 40px 10px 20px !important;
|
||||||
visibility: hidden;
|
white-space: nowrap !important;
|
||||||
|
overflow: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > #content > .set > .collection > .item:hover > .caption > button
|
.tabsAside.pane > section > div > div:last-child:hover::-webkit-scrollbar-thumb
|
||||||
{
|
{
|
||||||
visibility: visible;
|
visibility: visible !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > #content > .set > .collection > .item > .caption > div
|
.tabsAside.pane > section > div > div:last-child > div
|
||||||
{
|
{
|
||||||
width: 20px;
|
width: 175px !important;
|
||||||
height: 20px;
|
height: 148px !important;
|
||||||
margin: 10px;
|
margin: 5px !important;
|
||||||
|
|
||||||
background-image: url("../images/tab_icon.png");
|
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%) !important;
|
||||||
|
box-shadow: 0px 0px 15px rgba(100, 100, 100, .5) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > #content > .set > .collection > .item > .caption > span
|
.tabsAside.pane > section > div > div:last-child > div > div
|
||||||
{
|
{
|
||||||
margin: auto 0px;
|
background-color: rgba(233, 233, 233, .75) !important;
|
||||||
|
grid-row: 2 !important;
|
||||||
|
display: grid !important;
|
||||||
|
grid-template-columns: auto 1fr auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabsAside.pane > section > div > div:last-child > div > div > button
|
||||||
|
{
|
||||||
|
margin: auto !important;
|
||||||
|
margin-right: 5px !important;
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabsAside.pane > section > div > div:last-child > div:hover > div > button
|
||||||
|
{
|
||||||
|
display: initial !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabsAside.pane > section > div > div:last-child > div > div > div
|
||||||
|
{
|
||||||
|
width: 20px !important;
|
||||||
|
height: 20px !important;
|
||||||
|
margin: 10px !important;
|
||||||
|
|
||||||
|
background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_icon.png");
|
||||||
|
background-size: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabsAside.pane > section > div > div:last-child > div > div > span
|
||||||
|
{
|
||||||
|
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)
|
@media only screen and (max-width: 500px)
|
||||||
{
|
{
|
||||||
.aside.pane
|
.tabsAside.pane
|
||||||
{
|
{
|
||||||
right: initial;
|
width: initial !important;
|
||||||
width: 100%;
|
left: 0px !important;
|
||||||
left: 0px;
|
min-width: initial !important;
|
||||||
min-width: initial;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+47
-42
@@ -1,54 +1,59 @@
|
|||||||
.aside.pane
|
.tabsAside[darkmode].background
|
||||||
{
|
{
|
||||||
background-color: #333333;
|
background-color: rgba(0, 0, 0, .5) !important;
|
||||||
color: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside button
|
.tabsAside[darkmode] .pane
|
||||||
{
|
{
|
||||||
color: white;
|
background-color: #333333 !important;
|
||||||
}
|
color: white !important;
|
||||||
.aside button:hover
|
|
||||||
{
|
|
||||||
background-color: gray;
|
|
||||||
}
|
|
||||||
.aside button:active
|
|
||||||
{
|
|
||||||
background-color: dimgray;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside.pane > #content > .set > .setHeader small
|
.tabsAside[darkmode] .pane button
|
||||||
{
|
|
||||||
color: lightgray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.aside ::-webkit-scrollbar-thumb
|
|
||||||
{
|
|
||||||
background: gray;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb:hover
|
|
||||||
{
|
{
|
||||||
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
|
.tabsAside[darkmode] .pane > section > div > div:first-child > div:first-child > small
|
||||||
{
|
{
|
||||||
background-color: #0c0c0c;
|
color: lightgray !important;
|
||||||
background-image: url("../images/tab_thumbnail_dark.png");
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.aside.pane > #content > .set > .collection > .item > .caption
|
.tabsAside[darkmode] .pane ::-webkit-scrollbar-thumb
|
||||||
{
|
{
|
||||||
background-color: rgba(50, 50, 50, .75);
|
background: gray !important;
|
||||||
}
|
border-radius: 3px !important;
|
||||||
|
}
|
||||||
|
.tabsAside[darkmode] .pane ::-webkit-scrollbar-thumb:hover
|
||||||
|
{
|
||||||
|
background: dimgray !important;
|
||||||
|
}
|
||||||
|
|
||||||
.aside nav
|
.tabsAside[darkmode] .pane > section > div > div:last-child > div
|
||||||
{
|
{
|
||||||
background-color: #3f3f3f;
|
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
|
.tabsAside[darkmode] .pane > section > div > div:last-child > div > div
|
||||||
{
|
{
|
||||||
background-image: url("../images/tab_icon_dark.png");
|
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;
|
||||||
|
}
|
||||||
+81
-98
@@ -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;
|
visibility: hidden !important;
|
||||||
border-radius: 3px;
|
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';
|
width: 6px !important;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside .slider:before
|
.tabsAside::-webkit-scrollbar-thumb
|
||||||
{
|
|
||||||
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
|
|
||||||
{
|
{
|
||||||
font-family: 'Segoe UI';
|
background: gray !important;
|
||||||
user-select: none;
|
border-radius: 3px !important;
|
||||||
|
}
|
||||||
|
.tabsAside::-webkit-scrollbar-thumb:hover
|
||||||
|
{
|
||||||
|
background: darkgray !important;
|
||||||
|
}
|
||||||
|
|
||||||
position: absolute;
|
/* Links style */
|
||||||
width: 250px;
|
.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;
|
.tabsAside a:visited
|
||||||
background-color: white;
|
{
|
||||||
border-radius: 5px;
|
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';
|
font-family: 'Segoe UI' !important;
|
||||||
cursor: pointer;
|
cursor: pointer !important;
|
||||||
background-color: transparent;
|
background-color: transparent !important;
|
||||||
border: none;
|
border: none !important;
|
||||||
|
|
||||||
font-size: medium;
|
font-size: medium !important;
|
||||||
text-align: start;
|
text-align: start !important;
|
||||||
|
|
||||||
padding: 10px;
|
padding: 10px !important;
|
||||||
width: 100%;
|
width: 100% !important;
|
||||||
height: initial;
|
height: initial !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside button + nav:active,
|
.tabsAside button + nav:active,
|
||||||
.aside button:focus + nav
|
.tabsAside button:focus + nav
|
||||||
{
|
{
|
||||||
visibility: visible;
|
visibility: visible !important;
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
+315
-28
@@ -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");
|
setTimeout(function ()
|
||||||
if (pane.style.transform == "translateX(110%)")
|
|
||||||
{
|
{
|
||||||
pane.style.transform = "translateX(0%)";
|
var pane = document.querySelector(".tabsAside.pane");
|
||||||
}
|
|
||||||
else
|
if (pane == null)
|
||||||
|
{
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('GET', chrome.extension.getURL("collections.html"), true);
|
||||||
|
xhr.onreadystatechange = function ()
|
||||||
{
|
{
|
||||||
pane.style.transform = "translateX(110%)";
|
|
||||||
}
|
|
||||||
|
|
||||||
UpdateTheme();
|
|
||||||
|
|
||||||
sendResponse();
|
|
||||||
});
|
|
||||||
|
|
||||||
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)
|
if (this.status !== 200 || document.querySelector("#aside-pane") != null)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
document.body.innerHTML += this.responseText.split("%EXTENSION_PATH%").join(chrome.extension.getURL(""));
|
if (document.querySelector(".tabsAside.pane") == null)
|
||||||
};
|
|
||||||
xhr.send();
|
|
||||||
|
|
||||||
function UpdateTheme()
|
|
||||||
{
|
|
||||||
var css = document.querySelector("#aside-pane #darkCSS")
|
|
||||||
if (window.matchMedia("(prefers-color-scheme: dark)").matches)
|
|
||||||
{
|
{
|
||||||
css.removeAttribute("disabled");
|
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
|
else
|
||||||
{
|
{
|
||||||
css.setAttribute("disabled", true);
|
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()
|
||||||
|
{
|
||||||
|
pane = document.querySelector(".tabsAside.pane");
|
||||||
|
|
||||||
|
if (window.matchMedia("(prefers-color-scheme: dark)").matches)
|
||||||
|
{
|
||||||
|
pane.parentElement.setAttribute("darkmode", "");
|
||||||
|
document.querySelector("#icon").href = "icons/dark/empty/16.png";
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelector(".tabsAside .saveTabs").onclick = SetTabsAside;
|
||||||
|
|
||||||
|
document.querySelectorAll(".tabsAside.pane > header nav button").forEach(i =>
|
||||||
|
{
|
||||||
|
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'></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...'></button>" +
|
||||||
|
"<nav>" +
|
||||||
|
"<button>Add tabs to favorites</button>" +
|
||||||
|
"<button>Share tabs</button>" +
|
||||||
|
"</nav>" +
|
||||||
|
"</div>" +
|
||||||
|
"<button title='Remove collection'></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
|
||||||
+210
-2
@@ -1,7 +1,57 @@
|
|||||||
|
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()
|
function UpdateTheme()
|
||||||
{
|
{
|
||||||
if (window.matchMedia("(prefers-color-scheme: dark)").matches)
|
if (window.matchMedia("(prefers-color-scheme: dark)").matches)
|
||||||
{
|
{
|
||||||
|
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(
|
chrome.browserAction.setIcon(
|
||||||
{
|
{
|
||||||
path:
|
path:
|
||||||
@@ -15,6 +65,18 @@ function UpdateTheme()
|
|||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
|
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(
|
chrome.browserAction.setIcon(
|
||||||
{
|
{
|
||||||
path:
|
path:
|
||||||
@@ -28,6 +90,41 @@ function UpdateTheme()
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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();
|
UpdateTheme();
|
||||||
chrome.windows.onCreated.addListener(UpdateTheme);
|
chrome.windows.onCreated.addListener(UpdateTheme);
|
||||||
chrome.windows.onRemoved.addListener(UpdateTheme);
|
chrome.windows.onRemoved.addListener(UpdateTheme);
|
||||||
@@ -45,6 +142,117 @@ chrome.tabs.onDetached.addListener(UpdateTheme);
|
|||||||
chrome.tabs.onAttached.addListener(UpdateTheme);
|
chrome.tabs.onAttached.addListener(UpdateTheme);
|
||||||
chrome.tabs.onRemoved.addListener(UpdateTheme);
|
chrome.tabs.onRemoved.addListener(UpdateTheme);
|
||||||
chrome.tabs.onReplaced.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();
|
||||||
|
}
|
||||||
+14
-10
@@ -2,9 +2,15 @@
|
|||||||
"name": "Tabs Aside",
|
"name": "Tabs Aside",
|
||||||
"version": "0.1",
|
"version": "0.1",
|
||||||
"manifest_version": 2,
|
"manifest_version": 2,
|
||||||
"description": "Classic Microsoft Edge \"Tabs Aside\" feature",
|
"description": "Classic Microsoft Edge \"Tabs Aside\" feature for Chromium browers",
|
||||||
"author": "Michael \"XFox\" Gordeev",
|
"author": "Michael \"XFox\" Gordeev",
|
||||||
"permissions": [ "tabs" ],
|
"permissions":
|
||||||
|
[
|
||||||
|
"tabs",
|
||||||
|
"unlimitedStorage",
|
||||||
|
"<all_urls>",
|
||||||
|
"bookmarks"
|
||||||
|
],
|
||||||
|
|
||||||
"icons":
|
"icons":
|
||||||
{
|
{
|
||||||
@@ -13,27 +19,25 @@
|
|||||||
"32": "icons/light/empty/32.png",
|
"32": "icons/light/empty/32.png",
|
||||||
"16": "icons/light/empty/16.png"
|
"16": "icons/light/empty/16.png"
|
||||||
},
|
},
|
||||||
|
"browser_action": { "default_icon": "icons/light/empty/32.png" },
|
||||||
"web_accessible_resources": [ "*" ],
|
"web_accessible_resources": [ "*" ],
|
||||||
|
|
||||||
"browser_action":
|
|
||||||
{
|
|
||||||
"default_popup": "popup/popup.html"
|
|
||||||
},
|
|
||||||
"content_scripts":
|
"content_scripts":
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
"matches": [ "<all_urls>" ],
|
"matches": [ "<all_urls>" ],
|
||||||
"js": [ "js/aside-script.js" ],
|
|
||||||
"css":
|
"css":
|
||||||
[
|
[
|
||||||
"css/style.css",
|
"css/style.css",
|
||||||
"css/style.generic.css"
|
"css/style.generic.css",
|
||||||
]
|
"css/style.dark.css"
|
||||||
|
],
|
||||||
|
"run_at": "document_start"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"background":
|
"background":
|
||||||
{
|
{
|
||||||
"scripts": ["js/background.js"],
|
"scripts": [ "js/background.js" ],
|
||||||
"persistent": true
|
"persistent": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script type="text/javascript" src="trigger.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs)
|
|
||||||
{
|
|
||||||
chrome.tabs.sendMessage(
|
|
||||||
tabs[0].id,
|
|
||||||
{ },
|
|
||||||
function()
|
|
||||||
{
|
|
||||||
window.close();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
Reference in New Issue
Block a user