floragc-octo / am-i-doing-this-in-prod Goto Github PK

View Code? Open in Web Editor NEW

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

License: MIT License

JavaScript 60.25% HTML 13.78% CSS 25.97%

am-i-doing-this-in-prod's Introduction

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