Have you ever come close to create a silly product on production while thinking you were on your testing tab ?
This extension display a ribbon on specific pages in order to have a quick view of which environment you're in !
Download in Chrome web store
: Am I doing this in Prod ?
Download for Firefox
(not 100% supported yet, see below) : Am I doing this in Prod ? (experimental)
This extension allows to :
- Add an env from a specific page and customize the :
- URL,
- Ribbon's background color
- Label (max 10 characters)
- Add a default env and customize it
- Export your configuration in JSON format (to share with your team, maybe)
- Import a configuration
This extension lacks :
- a full support of Firefox (it's a little bit broken, see Issues)
The settings page is accessible from the plugin options or by clicking on the plugin's icon on your plugins' menu (the left one on the screenshot below)
(devnote: accessing the settings and changing colors from the icon's setting may be troublesome in Firefox)
Once you have installed the extension you can start to add pages/environment or import existing settings
Once you're on the settings' page (see "Getting started") you can click on "Add current page to env" or "Create a new env"
You can cut parts of the url as the extension only checks if the page's url contains the url specified.
For example,
testing.myapp
will work forwww.backend.testing.myapp.fr
Don't forget to hit the save button !
You'll get a json file with your settings.
Usually you'll get an file to import by previously exporting settings.
If you need to know the structure, it may look like this :
[
{
"site": "myurl.fr",
"label": "PROD",
"color": "#7c6a6a"
},
{
"site": "my_other_url.fr",
"label": "TESTING",
"color": "#7585ff"
}
]
Vanilla JS only
- Flora GC GitHub
with the participation of
- Simon Belbeoch GitHub
Work in Progress
This project is licensed under the MIT License - see the LICENSE.md file for details