mirror of
https://github.com/XFox111/TabsAsideExtension.git
synced 2026-04-22 07:58:01 +03:00
Minor 1.5 (#18)
- Updated repository documentation: added contribution guidelines, Code of Conduct, GitHub templates - Updated README - Added confirmation dialog for tabs and collections deletion (#17) - Complete code refactoring (HTML/JS/CSS) - Implemented <iframe> base for embedded pane (#13) (Fixed CSS instability on some websites) - Improved dark theme - Added opensource fonts to replace Segoe UI on Unix systems (#11, #17) - Fixed invisible vertical scrollbar - Code polish and improvement Co-authored-by: Amine A. <15179425+AmineI@users.noreply.github.com> Co-Authored-By: Michael Gordeev <michael@xfox111.net>
This commit is contained in:
Michael Gordeev
GitHub
@@ -0,0 +1,33 @@
|
|||||||
|
---
|
||||||
|
name: Bug report
|
||||||
|
about: Create a report to help us improve the extension
|
||||||
|
title: ''
|
||||||
|
labels: bug
|
||||||
|
assignees: ''
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Description
|
||||||
|
A clear and concise description of what the bug is.
|
||||||
|
|
||||||
|
### Reproduction steps
|
||||||
|
Steps to reproduce the behavior:
|
||||||
|
1. Go to '...'
|
||||||
|
2. Click on '...'
|
||||||
|
3. Scroll down to '...'
|
||||||
|
4. See error
|
||||||
|
|
||||||
|
### Expected behavior
|
||||||
|
A clear and concise description of what you expected to happen.
|
||||||
|
|
||||||
|
### Screenshots
|
||||||
|
If applicable, add screenshots to help explain your problem.
|
||||||
|
|
||||||
|
### Environment
|
||||||
|
Please provide the following information:
|
||||||
|
- Operating System: [e.g. Windows 10 Pro 1909 (10.0.18363)]
|
||||||
|
- Browser: [e.g. Microsoft Edge 83.0.478.56]
|
||||||
|
- Extension version: [e.g. 1.5]
|
||||||
|
|
||||||
|
### Additional context
|
||||||
|
Add any other context about the problem here.
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
---
|
||||||
|
name: Feature request
|
||||||
|
about: Suggest an idea for this project
|
||||||
|
title: ''
|
||||||
|
labels: enhancement
|
||||||
|
assignees: ''
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Is your feature request related to a problem? Please describe.**
|
||||||
|
A clear and concise description of what the problem is. Ex. I'm always frustrated when '...'
|
||||||
|
|
||||||
|
**Describe the solution you'd like**
|
||||||
|
A clear and concise description of what you want to happen.
|
||||||
|
|
||||||
|
**Describe alternatives you've considered**
|
||||||
|
A clear and concise description of any alternative solutions or features you've considered.
|
||||||
|
|
||||||
|
**Additional context**
|
||||||
|
Add any other context or screenshots about the feature request here.
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
Implements following issues:
|
||||||
|
|
||||||
|
## Changelog
|
||||||
|
- Item 1
|
||||||
|
- Item 2
|
||||||
|
- Item 3
|
||||||
|
|
||||||
|
## PR Checklist
|
||||||
|
- [ ] Change extension version in the manifest
|
||||||
@@ -0,0 +1,76 @@
|
|||||||
|
# Contributor Covenant Code of Conduct
|
||||||
|
|
||||||
|
## Our Pledge
|
||||||
|
|
||||||
|
In the interest of fostering an open and welcoming environment, we as
|
||||||
|
contributors and maintainers pledge to making participation in our project and
|
||||||
|
our community a harassment-free experience for everyone, regardless of age, body
|
||||||
|
size, disability, ethnicity, sex characteristics, gender identity and expression,
|
||||||
|
level of experience, education, socio-economic status, nationality, personal
|
||||||
|
appearance, race, religion, or sexual identity and orientation.
|
||||||
|
|
||||||
|
## Our Standards
|
||||||
|
|
||||||
|
Examples of behavior that contributes to creating a positive environment
|
||||||
|
include:
|
||||||
|
|
||||||
|
* Using welcoming and inclusive language
|
||||||
|
* Being respectful of differing viewpoints and experiences
|
||||||
|
* Gracefully accepting constructive criticism
|
||||||
|
* Focusing on what is best for the community
|
||||||
|
* Showing empathy towards other community members
|
||||||
|
|
||||||
|
Examples of unacceptable behavior by participants include:
|
||||||
|
|
||||||
|
* The use of sexualized language or imagery and unwelcome sexual attention or
|
||||||
|
advances
|
||||||
|
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||||
|
* Public or private harassment
|
||||||
|
* Publishing others' private information, such as a physical or electronic
|
||||||
|
address, without explicit permission
|
||||||
|
* Other conduct which could reasonably be considered inappropriate in a
|
||||||
|
professional setting
|
||||||
|
|
||||||
|
## Our Responsibilities
|
||||||
|
|
||||||
|
Project maintainers are responsible for clarifying the standards of acceptable
|
||||||
|
behavior and are expected to take appropriate and fair corrective action in
|
||||||
|
response to any instances of unacceptable behavior.
|
||||||
|
|
||||||
|
Project maintainers have the right and responsibility to remove, edit, or
|
||||||
|
reject comments, commits, code, wiki edits, issues, and other contributions
|
||||||
|
that are not aligned to this Code of Conduct, or to ban temporarily or
|
||||||
|
permanently any contributor for other behaviors that they deem inappropriate,
|
||||||
|
threatening, offensive, or harmful.
|
||||||
|
|
||||||
|
## Scope
|
||||||
|
|
||||||
|
This Code of Conduct applies both within project spaces and in public spaces
|
||||||
|
when an individual is representing the project or its community. Examples of
|
||||||
|
representing a project or community include using an official project e-mail
|
||||||
|
address, posting via an official social media account, or acting as an appointed
|
||||||
|
representative at an online or offline event. Representation of a project may be
|
||||||
|
further defined and clarified by project maintainers.
|
||||||
|
|
||||||
|
## Enforcement
|
||||||
|
|
||||||
|
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||||
|
reported by contacting the project team at opensource@xfox111.net. All
|
||||||
|
complaints will be reviewed and investigated and will result in a response that
|
||||||
|
is deemed necessary and appropriate to the circumstances. The project team is
|
||||||
|
obligated to maintain confidentiality with regard to the reporter of an incident.
|
||||||
|
Further details of specific enforcement policies may be posted separately.
|
||||||
|
|
||||||
|
Project maintainers who do not follow or enforce the Code of Conduct in good
|
||||||
|
faith may face temporary or permanent repercussions as determined by other
|
||||||
|
members of the project's leadership.
|
||||||
|
|
||||||
|
## Attribution
|
||||||
|
|
||||||
|
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
|
||||||
|
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
|
||||||
|
|
||||||
|
[homepage]: https://www.contributor-covenant.org
|
||||||
|
|
||||||
|
For answers to common questions about this code of conduct, see
|
||||||
|
https://www.contributor-covenant.org/faq
|
||||||
+204
@@ -0,0 +1,204 @@
|
|||||||
|
# Contribution Guidelines
|
||||||
|
Welcome, and thank you for your interest in contributing to my project!
|
||||||
|
|
||||||
|
There are many ways in which you can contribute, beyond writing code. The goal of this document is to provide a high-level overview of how you can get involved.
|
||||||
|
|
||||||
|
## Table of Contents
|
||||||
|
- [Contribution Guidelines](#gutschedule-contribution-guidelines)
|
||||||
|
- [Table of Contents](#table-of-contents)
|
||||||
|
- [Asking Questions](#asking-questions)
|
||||||
|
- [Providing Feedback](#providing-feedback)
|
||||||
|
- [Reporting Issues](#reporting-issues)
|
||||||
|
- [Look For an Existing Issue](#look-for-an-existing-issue)
|
||||||
|
- [Writing Good Bug Reports and Feature Requests](#writing-good-bug-reports-and-feature-requests)
|
||||||
|
- [Final Checklist](#final-checklist)
|
||||||
|
- [Follow Your Issue](#follow-your-issue)
|
||||||
|
- [Contributing to codebase](#contributing-to-codebase)
|
||||||
|
- [Deploy test version on your browser](#deploy-test-version-on-your-browser)
|
||||||
|
- [Development workflow](#development-workflow)
|
||||||
|
- [Release](#release)
|
||||||
|
- [Coding guidelines](#coding-guidelines)
|
||||||
|
- [Indentation](#indentation)
|
||||||
|
- [Names](#names)
|
||||||
|
- [Comments](#comments)
|
||||||
|
- [Strings](#strings)
|
||||||
|
- [Style](#style)
|
||||||
|
- [Finding an issue to work on](#finding-an-issue-to-work-on)
|
||||||
|
- [Contributing to translations](#contributing-to-translations)
|
||||||
|
- [Submitting pull requests](#submitting-pull-requests)
|
||||||
|
- [Spell check errors](#spell-check-errors)
|
||||||
|
- [Thank You!](#thank-you)
|
||||||
|
- [Attribution](#attribution)
|
||||||
|
|
||||||
|
## Asking Questions
|
||||||
|
Have a question? Rather than opening an issue, please ask me directly on opensource@xfox111.net.
|
||||||
|
|
||||||
|
## Providing Feedback
|
||||||
|
Your comments and feedback are welcome.
|
||||||
|
You can leave your feedbak on feedback@xfox111.net or do it on [Microsoft Edge Add-ons Webstore](https://microsoftedge.microsoft.com/addons/detail/tabs-aside/kmnblllmalkiapkfknnlpobmjjdnlhnd) or [Chrome Webstore](https://chrome.google.com/webstore/detail/tabs-aside/mgmjbodjgijnebfgohlnjkegdpbdjgin)
|
||||||
|
|
||||||
|
## Reporting Issues
|
||||||
|
Have you identified a reproducible problem in the extension? Have a feature request? I'd like to hear it! Here's how you can make reporting your issue as effective as possible.
|
||||||
|
|
||||||
|
### Look For an Existing Issue
|
||||||
|
Before you create a new issue, please do a search in [open issues](https://github.com/xfox111/ChromiumTabsAside/issues) to see if the issue or feature request has already been filed.
|
||||||
|
|
||||||
|
Be sure to scan through the [feature requests](https://github.com/XFox111/ChromiumTabsAside/issues?q=is%3Aissue+is%3Aopen+label%3Aenhancement).
|
||||||
|
|
||||||
|
If you find your issue already exists, make relevant comments and add your [reaction](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments). Use a reaction in place of a "+1" comment:
|
||||||
|
|
||||||
|
* 👍 - upvote
|
||||||
|
* 👎 - downvote
|
||||||
|
|
||||||
|
If you cannot find an existing issue that describes your bug or feature, create a new issue using the guidelines below.
|
||||||
|
|
||||||
|
### Writing Good Bug Reports and Feature Requests
|
||||||
|
File a single issue per problem and feature request. Do not enumerate multiple bugs or feature requests in the same issue.
|
||||||
|
|
||||||
|
Do not add your issue as a comment to an existing issue unless they are the same ones. Many issues look similar, but have different causes.
|
||||||
|
|
||||||
|
The more information you can provide, the more likely someone will be successful at reproducing the issue and finding a solution.
|
||||||
|
|
||||||
|
Please include the following with each issue:
|
||||||
|
- Current version of the extension
|
||||||
|
- Your current browser and OS name
|
||||||
|
- Reproducible steps (1... 2... 3...) that cause the issue
|
||||||
|
- What you expected to see, versus what you actually saw
|
||||||
|
- Images, animations, or a link to a video showing the issue occurring
|
||||||
|
|
||||||
|
### Final Checklist
|
||||||
|
Please remember to do the following:
|
||||||
|
- [ ] Search the issue repository to ensure your report is a new issue
|
||||||
|
- [ ] Separate issues reports
|
||||||
|
- [ ] Include as much information as you can to your report
|
||||||
|
|
||||||
|
Don't feel bad if the developers can't reproduce the issue right away. They will simply ask for more information!
|
||||||
|
|
||||||
|
### Follow Your Issue
|
||||||
|
Once your report is submitted, be sure to stay in touch with the devs in case they need more help from you.
|
||||||
|
|
||||||
|
## Contributing to codebase
|
||||||
|
If you are interested in writing code to fix issues or implement new awesome features you can follow this guidelines to get a better result
|
||||||
|
|
||||||
|
### Deploy test version on your browser
|
||||||
|
1. Clone repository to local storage using [Git](https://guides.github.com/introduction/git-handbook/)
|
||||||
|
```
|
||||||
|
git clone https://github.com/xfox111/ChromiumTabsAside.git
|
||||||
|
```
|
||||||
|
2. Enable Developers mode on your browser extensions page
|
||||||
|
3. Click "Load unpacked" button and navigate to the extension root folder (contains `manifest.json`)
|
||||||
|
4. Done!
|
||||||
|
|
||||||
|
Next time you make any changes to the codebase, reload extension by toggling it off and on or by pressing "Reload" button on extensions list page
|
||||||
|
|
||||||
|
### Development workflow
|
||||||
|
This section represents how contributors should interact with codebase implementing features and fixing bugs
|
||||||
|
1. Getting assigned to the issue
|
||||||
|
2. Creating a repository fork
|
||||||
|
3. Making changes to codebase
|
||||||
|
5. Creating a pull request to `master`
|
||||||
|
6. Reviewing & completing PR
|
||||||
|
7. Done
|
||||||
|
|
||||||
|
#### Release
|
||||||
|
Next stage is release. Release performs on every push to master (which makes functional changes to the source code). Release performs manually by @XFox111 into: Chrome webstore, Edge webstore and GitHub releases
|
||||||
|
|
||||||
|
### Coding guidelines
|
||||||
|
#### Indentation
|
||||||
|
We use tabs, not spaces.
|
||||||
|
|
||||||
|
#### Names
|
||||||
|
The project naming rules inherit [.NET Naming Guidelines](https://docs.microsoft.com/en-us/dotnet/standard/design-guidelines/naming-guidelines). Nevertheless there'is some distinction with the guidelines as well as additions to the one:
|
||||||
|
- Use `camelCase` for variables instead of `CamelCase` stated in [Capitalization Conventions](https://docs.microsoft.com/en-us/dotnet/standard/design-guidelines/capitalization-conventions#capitalization-rules-for-identifiers)
|
||||||
|
- Use `snake_case` for file names
|
||||||
|
|
||||||
|
#### Comments
|
||||||
|
Leave as more comments as you can. Remember: the more detailed documentation your code has the less programmers will curse you in the future
|
||||||
|
|
||||||
|
#### Strings
|
||||||
|
Use "double quotes" wherever it's possible
|
||||||
|
|
||||||
|
#### Style
|
||||||
|
- Prefer to use lambda functions
|
||||||
|
- Put curly braces on new lines
|
||||||
|
- Wrong:
|
||||||
|
```
|
||||||
|
if (condition) {
|
||||||
|
...
|
||||||
|
}
|
||||||
|
```
|
||||||
|
- Correct:
|
||||||
|
```
|
||||||
|
if (condition)
|
||||||
|
{
|
||||||
|
...
|
||||||
|
}
|
||||||
|
```
|
||||||
|
- Put spaces between operators and before braces in methods declarations, conditionals and loops
|
||||||
|
- Wrong:
|
||||||
|
- `y=k*x+b`
|
||||||
|
- `function FunctionName()`
|
||||||
|
- Correct:
|
||||||
|
- `y = k * x + b`
|
||||||
|
- `function FunctionName ()`
|
||||||
|
- Use ternary conditionals wherever it's possible
|
||||||
|
- Wrong:
|
||||||
|
```
|
||||||
|
var s;
|
||||||
|
if (condition)
|
||||||
|
s = "Life";
|
||||||
|
else
|
||||||
|
s = "Death"
|
||||||
|
```
|
||||||
|
- Correct:
|
||||||
|
```
|
||||||
|
var s = condition ? "Life" : "Death";
|
||||||
|
```
|
||||||
|
- Do not surround loop and conditional bodies with curly braces if they can be avoided
|
||||||
|
- Wrong:
|
||||||
|
```
|
||||||
|
if (condition)
|
||||||
|
{
|
||||||
|
console.log("Hello, World!");
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
- Correct
|
||||||
|
```
|
||||||
|
if (condition)
|
||||||
|
console.log("Hello, World!");
|
||||||
|
else
|
||||||
|
return;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Finding an issue to work on
|
||||||
|
Check out the [full issues list](https://github.com/XFox111/ChromiumTabsAside/issues?utf8=%E2%9C%93&q=is%3Aopen+is%3Aissue) for a list of all potential areas for contributions. **Note** that just because an issue exists in the repository does not mean we will accept a contribution. There are several reasons we may not accept a pull request like:
|
||||||
|
|
||||||
|
- Performance - One of Tabs Aside core values is to deliver a lightweight extension, that means it should perform well in both real and test environments.
|
||||||
|
- User experience - Since we want to deliver a lightweight extension, the UX should feel lightweight as well and not be cluttered. Most changes to the UI should go through the issue owner and project owner (@XFox111).
|
||||||
|
- Architectural - Project owner needs to agree with any architectural impact a change may make. Such things must be discussed with and agreed upon by the project owner.
|
||||||
|
|
||||||
|
To improve the chances to get a pull request merged you should select an issue that is labelled with the `help-wanted` or `bug` labels. If the issue you want to work on is not labelled with `help-wanted` or `bug`, you can start a conversation with the project owner asking whether an external contribution will be considered.
|
||||||
|
|
||||||
|
To avoid multiple pull requests resolving the same issue, let others know you are working on it by saying so in a comment.
|
||||||
|
|
||||||
|
### Contributing to translations
|
||||||
|
If you want to help us to translate this extension into other languages, please read [this article](https://developer.chrome.com/extensions/i18n)
|
||||||
|
|
||||||
|
**Note** that whatever you want to contribute to the codebase, you should do it only after you got assigned on an issue
|
||||||
|
|
||||||
|
### Submitting pull requests
|
||||||
|
To enable us to quickly review and accept your pull requests, always create one pull request per issue and [link the issue in the pull request](https://github.com/blog/957-introducing-issue-mentions). Never merge multiple requests in one unless they have the same root cause. Be sure to follow our [Coding Guidelines](#coding-guidelines) and keep code changes as small as possible. Avoid pure formatting changes to code that has not been modified otherwise. Pull requests should contain tests whenever possible. Fill pull request content according to its template. Deviations from template are not recommended
|
||||||
|
|
||||||
|
#### Spell check errors
|
||||||
|
Pull requests that fix typos are welcomed but please make sure it doesn't touch multiple feature areas, otherwise it will be difficult to review. Pull requests only fixing spell check errors in source code are not recommended.
|
||||||
|
|
||||||
|
## Thank You!
|
||||||
|
|
||||||
|
Your contributions to open source, large or small, make great projects like this possible. Thank you for taking the time to contribute.
|
||||||
|
|
||||||
|
## Attribution
|
||||||
|
This Contribution Guidelines are adapted from the [Contributing to VS Code](https://github.com/microsoft/vscode/blob/master/CONTRIBUTING.md)
|
||||||
@@ -25,6 +25,7 @@ Unfortunately, in new Chromium-based Microsoft Edge, the devs decided not to imp
|
|||||||
- Familiar UI inherited from legacy Microsoft Edge with some improvements
|
- Familiar UI inherited from legacy Microsoft Edge with some improvements
|
||||||
- Auto Dark mode
|
- Auto Dark mode
|
||||||
- Now you can restore one tab from collection without removing
|
- Now you can restore one tab from collection without removing
|
||||||
|
- Now you can choose if you want to load restored tabs only when you're navigating onto them
|
||||||
|
|
||||||
## Download
|
## Download
|
||||||
- [Google Chrome Webstore](https://chrome.google.com/webstore/detail/tabs-aside/mgmjbodjgijnebfgohlnjkegdpbdjgin)
|
- [Google Chrome Webstore](https://chrome.google.com/webstore/detail/tabs-aside/mgmjbodjgijnebfgohlnjkegdpbdjgin)
|
||||||
@@ -34,7 +35,24 @@ Unfortunately, in new Chromium-based Microsoft Edge, the devs decided not to imp
|
|||||||
## Project roadmap
|
## Project roadmap
|
||||||
You can go to the project's [roadmap kanban board](https://github.com/XFox111/ChromiumTabsAside/projects/1) and see what have we planned and watch our progress in realtime
|
You can go to the project's [roadmap kanban board](https://github.com/XFox111/ChromiumTabsAside/projects/1) and see what have we planned and watch our progress in realtime
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
There are many ways in which you can participate in the project, for example:
|
||||||
|
- [Submit bugs and feature requests](https://github.com/xfox111/gutschedule/issues), and help us verify as they are checked in
|
||||||
|
- Review [source code changes](https://github.com/xfox111/gutschedule/pulls)
|
||||||
|
- Review documentation and make pull requests for anything from typos to new content
|
||||||
|
|
||||||
|
If you are interested in fixing issues and contributing directly to the code base, please see the [Contribution Guidelines](https://github.com/XFox111/ChromiumTabsAside/blob/master/CONTRIBUTING.md), which covers the following:
|
||||||
|
- [How to deploy the extension on your browser](https://github.com/XFox111/ChromiumTabsAside/blob/master/CONTRIBUTING.md#deploy-test-version-on-your-browser)
|
||||||
|
- [The development workflow](https://github.com/XFox111/ChromiumTabsAside/blob/master/CONTRIBUTING.md#development-workflow), including debugging and running tests
|
||||||
|
- [Coding guidelines](https://github.com/XFox111/ChromiumTabsAside/blob/master/CONTRIBUTING.md#coding-guidelines)
|
||||||
|
- [Submitting pull requests](https://github.com/XFox111/ChromiumTabsAside/blob/master/CONTRIBUTING.md#submitting-pull-requests)
|
||||||
|
- [Finding an issue to work on](https://github.com/XFox111/ChromiumTabsAside/blob/master/CONTRIBUTING.md#finding-an-issue-to-work-on)
|
||||||
|
- [Contributing to translations](https://github.com/XFox111/ChromiumTabsAside/blob/master/CONTRIBUTING.md#contributing-to-translations)
|
||||||
|
|
||||||
|
## Code of Conduct
|
||||||
|
This project has adopted the Contributor Covenant. For more information see the [Code of Conduct](https://github.com/XFox111/ChromiumTabsAside/blob/master/CODE_OF_CONDUCT.md)
|
||||||
|
|
||||||
## Copyrights
|
## Copyrights
|
||||||
> ©2020 Michael "XFox" Gordeev
|
> ©2020 Michael "XFox" Gordeev
|
||||||
|
|
||||||
Licensed under [MIT License](https://opensource.org/licenses/MIT)
|
Licensed under [MIT License](https://opensource.org/licenses/MIT)
|
||||||
+33
-45
@@ -8,55 +8,43 @@
|
|||||||
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
<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.generic.css" />
|
||||||
<link rel="stylesheet" type="text/css" href="css/style.dark.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>
|
</head>
|
||||||
|
|
||||||
<body class="tabsAside">
|
<body>
|
||||||
<aside class="tabsAside pane">
|
<div class="tabsAside background">
|
||||||
<header>
|
<aside class="tabsAside pane">
|
||||||
<div>
|
<header>
|
||||||
<h1>Tabs aside</h1>
|
<div>
|
||||||
<button title="Options"></button>
|
<h1>Tabs aside</h1>
|
||||||
|
<button class="btn more" title="Options"></button>
|
||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
<p>
|
<p>
|
||||||
<input type="checkbox" id="loadOnRestore"/>
|
<input type="checkbox" id="loadOnRestore"/>
|
||||||
<label for="loadOnRestore">Load tabs on restore</label>
|
<label for="loadOnRestore">Load tabs on restore</label>
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<button value="https://github.com/xfox111/ChromiumTabsAside">Visit GitHub page</button>
|
<button value="https://github.com/xfox111/ChromiumTabsAside">Visit GitHub page</button>
|
||||||
<button value="https://github.com/XFox111/ChromiumTabsAside/graphs/contributors">Project contributors</button>
|
<button value="https://github.com/XFox111/ChromiumTabsAside/graphs/contributors">Project contributors</button>
|
||||||
<button value="https://chrome.google.com/webstore/detail/tabs-aside/mgmjbodjgijnebfgohlnjkegdpbdjgin">Leave feedback</button>
|
<button value="https://chrome.google.com/webstore/detail/tabs-aside/mgmjbodjgijnebfgohlnjkegdpbdjgin">Leave feedback</button>
|
||||||
<button value="https://buymeacoffee.com/xfox111">Buy me a coffee!</button>
|
<button value="https://buymeacoffee.com/xfox111">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 />
|
Developed by Michael Gordeev (<a href="https://twitter.com/xfox111"
|
||||||
Developed by Michael Gordeev (<a href="https://twitter.com/xfox111"
|
target="_blank">@xfox111</a>)
|
||||||
target="_blank">@xfox111</a>)
|
</p>
|
||||||
</p>
|
</nav>
|
||||||
</nav>
|
</div>
|
||||||
</div>
|
<a class="saveTabs"><span class="iconArrowRight"></span> Set current tabs aside</a>
|
||||||
<a class="saveTabs"> Set current tabs aside</a>
|
<hr />
|
||||||
<hr />
|
</header>
|
||||||
</header>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>You have no aside tabs</h1>
|
<h2>You have no aside tabs</h2>
|
||||||
</section>
|
</section>
|
||||||
</aside>
|
</aside>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript" src="js/aside-script.js"></script>
|
<script type="text/javascript" src="js/aside-script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -1,62 +0,0 @@
|
|||||||
<div class="tabsAside background">
|
|
||||||
<aside class="tabsAside pane">
|
|
||||||
<header>
|
|
||||||
<div>
|
|
||||||
<h1>Tabs aside</h1>
|
|
||||||
<button title="Options"></button>
|
|
||||||
|
|
||||||
<nav>
|
|
||||||
<p>
|
|
||||||
<input type="checkbox" id="loadOnRestore"/>
|
|
||||||
<label for="loadOnRestore">Load tabs on restore</label>
|
|
||||||
</p>
|
|
||||||
<div>
|
|
||||||
<button value="https://github.com/xfox111/ChromiumTabsAside">Visit GitHub page</button>
|
|
||||||
<button value="https://github.com/XFox111/ChromiumTabsAside/graphs/contributors">Project contributors</button>
|
|
||||||
<button value="https://chrome.google.com/webstore/detail/tabs-aside/mgmjbodjgijnebfgohlnjkegdpbdjgin">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>
|
|
||||||
</div>
|
|
||||||
+123
-143
@@ -1,260 +1,240 @@
|
|||||||
.tabsAside.background
|
.tabsAside.background
|
||||||
{
|
{
|
||||||
z-index: 9999 !important;
|
background-color: rgba(255, 255, 255, .5);
|
||||||
background-color: rgba(255, 255, 255, .5) !important;
|
position: fixed;
|
||||||
position: fixed !important;
|
top: 0;
|
||||||
top: 0 !important;
|
bottom: 0;
|
||||||
bottom: 0 !important;
|
right: 0;
|
||||||
right: 0 !important;
|
left: 0;
|
||||||
left: 0 !important;
|
transition: .2s;
|
||||||
transition: .2s !important;
|
color: black;
|
||||||
opacity: 0;
|
|
||||||
color: black !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane
|
.tabsAside.pane
|
||||||
{
|
{
|
||||||
font-family: 'Segoe UI', 'Segoe MDL2 Assets' !important;
|
user-select: none;
|
||||||
user-select: none !important;
|
position: fixed;
|
||||||
position: fixed !important;
|
|
||||||
|
|
||||||
right: 0px !important;
|
right: 0px;
|
||||||
top: 0px !important;
|
top: 0px;
|
||||||
bottom: 0px !important;
|
bottom: 0px;
|
||||||
overflow: auto !important;
|
overflow: auto;
|
||||||
|
|
||||||
width: 40%;
|
width: 100%;
|
||||||
min-width: 500px !important;
|
min-width: 500px;
|
||||||
|
|
||||||
background-color: #f7f7f7 !important;
|
background-color: #f7f7f7;
|
||||||
border: 1px solid rgba(100, 100, 100, .5) !important;
|
border: 1px solid rgba(100, 100, 100, .5);
|
||||||
border-width: 0px 0px 0px 1px !important;
|
border-width: 0px 0px 0px 1px;
|
||||||
box-sizing: border-box !important;
|
box-shadow: 6px 0px 12px black;
|
||||||
box-shadow: 6px 0px 12px black !important;
|
|
||||||
|
|
||||||
font-size: small !important;
|
font-size: 13px;
|
||||||
|
|
||||||
transform: translateX(110%); /* Pane is hidden */
|
transform: translateX(110%); /* pane is hidded */
|
||||||
transition: .2s !important;
|
transition: .2s;
|
||||||
text-align: initial !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
aside[embedded]
|
||||||
|
{
|
||||||
|
width: 40% !important;
|
||||||
|
}
|
||||||
|
|
||||||
.tabsAside.pane[opened]
|
.tabsAside.pane[opened]
|
||||||
{
|
{
|
||||||
transform: translateX(0px) !important;
|
transform: translateX(0px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Pane header*/
|
/* Pane header*/
|
||||||
.tabsAside.pane > header
|
.tabsAside.pane > header
|
||||||
{
|
{
|
||||||
margin: 20px 40px !important;
|
margin: 20px 40px;
|
||||||
line-height: initial !important;
|
|
||||||
height: initial !important;
|
|
||||||
}
|
}
|
||||||
.tabsAside.pane > header > div
|
.tabsAside.pane > header > div
|
||||||
{
|
{
|
||||||
display: grid !important;
|
display: grid;
|
||||||
grid-template-columns: 1fr auto !important;
|
grid-template-columns: 1fr auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > header > div > h1
|
.tabsAside.pane > header > div > h1
|
||||||
{
|
{
|
||||||
margin: 10px 0px !important;
|
margin: 10px 0px;
|
||||||
font-weight: normal !important;
|
font-weight: normal;
|
||||||
font-size: 21pt !important;
|
font-size: 21pt;
|
||||||
direction: initial !important;
|
|
||||||
color: inherit !important;
|
|
||||||
line-height: initial !important;
|
|
||||||
font-family: inherit !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > header > div > button
|
.tabsAside.pane > header > div > button
|
||||||
{
|
{
|
||||||
margin: auto !important;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > header > div > nav
|
.tabsAside.pane > header > div > nav
|
||||||
{
|
{
|
||||||
top: 70px !important;
|
top: 70px;
|
||||||
right: 40px !important;
|
right: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > header > div > nav > div
|
.tabsAside.pane > header nav > div
|
||||||
{
|
{
|
||||||
box-shadow: 0px 4px 5px -2px rgba(100, 100, 100, .5) !important;
|
box-shadow: 0px 4px 5px -2px rgba(100, 100, 100, .5);
|
||||||
cursor: initial !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > header > div > nav > p
|
.tabsAside.pane > header nav > p
|
||||||
{
|
{
|
||||||
margin: 10px !important;
|
margin: 10px;
|
||||||
font-family: inherit !important;
|
|
||||||
font-size: inherit !important;
|
|
||||||
line-height: initial !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > header > div > nav > p > small
|
.tabsAside.pane > header nav > p > a
|
||||||
{
|
|
||||||
font-size: inherit !important;
|
|
||||||
font-family: inherit !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabsAside.pane > header > div > nav > p > a
|
|
||||||
{
|
{
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: inherit !important;
|
|
||||||
border: none !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > header > a
|
.iconArrowRight
|
||||||
{
|
{
|
||||||
font-size: inherit;
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
display: inline-block;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 13px;
|
||||||
|
background-position: center;
|
||||||
|
background-image: url("chrome-extension://__MSG_@@extension_id__/icons/arrowRight.svg");
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > header > hr
|
.tabsAside.pane > header > hr
|
||||||
{
|
{
|
||||||
border: 1px solid #8a8a8a !important;
|
border: 1px solid #8a8a8a;
|
||||||
direction: initial !important;
|
|
||||||
color: inherit !important;
|
|
||||||
height: initial !important;
|
|
||||||
margin: 6.5px 0px !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > section > h2
|
.tabsAside.pane > section > h2
|
||||||
{
|
{
|
||||||
color: inherit !important;
|
margin: 0px 40px;
|
||||||
margin: 0px 40px !important;
|
font-weight: normal;
|
||||||
font-weight: normal !important;
|
|
||||||
font-size: 1.5em !important;
|
|
||||||
line-height: normal !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Collection header */
|
/* Collection header */
|
||||||
.tabsAside.pane > section > div
|
.tabsAside.pane > section > div
|
||||||
{
|
{
|
||||||
transition: .2s !important;
|
transition: .2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > section > div > div:first-child
|
.collectionSet > .header
|
||||||
{
|
{
|
||||||
margin: 0px 20px !important;
|
margin: 0px 20px;
|
||||||
display: grid !important;
|
display: grid;
|
||||||
grid-template-columns: auto 1fr auto auto auto !important;
|
grid-template-columns: auto 1fr auto auto auto;
|
||||||
grid-column-gap: 10px !important;
|
grid-column-gap: 10px;
|
||||||
align-items: center !important;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > section > div > div:first-child > small
|
.collectionSet > .header > small
|
||||||
{
|
{
|
||||||
color: gray !important;
|
color: gray;
|
||||||
font-size: smaller !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > section > div > div:first-child > span
|
.collectionSet > .header > span
|
||||||
{
|
{
|
||||||
font-weight: 600 !important;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > section > div > div:first-child > a
|
.collectionSet > .header > a
|
||||||
{
|
{
|
||||||
font-size: 11pt !important;
|
font-size: 11pt;
|
||||||
line-height: initial !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > section > div > div:first-child > div > nav
|
.collectionSet > .header > div > nav
|
||||||
{
|
{
|
||||||
width: 250px !important;
|
width: 250px;
|
||||||
margin-top: 40px !important;
|
right: 60px;
|
||||||
right: 50px !important;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* Tabs collection */
|
/* Tabs collection */
|
||||||
.tabsAside.pane > section > div > div:last-child
|
.collectionSet > .set
|
||||||
{
|
{
|
||||||
margin: 0px 0px 0px 20px !important;
|
margin: 0px 0px 0px 20px;
|
||||||
padding: 10px 40px 10px 20px !important;
|
padding: 10px 40px 10px 20px;
|
||||||
white-space: nowrap !important;
|
white-space: nowrap;
|
||||||
overflow: auto !important;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > section > div > div:last-child:hover::-webkit-scrollbar-thumb
|
.collectionSet > .set::-webkit-scrollbar-thumb
|
||||||
{
|
{
|
||||||
visibility: visible !important;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > section > div > div:last-child > div
|
.collectionSet > .set:hover::-webkit-scrollbar-thumb
|
||||||
{
|
{
|
||||||
width: 175px !important;
|
visibility: visible;
|
||||||
height: 148px !important;
|
}
|
||||||
margin: 5px !important;
|
|
||||||
|
|
||||||
background-color: #c2c2c2 !important;
|
.collectionSet > .set > div
|
||||||
|
{
|
||||||
|
width: 175px;
|
||||||
|
height: 148px;
|
||||||
|
margin: 5px;
|
||||||
|
|
||||||
|
background-color: #c2c2c2;
|
||||||
background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_thumbnail.png");
|
background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_thumbnail.png");
|
||||||
background-size: cover !important;
|
background-size: cover;
|
||||||
background-position-x: center !important;
|
background-position-x: center;
|
||||||
|
|
||||||
display: inline-grid !important;
|
display: inline-grid;
|
||||||
grid-template-rows: 1fr auto !important;
|
grid-template-rows: 1fr auto;
|
||||||
|
|
||||||
box-shadow: 0px 0px 5px rgba(100, 100, 100, .5) !important;
|
box-shadow: 0px 0px 5px rgba(100, 100, 100, .5);
|
||||||
transition: .25s !important;
|
transition: .25s;
|
||||||
cursor: pointer !important;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.tabsAside.pane > section > div > div:last-child > div:hover
|
.collectionSet > .set > div:hover
|
||||||
{
|
{
|
||||||
filter: brightness(120%) !important;
|
filter: brightness(120%);
|
||||||
box-shadow: 0px 0px 15px rgba(100, 100, 100, .5) !important;
|
box-shadow: 0px 0px 15px rgba(100, 100, 100, .5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > section > div > div:last-child > div > div
|
.collectionSet > .set > div > div
|
||||||
{
|
{
|
||||||
background-color: rgba(233, 233, 233, .75) !important;
|
background-color: rgba(233, 233, 233, .75);
|
||||||
grid-row: 2 !important;
|
grid-row: 2;
|
||||||
display: grid !important;
|
display: grid;
|
||||||
grid-template-columns: auto 1fr auto !important;
|
grid-template-columns: auto 1fr auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > section > div > div:last-child > div > div > button
|
.collectionSet > .set > div > div > button
|
||||||
{
|
{
|
||||||
margin: auto !important;
|
margin: auto;
|
||||||
margin-right: 5px !important;
|
margin-right: 5px;
|
||||||
display: none !important;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > section > div > div:last-child > div:hover > div > button
|
.collectionSet > .set > div:hover > div > button
|
||||||
{
|
{
|
||||||
display: initial !important;
|
display: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > section > div > div:last-child > div > div > div
|
.collectionSet > .set > div > div > div
|
||||||
{
|
{
|
||||||
width: 20px !important;
|
width: 20px;
|
||||||
height: 20px !important;
|
height: 20px;
|
||||||
margin: 10px !important;
|
margin: 10px;
|
||||||
|
|
||||||
background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_icon.png");
|
background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_icon.png");
|
||||||
background-size: 20px !important;
|
background-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside.pane > section > div > div:last-child > div > div > span
|
.collectionSet > .set > div > div > span
|
||||||
{
|
{
|
||||||
overflow: hidden !important;
|
overflow: hidden;
|
||||||
margin: auto 0px !important;
|
margin: auto 0px;
|
||||||
margin-right: 10px !important;
|
margin-right: 10px;
|
||||||
line-height: initial !important;
|
|
||||||
}
|
}
|
||||||
.tabsAside.pane > section > div > div:last-child > div:hover > div > span
|
.collectionSet > .set > div:hover > div > span
|
||||||
{
|
{
|
||||||
margin-right: 5px !important;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 500px)
|
@media only screen and (max-width: 500px)
|
||||||
{
|
{
|
||||||
.tabsAside.pane
|
.tabsAside.pane
|
||||||
{
|
{
|
||||||
width: initial !important;
|
width: 100% !important;
|
||||||
left: 0px !important;
|
min-width: initial;
|
||||||
min-width: initial !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+31
-16
@@ -1,59 +1,74 @@
|
|||||||
.tabsAside[darkmode].background
|
.tabsAside[darkmode].background
|
||||||
{
|
{
|
||||||
background-color: rgba(0, 0, 0, .5) !important;
|
background-color: rgba(0, 0, 0, .5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside[darkmode] .pane
|
.tabsAside[darkmode] .pane
|
||||||
{
|
{
|
||||||
background-color: #333333 !important;
|
background-color: #333333;
|
||||||
color: white !important;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tabsAside[darkmode] .saveTabs > div
|
||||||
|
{
|
||||||
|
filter: invert();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button style */
|
||||||
.tabsAside[darkmode] .pane button
|
.tabsAside[darkmode] .pane button
|
||||||
{
|
{
|
||||||
color: white !important;
|
filter: invert();
|
||||||
}
|
}
|
||||||
.tabsAside[darkmode] .pane button:hover
|
.tabsAside[darkmode] .pane button:hover
|
||||||
{
|
{
|
||||||
background-color: gray !important;
|
background-color: gray;
|
||||||
}
|
}
|
||||||
.tabsAside[darkmode] .pane button:active
|
.tabsAside[darkmode] .pane button:active
|
||||||
{
|
{
|
||||||
background-color: dimgray !important;
|
background-color: dimgray;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside[darkmode] .pane > section > div > div:first-child > div:first-child > small
|
.tabsAside[darkmode] a
|
||||||
|
{
|
||||||
|
color: #48adff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Timestamp label */
|
||||||
|
.tabsAside[darkmode] > .pane > section small
|
||||||
{
|
{
|
||||||
color: lightgray !important;
|
color: lightgray !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Scrollbar style */
|
||||||
.tabsAside[darkmode] .pane ::-webkit-scrollbar-thumb
|
.tabsAside[darkmode] .pane ::-webkit-scrollbar-thumb
|
||||||
{
|
{
|
||||||
background: gray !important;
|
background: gray;
|
||||||
border-radius: 3px !important;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
.tabsAside[darkmode] .pane ::-webkit-scrollbar-thumb:hover
|
.tabsAside[darkmode] .pane ::-webkit-scrollbar-thumb:hover
|
||||||
{
|
{
|
||||||
background: dimgray !important;
|
background: dimgray;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside[darkmode] .pane > section > div > div:last-child > div
|
/* Tab style */
|
||||||
|
.tabsAside[darkmode] .pane .collectionSet > .set > div
|
||||||
{
|
{
|
||||||
background-color: #0c0c0c !important;
|
background-color: #0c0c0c;
|
||||||
background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_thumbnail_dark.png");
|
background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_thumbnail_dark.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside[darkmode] .pane > section > div > div:last-child > div > div
|
.tabsAside[darkmode] .pane .collectionSet > .set > div > div
|
||||||
{
|
{
|
||||||
background-color: rgba(50, 50, 50, .75) !important;
|
background-color: rgba(50, 50, 50, .75);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside[darkmode] .pane > section > div > div:last-child > div > div > div
|
.tabsAside[darkmode] .pane .collectionSet > .set > div > div > div
|
||||||
{
|
{
|
||||||
background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_icon_dark.png");
|
background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_icon_dark.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Context menu style */
|
||||||
.tabsAside[darkmode] .pane nav
|
.tabsAside[darkmode] .pane nav
|
||||||
{
|
{
|
||||||
background-color: #3f3f3f !important;
|
background-color: #3f3f3f;
|
||||||
}
|
}
|
||||||
+61
-72
@@ -1,126 +1,115 @@
|
|||||||
/* Custom scrollbar */
|
/* Custom scrollbar */
|
||||||
.tabsAside ::-webkit-scrollbar
|
.tabsAside ::-webkit-scrollbar
|
||||||
{
|
{
|
||||||
height: 6px !important;
|
height: 6px;
|
||||||
|
width: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside ::-webkit-scrollbar-thumb
|
.tabsAside ::-webkit-scrollbar-thumb
|
||||||
{
|
{
|
||||||
visibility: hidden !important;
|
background: darkgray;
|
||||||
background: darkgray !important;
|
border-radius: 3px;
|
||||||
border-radius: 3px !important;
|
|
||||||
}
|
}
|
||||||
.tabsAside ::-webkit-scrollbar-thumb:hover
|
.tabsAside ::-webkit-scrollbar-thumb:hover
|
||||||
{
|
{
|
||||||
background: gray !important;
|
background: gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside::-webkit-scrollbar
|
.tabsAside
|
||||||
{
|
{
|
||||||
width: 6px !important;
|
font-family: 'DefaultFont';
|
||||||
|
font-size: 14px;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside::-webkit-scrollbar-thumb
|
|
||||||
{
|
|
||||||
background: gray !important;
|
|
||||||
border-radius: 3px !important;
|
|
||||||
}
|
|
||||||
.tabsAside::-webkit-scrollbar-thumb:hover
|
|
||||||
{
|
|
||||||
background: darkgray !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Links style */
|
/* Links style */
|
||||||
.tabsAside a
|
.tabsAside a
|
||||||
{
|
{
|
||||||
font-family: 'Segoe UI', 'Segoe MDL2 Assets' !important;
|
color: #0078d7;
|
||||||
color: #0078d7 !important;
|
|
||||||
font-weight: 400 !important;
|
|
||||||
}
|
}
|
||||||
.tabsAside a:hover
|
.tabsAside a:hover
|
||||||
{
|
{
|
||||||
text-decoration: underline !important;
|
text-decoration: underline;
|
||||||
cursor: pointer !important;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside a:visited
|
.tabsAside a:visited
|
||||||
{
|
{
|
||||||
color: #0078d7 !important;
|
color: #0078d7;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Buttons style */
|
/* Buttons style */
|
||||||
.tabsAside button
|
.tabsAside button
|
||||||
{
|
{
|
||||||
font-family: 'Segoe MDL2 Assets' !important;
|
width: 32px;
|
||||||
width: 32px !important;
|
height: 32px;
|
||||||
height: 32px !important;
|
background-color: transparent;
|
||||||
background-color: transparent !important;
|
border: none;
|
||||||
border: none !important;
|
cursor: pointer;
|
||||||
cursor: pointer !important;
|
|
||||||
box-shadow: initial !important;
|
|
||||||
font-size: inherit !important;
|
|
||||||
padding: initial !important;
|
|
||||||
position: initial !important;
|
|
||||||
box-sizing: initial !important;
|
|
||||||
line-height: initial !important;
|
|
||||||
text-align: center !important;
|
|
||||||
border-radius: 2px !important;
|
|
||||||
min-height: initial !important;
|
|
||||||
display: initial !important;
|
|
||||||
min-width: initial !important;
|
|
||||||
}
|
}
|
||||||
.tabsAside button:hover
|
.tabsAside button:hover
|
||||||
{
|
{
|
||||||
background-color: #c6c6c6 !important;
|
background-color: #c6c6c6;
|
||||||
}
|
}
|
||||||
.tabsAside button:active
|
.tabsAside button:active
|
||||||
{
|
{
|
||||||
background-color: gray !important;
|
background-color: gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Context menus style */
|
/* Context menus style */
|
||||||
.tabsAside nav
|
.tabsAside nav
|
||||||
{
|
{
|
||||||
font-family: 'Segoe UI' !important;
|
user-select: none;
|
||||||
user-select: none !important;
|
|
||||||
|
|
||||||
position: absolute !important;
|
position: absolute;
|
||||||
width: 250px !important;
|
width: 250px;
|
||||||
|
|
||||||
box-shadow: 0px 0px 10px black !important;
|
box-shadow: 0px 0px 10px black;
|
||||||
background-color: white !important;
|
background-color: white;
|
||||||
border-radius: 5px !important;
|
border-radius: 5px;
|
||||||
|
|
||||||
z-index: 10 !important;
|
z-index: 10;
|
||||||
|
|
||||||
visibility: hidden !important;
|
visibility: hidden;
|
||||||
|
|
||||||
display: initial !important;
|
|
||||||
left: initial !important;
|
|
||||||
bottom: initial !important;
|
|
||||||
padding: initial !important;
|
|
||||||
min-height: initial !important;
|
|
||||||
font-size: inherit !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside nav button
|
.tabsAside nav button
|
||||||
{
|
{
|
||||||
font-family: 'Segoe UI' !important;
|
text-align: start;
|
||||||
cursor: pointer !important;
|
|
||||||
background-color: transparent !important;
|
|
||||||
border: none !important;
|
|
||||||
box-sizing: border-box !important;
|
|
||||||
|
|
||||||
font-size: medium !important;
|
|
||||||
text-align: start !important;
|
|
||||||
|
|
||||||
padding: 10px !important;
|
padding: 0px 10px;
|
||||||
width: 100% !important;
|
width: 100%;
|
||||||
height: initial !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsAside button + nav:active,
|
.tabsAside button + nav:active,
|
||||||
.tabsAside button:focus + nav
|
.tabsAside button:focus + nav
|
||||||
{
|
{
|
||||||
visibility: visible !important;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Icon buttons style */
|
||||||
|
.btn
|
||||||
|
{
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 15px;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.more
|
||||||
|
{
|
||||||
|
background-image: url("chrome-extension://__MSG_@@extension_id__/icons/more.svg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.remove
|
||||||
|
{
|
||||||
|
background-image: url("chrome-extension://__MSG_@@extension_id__/icons/cancel.svg");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
{
|
||||||
|
font-family: 'DefaultFont';
|
||||||
|
src: local("Segoe UI"),
|
||||||
|
url("chrome-extension://__MSG_@@extension_id__/fonts/WeblySleekUI/weblysleekuisemilight.ttf") format("truetype"),
|
||||||
|
url("chrome-extension://__MSG_@@extension_id__/fonts/WeblySleekUI/weblysleekuisemilight.woff") format("woff"),
|
||||||
|
url("chrome-extension://__MSG_@@extension_id__/fonts/WeblySleekUI/weblysleekuisemilight.woff2") format("woff2");
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,5 @@
|
|||||||
|
<!-- Exported by Character Map UWP -->
|
||||||
|
<svg height="100%" viewBox="0 42 1021 941" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<path d="M1021,512L550.5,982.5L505.5,937.5L899,544L0,544L0,480L899,480L505.5,86.5L550.5,41.5Z" fill="#000000" fill-opacity="1">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 320 B |
@@ -0,0 +1,5 @@
|
|||||||
|
<!-- Exported by Character Map UWP -->
|
||||||
|
<svg height="100%" viewBox="122 122 781 781" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<path d="M557.5,512L902.5,857.5L857.5,902.5L512,557.5L166.5,902.5L121.5,857.5L466.5,512L121.5,166.5L166.5,121.5L512,466.5L857.5,121.5L902.5,166.5Z" fill="#000000" fill-opacity="1">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 375 B |
@@ -0,0 +1,5 @@
|
|||||||
|
<!-- Exported by Character Map UWP -->
|
||||||
|
<svg height="100%" viewBox="64 448 896 128" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<path d="M128,448C137,448 145.333,449.667 153,453C160.667,456.333 167.417,460.917 173.25,466.75C179.083,472.583 183.667,479.333 187,487C190.333,494.667 192,503 192,512C192,521 190.333,529.333 187,537C183.667,544.667 179.083,551.417 173.25,557.25C167.417,563.083 160.667,567.667 153,571C145.333,574.333 137,576 128,576C119,576 110.667,574.333 103,571C95.3333,567.667 88.5833,563.083 82.75,557.25C76.9167,551.417 72.3333,544.667 69,537C65.6667,529.333 64,521 64,512C64,503 65.6667,494.667 69,487C72.3333,479.333 76.9167,472.583 82.75,466.75C88.5833,460.917 95.3333,456.333 103,453C110.667,449.667 119,448 128,448ZM512,448C521,448 529.333,449.667 537,453C544.667,456.333 551.417,460.917 557.25,466.75C563.083,472.583 567.667,479.333 571,487C574.333,494.667 576,503 576,512C576,521 574.333,529.333 571,537C567.667,544.667 563.083,551.417 557.25,557.25C551.417,563.083 544.667,567.667 537,571C529.333,574.333 521,576 512,576C503,576 494.667,574.333 487,571C479.333,567.667 472.583,563.083 466.75,557.25C460.917,551.417 456.333,544.667 453,537C449.667,529.333 448,521 448,512C448,503 449.667,494.667 453,487C456.333,479.333 460.917,472.583 466.75,466.75C472.583,460.917 479.333,456.333 487,453C494.667,449.667 503,448 512,448ZM896,448C905,448 913.333,449.667 921,453C928.667,456.333 935.417,460.917 941.25,466.75C947.083,472.583 951.667,479.333 955,487C958.333,494.667 960,503 960,512C960,521 958.333,529.333 955,537C951.667,544.667 947.083,551.417 941.25,557.25C935.417,563.083 928.667,567.667 921,571C913.333,574.333 905,576 896,576C887,576 878.667,574.333 871,571C863.333,567.667 856.583,563.083 850.75,557.25C844.917,551.417 840.333,544.667 837,537C833.667,529.333 832,521 832,512C832,503 833.667,494.667 837,487C840.333,479.333 844.917,472.583 850.75,466.75C856.583,460.917 863.333,456.333 871,453C878.667,449.667 887,448 896,448Z" fill="#000000" fill-opacity="1">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
+124
-237
@@ -1,116 +1,66 @@
|
|||||||
if (document.location.protocol == "chrome-extension:")
|
if (window.location === window.parent.location && window.location.protocol != "chrome-extension:") // For open/close call
|
||||||
InitializeStandalone();
|
|
||||||
else
|
|
||||||
{
|
{
|
||||||
setTimeout(function ()
|
var iframe = document.querySelector("iframe.tabsAsideIframe");
|
||||||
|
if (!iframe)
|
||||||
{
|
{
|
||||||
var pane = document.querySelector(".tabsAside.pane");
|
iframe = document.createElement('iframe');
|
||||||
|
|
||||||
if (pane == null)
|
iframe.setAttribute("class", "tabsAsideIframe");
|
||||||
|
|
||||||
|
iframe.style.position = "fixed";
|
||||||
|
iframe.style.zIndex = "2147483647";
|
||||||
|
|
||||||
|
iframe.style.height = "100%";
|
||||||
|
iframe.style.width = "100%";
|
||||||
|
|
||||||
|
iframe.style.top = "0px";
|
||||||
|
iframe.style.right = "0px";
|
||||||
|
iframe.style.left = "0px";
|
||||||
|
iframe.style.bottom = "0px";
|
||||||
|
|
||||||
|
iframe.style.border = "none";
|
||||||
|
iframe.style.background = "transparent";
|
||||||
|
iframe.style.opacity = 0;
|
||||||
|
|
||||||
|
var bodyStyle = document.body.getAttribute("style");
|
||||||
|
document.body.setAttribute("style", "overflow: hidden !important");
|
||||||
|
|
||||||
|
iframe.onload = () => setTimeout(() => iframe.style.opacity = 1, 100);
|
||||||
|
|
||||||
|
iframe.src = chrome.extension.getURL("TabsAside.html");
|
||||||
|
document.body.appendChild(iframe);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
iframe.contentWindow.postMessage({ target: "TabsAside", command: "TogglePane" }, "*");
|
||||||
|
setTimeout(() =>
|
||||||
{
|
{
|
||||||
var xhr = new XMLHttpRequest();
|
iframe.remove();
|
||||||
xhr.open('GET', chrome.extension.getURL("collections.html"), true);
|
document.body.setAttribute("style", bodyStyle);
|
||||||
xhr.onreadystatechange = function ()
|
}, 250);
|
||||||
{
|
}
|
||||||
if (this.status !== 200 || document.querySelector("#aside-pane") != null)
|
|
||||||
return;
|
|
||||||
|
|
||||||
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.querySelector("nav > p > small").textContent = chrome.runtime.getManifest()["version"];
|
|
||||||
|
|
||||||
var loadOnRestoreCheckbox = document.querySelector("nav > p > input[type=checkbox]");
|
|
||||||
chrome.storage.sync.get({ "loadOnRestore": false },
|
|
||||||
values => loadOnRestoreCheckbox.checked = values.loadOnRestore
|
|
||||||
);
|
|
||||||
chrome.storage.onChanged.addListener(function (changes, namespace) {
|
|
||||||
if (namespace == 'sync'){
|
|
||||||
for (key in changes) {
|
|
||||||
if (key === 'loadOnRestore') {
|
|
||||||
loadOnRestoreCheckbox.checked = changes[key].newValue
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
loadOnRestoreCheckbox.addEventListener("click", function ()
|
|
||||||
{
|
|
||||||
chrome.storage.sync.set(
|
|
||||||
{
|
|
||||||
"loadOnRestore": loadOnRestoreCheckbox.checked
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
else // For init call
|
||||||
|
Initialize();
|
||||||
|
|
||||||
function InitializeStandalone()
|
function Initialize()
|
||||||
{
|
{
|
||||||
pane = document.querySelector(".tabsAside.pane");
|
var pane = document.querySelector(".tabsAside.pane");
|
||||||
|
if (!pane)
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (window.location !== window.parent.location)
|
||||||
|
{
|
||||||
|
pane.setAttribute("embedded", "");
|
||||||
|
window.addEventListener('message', event =>
|
||||||
|
{
|
||||||
|
if (event.data.target == "TabsAside")
|
||||||
|
{
|
||||||
|
pane.parentElement.style.opacity = 0;
|
||||||
|
pane.removeAttribute("opened");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
if (window.matchMedia("(prefers-color-scheme: dark)").matches)
|
if (window.matchMedia("(prefers-color-scheme: dark)").matches)
|
||||||
{
|
{
|
||||||
@@ -123,39 +73,35 @@ function InitializeStandalone()
|
|||||||
document.querySelector("nav > p > small").textContent = chrome.runtime.getManifest()["version"];
|
document.querySelector("nav > p > small").textContent = chrome.runtime.getManifest()["version"];
|
||||||
|
|
||||||
var loadOnRestoreCheckbox = document.querySelector("nav > p > input[type=checkbox]");
|
var loadOnRestoreCheckbox = document.querySelector("nav > p > input[type=checkbox]");
|
||||||
chrome.storage.sync.get({ "loadOnRestore": false },
|
chrome.storage.sync.get(
|
||||||
|
{ "loadOnRestore": false },
|
||||||
values => loadOnRestoreCheckbox.checked = values.loadOnRestore
|
values => loadOnRestoreCheckbox.checked = values.loadOnRestore
|
||||||
);
|
);
|
||||||
chrome.storage.onChanged.addListener(function (changes, namespace) {
|
chrome.storage.onChanged.addListener((changes, namespace) =>
|
||||||
if (namespace == 'sync'){
|
|
||||||
for (key in changes) {
|
|
||||||
if (key === 'loadOnRestore') {
|
|
||||||
loadOnRestoreCheckbox.checked = changes[key].newValue
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
loadOnRestoreCheckbox.addEventListener("click", function ()
|
|
||||||
{
|
{
|
||||||
|
if (namespace == 'sync')
|
||||||
|
for (key in changes)
|
||||||
|
if (key === 'loadOnRestore')
|
||||||
|
loadOnRestoreCheckbox.checked = changes[key].newValue
|
||||||
|
});
|
||||||
|
loadOnRestoreCheckbox.addEventListener("click", () =>
|
||||||
chrome.storage.sync.set(
|
chrome.storage.sync.set(
|
||||||
{
|
{
|
||||||
"loadOnRestore": loadOnRestoreCheckbox.checked
|
"loadOnRestore": loadOnRestoreCheckbox.checked
|
||||||
});
|
})
|
||||||
});
|
);
|
||||||
|
|
||||||
document.querySelectorAll(".tabsAside.pane > header nav button").forEach(i =>
|
document.querySelectorAll(".tabsAside.pane > header nav button").forEach(i =>
|
||||||
{
|
i.onclick = () => window.open(i.value, '_blank'));
|
||||||
i.onclick = function () { window.open(i.value, '_blank'); };
|
|
||||||
});
|
|
||||||
|
|
||||||
chrome.runtime.sendMessage({ command: "loadData" }, function (collections)
|
chrome.runtime.sendMessage({ command: "loadData" }, (collections) =>
|
||||||
{
|
{
|
||||||
if (document.querySelector(".tabsAside.pane section div") == null)
|
if (document.querySelector(".tabsAside.pane section div") == null)
|
||||||
collections.forEach(i =>
|
collections.forEach(i =>
|
||||||
{
|
AddCollection(i));
|
||||||
AddCollection(i);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
setTimeout(() => pane.setAttribute("opened", ""), 100);
|
||||||
}
|
}
|
||||||
|
|
||||||
function AddCollection(collection)
|
function AddCollection(collection)
|
||||||
@@ -169,75 +115,53 @@ function AddCollection(collection)
|
|||||||
{
|
{
|
||||||
rawTabs +=
|
rawTabs +=
|
||||||
"<div title='" + collection.titles[i] + "'" + ((collection.thumbnails && collection.thumbnails[i]) ? " style='background-image: url(" + collection.thumbnails[i] + ")'" : "") + ">" +
|
"<div title='" + collection.titles[i] + "'" + ((collection.thumbnails && collection.thumbnails[i]) ? " style='background-image: url(" + collection.thumbnails[i] + ")'" : "") + ">" +
|
||||||
"<span value='" + collection.links[i] + "'></span>" +
|
"<span class='openTab' value='" + collection.links[i] + "'></span>" +
|
||||||
"<div>" +
|
"<div>" +
|
||||||
"<div" + ((collection.icons[i] == 0 || collection.icons[i] == null) ? "" : " style='background-image: url(\"" + collection.icons[i] + "\")'") + "></div>" +
|
"<div" + ((collection.icons[i] == 0 || collection.icons[i] == null) ? "" : " style='background-image: url(\"" + collection.icons[i] + "\")'") + "></div>" +
|
||||||
"<span>" + collection.titles[i] + "</span>" +
|
"<span>" + collection.titles[i] + "</span>" +
|
||||||
"<button title='Remove tab from collection'></button>" +
|
"<button class='btn remove' title='Remove tab from collection'></button>" +
|
||||||
"</div>" +
|
"</div>" +
|
||||||
"</div>";
|
"</div>";
|
||||||
}
|
}
|
||||||
|
|
||||||
list.innerHTML += "<div>" +
|
list.innerHTML +=
|
||||||
"<div>" +
|
"<div class='collectionSet'>" +
|
||||||
"<span>Tabs: " + collection.links.length + "</span>" +
|
"<div class='header'>" +
|
||||||
"<small>" + GetAgo(collection.timestamp) + "</small>" +
|
"<span>Tabs: " + collection.links.length + "</span>" +
|
||||||
"<a>Restore tabs</a>" +
|
"<small>" + GetAgo(collection.timestamp) + "</small>" +
|
||||||
"<div>" +
|
"<a class='restoreCollection'>Restore tabs</a>" +
|
||||||
"<button title='More...'></button>" +
|
"<div>" +
|
||||||
"<nav>" +
|
"<button class='btn more' title='More...'></button>" +
|
||||||
"<button>Restore without removing</button>" +
|
"<nav>" +
|
||||||
// "<button hidden>Add tabs to favorites</button>" +
|
"<button class='restoreCollection noDelete'>Restore without removing</button>" +
|
||||||
// "<button hidden>Share tabs</button>" +
|
"</nav>" +
|
||||||
"</nav>" +
|
"</div>" +
|
||||||
"</div>" +
|
"<button class='btn remove' title='Remove collection'></button>" +
|
||||||
"<button title='Remove collection'></button>" +
|
"</div>" +
|
||||||
"</div>" +
|
|
||||||
|
|
||||||
"<div>" + rawTabs + "</div>" +
|
"<div class='set' class='tabsList'>" + rawTabs + "</div>" +
|
||||||
"</div>"
|
"</div>"
|
||||||
|
|
||||||
list.querySelectorAll("a").forEach(i =>
|
list.querySelectorAll(".restoreCollection").forEach(i =>
|
||||||
{
|
i.onclick = () => RestoreTabs(i.parentElement.parentElement));
|
||||||
i.onclick = function () { RestoreTabs(i.parentElement.parentElement) };
|
|
||||||
});
|
|
||||||
|
|
||||||
list.querySelectorAll("nav button:first-child").forEach(i =>
|
list.querySelectorAll(".restoreCollection.noDelete").forEach(i =>
|
||||||
{
|
i.onclick = () => RestoreTabs(i.parentElement.parentElement.parentElement.parentElement, false));
|
||||||
i.onclick = function () { RestoreTabs(i.parentElement.parentElement.parentElement.parentElement, false) };
|
|
||||||
});
|
|
||||||
|
|
||||||
list.querySelectorAll("div > div:last-child > div > span").forEach(i =>
|
list.querySelectorAll(".openTab").forEach(i =>
|
||||||
{
|
i.onclick = () =>
|
||||||
i.onclick = function ()
|
|
||||||
{
|
|
||||||
chrome.runtime.sendMessage(
|
chrome.runtime.sendMessage(
|
||||||
{
|
{
|
||||||
command: "openTab",
|
command: "openTab",
|
||||||
url: i.getAttribute("value")
|
url: i.getAttribute("value")
|
||||||
}
|
}
|
||||||
);
|
));
|
||||||
};
|
|
||||||
})
|
|
||||||
|
|
||||||
document.querySelectorAll(".tabsAside.pane > section > div > div:first-child > button").forEach(i =>
|
document.querySelectorAll(".btn.remove").forEach(i =>
|
||||||
{
|
i.onclick = () => RemoveTabs(i.parentElement.parentElement));
|
||||||
i.onclick = function () { RemoveTabs(i.parentElement.parentElement) };
|
|
||||||
});
|
|
||||||
|
|
||||||
/*document.querySelectorAll(".tabsAside.pane > section > div > div:first-child > div > nav > button:first-child").forEach(i =>
|
document.querySelectorAll(".tabsList .btn.remove").forEach(i =>
|
||||||
{
|
i.onclick = () => RemoveOneTab(i.parentElement.parentElement));
|
||||||
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()
|
function SetTabsAside()
|
||||||
@@ -253,85 +177,47 @@ function RestoreTabs(collectionData, removeCollection = true)
|
|||||||
removeCollection: removeCollection,
|
removeCollection: removeCollection,
|
||||||
collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
|
collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
|
||||||
},
|
},
|
||||||
function ()
|
() =>
|
||||||
{
|
{
|
||||||
if (!removeCollection)
|
if (removeCollection)
|
||||||
return;
|
RemoveCollectionElement(collectionData);
|
||||||
|
|
||||||
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)
|
function RemoveTabs(collectionData)
|
||||||
{
|
{
|
||||||
|
if (!confirm("Are you sure you want to delete this collection?"))
|
||||||
|
return;
|
||||||
|
|
||||||
chrome.runtime.sendMessage(
|
chrome.runtime.sendMessage(
|
||||||
{
|
{
|
||||||
command: "deleteTabs",
|
command: "deleteTabs",
|
||||||
collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
|
collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
|
||||||
},
|
},
|
||||||
function ()
|
() => RemoveCollectionElement(collectionData)
|
||||||
{
|
|
||||||
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)
|
function RemoveOneTab(tabData)
|
||||||
{
|
{
|
||||||
|
if (!confirm("Are you sure you want to delete this tab?"))
|
||||||
|
return;
|
||||||
|
|
||||||
chrome.runtime.sendMessage(
|
chrome.runtime.sendMessage(
|
||||||
{
|
{
|
||||||
command: "removeTab",
|
command: "removeTab",
|
||||||
collectionIndex: Array.prototype.slice.call(tabData.parentElement.parentElement.parentElement.children).indexOf(tabData.parentElement.parentElement) - 1,
|
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)
|
tabIndex: Array.prototype.slice.call(tabData.parentElement.children).indexOf(tabData)
|
||||||
},
|
},
|
||||||
function ()
|
() =>
|
||||||
{
|
{
|
||||||
tabData.parentElement.previousElementSibling.children[0].textContent = "Tabs: " + tabData.parentElement.children.length - 1;
|
tabData.parentElement.previousElementSibling.children[0].textContent = "Tabs: " + (tabData.parentElement.children.length - 1);
|
||||||
if (tabData.parentElement.children.length < 2)
|
if (tabData.parentElement.children.length < 2)
|
||||||
{
|
{
|
||||||
RemoveElement(tabData.parentElement.parentElement);
|
RemoveElement(tabData.parentElement.parentElement);
|
||||||
if (document.querySelector("tabsAside.pane > section").children.length < 2)
|
if (document.querySelector("tabsAside.pane > section").children.length < 2)
|
||||||
setTimeout(function ()
|
setTimeout(() => document.querySelector(".tabsAside.pane > section > h2").removeAttribute("hidden"), 250);
|
||||||
{
|
|
||||||
document.querySelector(".tabsAside.pane > section > h2").removeAttribute("hidden");
|
|
||||||
}, 250);
|
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
RemoveElement(tabData);
|
RemoveElement(tabData);
|
||||||
@@ -379,11 +265,12 @@ function GetAgo(timestamp)
|
|||||||
function RemoveElement(el)
|
function RemoveElement(el)
|
||||||
{
|
{
|
||||||
el.style.opacity = 0;
|
el.style.opacity = 0;
|
||||||
setTimeout(function ()
|
setTimeout(() => el.remove(), 200);
|
||||||
{
|
|
||||||
el.remove();
|
|
||||||
}, 200);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: Add more actions
|
function RemoveCollectionElement(el)
|
||||||
// TODO: Make backup system
|
{
|
||||||
|
RemoveElement(el);
|
||||||
|
if (el.parentElement.children.length < 2)
|
||||||
|
setTimeout(() => document.querySelector(".tabsAside.pane > section > h2").removeAttribute("hidden"), 250);
|
||||||
|
}
|
||||||
+77
-142
@@ -1,28 +1,9 @@
|
|||||||
chrome.browserAction.onClicked.addListener(function (tab)
|
chrome.browserAction.onClicked.addListener((tab) =>
|
||||||
{
|
{
|
||||||
if (tab.url.startsWith("http")
|
if (tab.url.startsWith("http")
|
||||||
&& !tab.url.includes("chrome.google.com")
|
&& !tab.url.includes("chrome.google.com")
|
||||||
&& !tab.url.includes("microsoftedge.microsoft.com"))
|
&& !tab.url.includes("microsoftedge.microsoft.com"))
|
||||||
{
|
{
|
||||||
chrome.tabs.insertCSS(
|
|
||||||
{
|
|
||||||
file: "css/style.css",
|
|
||||||
allFrames: true,
|
|
||||||
runAt: "document_idle"
|
|
||||||
});
|
|
||||||
chrome.tabs.insertCSS(
|
|
||||||
{
|
|
||||||
file: "css/style.generic.css",
|
|
||||||
allFrames: true,
|
|
||||||
runAt: "document_idle"
|
|
||||||
});
|
|
||||||
chrome.tabs.insertCSS(
|
|
||||||
{
|
|
||||||
file: "css/style.dark.css",
|
|
||||||
allFrames: true,
|
|
||||||
runAt: "document_idle"
|
|
||||||
});
|
|
||||||
|
|
||||||
chrome.tabs.executeScript(tab.id,
|
chrome.tabs.executeScript(tab.id,
|
||||||
{
|
{
|
||||||
file: "js/aside-script.js",
|
file: "js/aside-script.js",
|
||||||
@@ -30,89 +11,38 @@ chrome.browserAction.onClicked.addListener(function (tab)
|
|||||||
runAt: "document_idle"
|
runAt: "document_idle"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else if (tab.url.startsWith("chrome-extension") && tab.url.endsWith("TabsAside.html"))
|
else if (tab.url == chrome.runtime.getURL("TabsAside.html"))
|
||||||
chrome.tabs.remove(tab.id);
|
chrome.tabs.remove(tab.id);
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
chrome.tabs.create({
|
chrome.tabs.create(
|
||||||
url: chrome.extension.getURL("TabsAside.html"),
|
{
|
||||||
active: true
|
url: chrome.extension.getURL("TabsAside.html"),
|
||||||
},
|
active: true
|
||||||
chrome.tabs.onActivated.addListener(function TabsAsideCloser(activeInfo) {
|
},
|
||||||
chrome.tabs.query({ url: chrome.extension.getURL("TabsAside.html") }, function (result) {
|
(activeTab) =>
|
||||||
if (result.length)
|
chrome.tabs.onActivated.addListener(function TabsAsideCloser(activeInfo)
|
||||||
setTimeout(function () {
|
{
|
||||||
result.forEach(i => {
|
chrome.tabs.query({ url: chrome.extension.getURL("TabsAside.html") }, (result) =>
|
||||||
if (activeInfo.tabId != i.id)
|
{
|
||||||
chrome.tabs.remove(i.id);
|
if (result.length)
|
||||||
});
|
setTimeout(() =>
|
||||||
}, 200);
|
{
|
||||||
else chrome.tabs.onActivated.removeListener(TabsAsideCloser);
|
result.forEach(i =>
|
||||||
});
|
{
|
||||||
}));
|
if (activeInfo.tabId != i.id)
|
||||||
|
chrome.tabs.remove(i.id);
|
||||||
|
});
|
||||||
|
}, 200);
|
||||||
|
else chrome.tabs.onActivated.removeListener(TabsAsideCloser);
|
||||||
|
});
|
||||||
|
}));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var collections = JSON.parse(localStorage.getItem("sets")) || [];
|
||||||
|
|
||||||
function UpdateTheme()
|
chrome.runtime.onMessage.addListener((message, sender, sendResponse) =>
|
||||||
{
|
|
||||||
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(
|
|
||||||
{
|
|
||||||
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
|
|
||||||
{
|
|
||||||
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)
|
switch (message.command)
|
||||||
{
|
{
|
||||||
@@ -137,33 +67,47 @@ chrome.runtime.onMessage.addListener(function (message, sender, sendResponse)
|
|||||||
RemoveTab(message.collectionIndex, message.tabIndex);
|
RemoveTab(message.collectionIndex, message.tabIndex);
|
||||||
sendResponse();
|
sendResponse();
|
||||||
break;
|
break;
|
||||||
case "toFavorites":
|
|
||||||
AddTabsToFavorites(message.collectionIndex);
|
|
||||||
break;
|
|
||||||
case "share":
|
|
||||||
ShareTabs(message.collectionIndex);
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// This function updates the extension's toolbar icon
|
||||||
|
function UpdateTheme()
|
||||||
|
{
|
||||||
|
var theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||||||
|
var iconStatus = collections.length ? "full" : "empty";
|
||||||
|
|
||||||
|
var basePath = "icons/" + theme + "/" + iconStatus + "/";
|
||||||
|
|
||||||
|
chrome.browserAction.setIcon(
|
||||||
|
{
|
||||||
|
path:
|
||||||
|
{
|
||||||
|
"128": basePath + "128.png",
|
||||||
|
"48": basePath + "48.png",
|
||||||
|
"32": basePath + "32.png",
|
||||||
|
"16": basePath + "16.png"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
UpdateTheme();
|
UpdateTheme();
|
||||||
chrome.windows.onFocusChanged.addListener(UpdateTheme);
|
chrome.windows.onFocusChanged.addListener(UpdateTheme);
|
||||||
|
|
||||||
chrome.tabs.onUpdated.addListener(UpdateTheme);
|
chrome.tabs.onUpdated.addListener(UpdateTheme);
|
||||||
chrome.tabs.onActivated.addListener(UpdateTheme);
|
chrome.tabs.onActivated.addListener(UpdateTheme);
|
||||||
|
|
||||||
|
// Set current tabs aside
|
||||||
function SaveCollection()
|
function SaveCollection()
|
||||||
{
|
{
|
||||||
chrome.tabs.query({ currentWindow: true }, function (rawTabs)
|
chrome.tabs.query({ currentWindow: true }, (rawTabs) =>
|
||||||
{
|
{
|
||||||
var tabs = rawTabs.filter(i => !(i.url.startsWith("chrome-extension") && i.url.endsWith("TabsAside.html")) && !i.pinned && !i.url.includes("//newtab"));
|
var tabs = rawTabs.filter(i => i.url != chrome.runtime.getURL("TabsAside.html") && !i.pinned && !i.url.includes("//newtab"));
|
||||||
|
|
||||||
if (tabs.length < 1)
|
if (tabs.length < 1)
|
||||||
{
|
{
|
||||||
alert("No tabs available to save");
|
alert("No tabs available to save");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var collection =
|
var collection =
|
||||||
{
|
{
|
||||||
timestamp: Date.now(),
|
timestamp: Date.now(),
|
||||||
@@ -188,9 +132,11 @@ function SaveCollection()
|
|||||||
collections = JSON.parse(localStorage.getItem("sets"));
|
collections = JSON.parse(localStorage.getItem("sets"));
|
||||||
|
|
||||||
var newTabId;
|
var newTabId;
|
||||||
chrome.tabs.create({}, function(tab) { newTabId = tab.id; });
|
chrome.tabs.create({}, (tab) =>
|
||||||
|
{
|
||||||
chrome.tabs.remove(rawTabs.filter(i => !i.url.startsWith("chrome-extension") && !i.url.endsWith("TabsAside.html") && !i.pinned && i.id != newTabId).map(tab => tab.id));
|
newTabId = tab.id;
|
||||||
|
chrome.tabs.remove(rawTabs.filter(i => !i.pinned && i.id != newTabId).map(tab => tab.id));
|
||||||
|
});
|
||||||
|
|
||||||
UpdateTheme();
|
UpdateTheme();
|
||||||
});
|
});
|
||||||
@@ -212,20 +158,23 @@ function RestoreCollection(collectionIndex, removeCollection)
|
|||||||
{
|
{
|
||||||
url: i,
|
url: i,
|
||||||
active: false
|
active: false
|
||||||
} , function (createdTab)
|
},
|
||||||
{
|
(createdTab) =>
|
||||||
chrome.storage.sync.get({ "loadOnRestore" : false }, values => {
|
{
|
||||||
if (!values.loadOnRestore)
|
chrome.storage.sync.get({ "loadOnRestore" : false }, values =>
|
||||||
chrome.tabs.onUpdated.addListener(function discarder(updatedTabId, changeInfo, updatedTab) {
|
{
|
||||||
if (updatedTabId === createdTab.id) {
|
if (!values.loadOnRestore)
|
||||||
chrome.tabs.onUpdated.removeListener(discarder);
|
chrome.tabs.onUpdated.addListener(function DiscardTab(updatedTabId, changeInfo, updatedTab)
|
||||||
if (!updatedTab.active) {
|
{
|
||||||
chrome.tabs.discard(updatedTabId);
|
if (updatedTabId === createdTab.id) {
|
||||||
|
chrome.tabs.onUpdated.removeListener(DiscardTab);
|
||||||
|
if (!updatedTab.active) {
|
||||||
|
chrome.tabs.discard(updatedTabId);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!removeCollection)
|
if (!removeCollection)
|
||||||
@@ -237,24 +186,6 @@ function RestoreCollection(collectionIndex, removeCollection)
|
|||||||
UpdateTheme();
|
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)
|
function RemoveTab(collectionIndex, tabIndex)
|
||||||
{
|
{
|
||||||
var set = collections[collectionIndex];
|
var set = collections[collectionIndex];
|
||||||
@@ -292,7 +223,7 @@ function RemoveTab(collectionIndex, tabIndex)
|
|||||||
|
|
||||||
var thumbnails = [];
|
var thumbnails = [];
|
||||||
|
|
||||||
function AppendThumbnail(tabId, cahngeInfo, tab)
|
function AppendThumbnail(tabId, tab)
|
||||||
{
|
{
|
||||||
if (!tab.active || !tab.url.startsWith("http"))
|
if (!tab.active || !tab.url.startsWith("http"))
|
||||||
return;
|
return;
|
||||||
@@ -302,7 +233,7 @@ function AppendThumbnail(tabId, cahngeInfo, tab)
|
|||||||
format: "jpeg",
|
format: "jpeg",
|
||||||
quality: 1
|
quality: 1
|
||||||
},
|
},
|
||||||
function (dataUrl)
|
(dataUrl) =>
|
||||||
{
|
{
|
||||||
if (!dataUrl)
|
if (!dataUrl)
|
||||||
{
|
{
|
||||||
@@ -325,4 +256,8 @@ function AppendThumbnail(tabId, cahngeInfo, tab)
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
chrome.tabs.onUpdated.addListener(AppendThumbnail);
|
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) =>
|
||||||
|
{
|
||||||
|
if (changeInfo.status === "complete")
|
||||||
|
AppendThumbnail(tabId, tab)
|
||||||
|
});
|
||||||
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Tabs Aside",
|
"name": "Tabs Aside",
|
||||||
"version": "1.4",
|
"version": "1.5",
|
||||||
"manifest_version": 2,
|
"manifest_version": 2,
|
||||||
"description": "Classic Microsoft Edge \"Tabs Aside\" feature for Chromium browsers",
|
"description": "Classic Microsoft Edge \"Tabs Aside\" feature for Chromium browsers",
|
||||||
"author": "Michael \"XFox\" Gordeev",
|
"author": "Michael \"XFox\" Gordeev",
|
||||||
|
|||||||
Reference in New Issue
Block a user