Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/furybee/chrome-tab-modifier
Take control of your tabs
https://github.com/furybee/chrome-tab-modifier
chrome-extension
Last synced: 1 day ago
JSON representation
Take control of your tabs
- Host: GitHub
- URL: https://github.com/furybee/chrome-tab-modifier
- Owner: furybee
- License: mit
- Created: 2014-02-24T10:08:37.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2023-11-01T07:06:14.000Z (about 1 year ago)
- Last Synced: 2024-04-14T12:32:09.043Z (9 months ago)
- Topics: chrome-extension
- Language: JavaScript
- Homepage: https://chrome.google.com/webstore/detail/tab-modifier/hcbgadmbdkiilgpifjgcakjehmafcjai
- Size: 8.08 MB
- Stars: 512
- Watchers: 17
- Forks: 100
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome - furybee/chrome-tab-modifier - Take control of your tabs (Vue)
README
# 
Tab Modifier
 [](./LICENSE)  [](./.nvmrc)
[](https://yarnpkg.com/en/)
[](https://conventionalcommits.org) 
Take control of your tabs.
## Features
* Rename tab
* Change tab icon
* Pin tab
* Group tabs
* Prevent tab closing
* Unique tab
* Mute tab
Quick rename can be done by right-clicking anywhere in the page and click on "Rename Tab".
## Installation
Tab Modifier is compatible with Chromium-based browsers.
| Browser | Install Link | Web Store |
|----------------|-------------------------------------------------------------------------------------------------------------|-----------------------|
| Google Chrome | ⬇️ [Install](https://chromewebstore.google.com/detail/tab-modifier/hcbgadmbdkiilgpifjgcakjehmafcjai) | Chrome Web Store |
| Arc | ⬇️ [Install](https://chromewebstore.google.com/detail/tab-modifier/hcbgadmbdkiilgpifjgcakjehmafcjai) | Chrome Web Store |
| Brave | ⬇️ [Install](https://chromewebstore.google.com/detail/tab-modifier/hcbgadmbdkiilgpifjgcakjehmafcjai) | Chrome Web Store |
| Opera | ⬇️ [Install](https://addons.opera.com/en/extensions/details/tab-modifier/) | Opera Addons |
| Microsoft Edge | ⬇️ [Install](https://microsoftedge.microsoft.com/addons/detail/tab-modifier/edfkealmjdmkfimdjmiapmnakepfilkp) | Microsoft Edge Addons |
Firefox and Safari are not available.
## Usage
* Click on the Tab Modifier icon to open Popup or Right-Click then Options.
* Create your tab rules.
* Try & enjoy!
## Why did you build this extension?
I needed a quick UI element in Chrome to know the environment of the tab, as a Web developer I often use multiple versions of the same website: local, pre-production and production.
Not easy to find the appropriate tab when you have multiple tabs called "My awesome website".
I created Tab Modifier to add prefixes to website titles with a specific match.
* [DEV] My awesome website: `.local.domain.com`
* [PREPROD] My awesome website: `.preprod.domain.com`
* [PROD] My awesome website: `.domain.com`
After that, I have added more features like "auto-pin", custom favicons and more.
## Core system
Tab Modifier is based on user *rules* and act on the tab URL that matches the first seen rule. When you open a tab (or refresh), the extension will check if the URL matches a rule and apply the actions.
Aware of that, there is no reason to include a feature that is not "rule-based". Prefer to install specific extensions or create your own.
## Examples
You have infinite possibilities, here are some configurations:
Pin all tabs:
* **Detection**: Contains
* **URL fragment**: http
* **Pinned**: ON
Say hello to all Google websites:
* **Detection**: Contains
* **URL fragment**: google.com
* **Title**: Hello Google: {title}
❌ Disguise GitHub as Google
* **Detection**: Contains
* **URL fragment**: github.com
* **Title**: Google
* **Icon**: https://www.google.com/favicon.ico
This will not work due to Content Security Policy (CSP) restrictions:
> Refused to load the image 'https://www.google.com/favicon.ico' because it violates the following Content Security Policy directive from GitHub".
❌ Prevent accidental tab closure:
* **Detection**: Contains
* **URL fragment**: important-website.com
* **Protected**: ON
> This feature is only available if you interact with the page at least once due to Chrome's security restrictions. https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#usage_notes
Mute all Youtube videos by default:
* **Detection**: Contains
* **URL fragment**: youtube.com
* **Mute**: ON
Set blank icon on Pinterest:
* **Detection**: Contains
* **URL fragment**: pinterest.fr
* **Icon**: select "Chrome > Default"
Get only one GMail tab opened at once:
* **Detection**: Starts with
* **URL fragment**: https://mail.google.com
* **Unique**: ON
Pin all PNG images (useless):
* **Detection**: Ends with
* **URL fragment**: .png
* **Pinned**: ON
Customize title with HTML selector and Regexp:
* **Detection**: Contains
* **URL fragment**: github.com
* **Title**: {title} | $2 by $1
* **URL matcher**: github[.]com/([A-Za-z0-9_-]+)/([A-Za-z0-9_-]+)
Tab title will be: "FuryBee/chrome-tab-modifier: Take control of your tabs | chrome-tab-modifier by furybee"
❌ Match GitHub repositories:
* **Detection**: RegExp
* **URL fragment**: github[.]com/([A-Za-z0-9_-]+)/([A-Za-z0-9_-]+)
* **Title**: I got you GitHub!
Customize GMail title with Title matcher and URL matcher:
* **Detection**: Contains
* **URL fragment**: mail.google.com
* **Title**: @0 | $0
* **Title matcher**: [a-z]*@gmail.com
* **URL matcher**: [a-z]*.google.com
Tab title will be: "[email protected] | mail.google.com"
Github filename as title for blobs:
* **Detection**: RegExp
* **URL fragment**: github[.]com/([A-Za-z0-9_-]+)/([A-Za-z0-9_-]+)/blob/
* **Title**: {#file-name-id-wide}
And now, build your own... 💪
## Known issues
### Local icon path doesn't work
Related issue: [#5](https://github.com/furybee/chrome-tab-modifier/issues/5)
Due to browser security restrictions, this path won't work: `file:///icon.png`.
Your icon will not be shown by Chrome.
Alternatively, you can upload your icon somewhere like [imgur.com](http://imgur.com/) and paste the direct link in your rule.
Another solution consists in transform your image in the [Data URI format](https://en.wikipedia.org/wiki/Data_URI_scheme). Go to [ezgif.com](https://ezgif.com/image-to-datauri) and paste the given output (the long text) in the icon input on your rule.
### Chrome system pages `chrome://`
Related issues: [#11](https://github.com/furybee/chrome-tab-modifier/issues/11), [#14](https://github.com/furybee/chrome-tab-modifier/issues/14)
Pages that start with `chrome://` URL are protected. No content script can be injected then Tab Modifier will not work on these pages.
### Local files `file:///`
Related issue: [#13](https://github.com/furybee/chrome-tab-modifier/issues/13)
By default, extensions don't have access to local files. You have to opt-in "Allow access to file URLs" from `chrome://extensions/?id=hcbgadmbdkiilgpifjgcakjehmafcjai`.
### Protected action is not triggered
Related issue: [#95](https://github.com/furybee/chrome-tab-modifier/issues/95)
Since Chrome 90, the JS event that triggers a refresh or a closure has been reworked. See related issue.
## Development
In case you want to contribute or just want to play with the code, follow the guide.
### Setup
Download and install [NodeJS](http://nodejs.org/download/) v18 to get [npm](https://www.npmjs.org/).
💡 Use `nvm` to allow you to quickly install and use different versions of node via the command line.
Install `yarn` globally:
```bash
npm install -g yarn
```
Clone the project and install dependencies with `yarn`.
Type `yarn dev` to watch your changes inside `src/` folder or type `yarn build` after each change.
### Load local extension in Chrome
Go to `chrome://extensions/` and enable the "Developer mode".
Click on "Load unpacked extension..." and select the project `dist/` folder.
## Donation
A huge thanks to all donators!
If you like this extension and want to support its development, you can make a donation by clicking one of the links below.
- [Buy Me a Coffee](https://www.buymeacoffee.com/xyugxh7bk)
- [Credit Card](https://donate.stripe.com/fZeg1Sgml971dbieUU)
- [Paypal](https://www.paypal.com/donate/?hosted_button_id=T7KZA4MLT5XTU)
## License
See [license](LICENSE.md) file.