Skip to content

Am I doing this in prod ? Web browser extension to display dev environments info (available for Chome and Firefox)

License

Notifications You must be signed in to change notification settings

floragc-octo/am-i-doing-this-in-prod

Repository files navigation

Am I doing this in Prod ?

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)


What does it do

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)

Getting Started

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

Customize/Add an environment

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 for www.backend.testing.myapp.fr

Don't forget to hit the save button !

Export Settings

You'll get a json file with your settings.

Import 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"
    }
]

Built With

Vanilla JS only


Authors

with the participation of


Versioning

Work in Progress


License

This project is licensed under the MIT License - see the LICENSE.md file for details

About

Am I doing this in prod ? Web browser extension to display dev environments info (available for Chome and Firefox)

Topics

Resources

License

Stars

Watchers

Forks