Automatically differentiate between different development environments? I made a chrome plugin

I don’t know if you have encountered such a problem: many times a project will have multiple environments, and when there are many browser tabs, it is completely indistinguishable.

In fact, there are 3 development environments here

But from favicon alone, it is impossible to quickly distinguish which from which. To this end, I made a Chrome plugin to easily solve this problem. The effect is as follows

Is it very clear?

install and use

Search "auto dev favicon" directly in the Chrome web store , or directly visit this link https://chrome.google.com/webstore/detail/auto-dev-favicon/obgfnmomampmgjefiodpcknepcecgijg , as follows

After successful installation, you need to enter the configuration page , that is, the page where you can customize the matching domain name, there are 3 entries

1. Click directly on the plugin icon in the upper right corner (recommended)
2. Right-click the plug-in icon in the upper right corner and click "Options"
3. Go to the plugin details page and click "Extension Options"

The following is a simple configuration page

Here is a brief explanation

1. Color refers to the background color of the small label, there are 8 preset colors to choose from
2. The name refers to the text content of the small label. Due to the limited width, it supports up to two Chinese characters or three English characters
3. Matching refers to domain name matching, here only the hostname is matched, the matching rule is "pattern matching", and multiple can be filled in separated by English commas, such as here dev* means to match all starting with dev , please refer to URL_Pattern_API for specific rules
4. Remember to click Save after the operation is complete, it will automatically sync to your Chrome account

other instructions

If the app store is temporarily unavailable due to the network environment, you can get the source files on github and install them in developer mode.

https://github.com/XboxYan/auto-dev-favicon-chrome-plugin

Or install the Edge add-in Microsoft Edge Addons , the advantage is that it is more friendly to network conditions

If you have any questions or comments, you can submit an issue or contact me: [e-mail]

Enjoy!