Coder Social home page Coder Social logo

yurifrl / am-i-doing-this-in-prod Goto Github PK

View Code? Open in Web Editor NEW

This project forked from floragc-octo/am-i-doing-this-in-prod

0.0 1.0 0.0 782 KB

Am I doing this in prod ? Browser extension to display dev environment infos

License: MIT License

JavaScript 57.58% HTML 14.70% CSS 27.72%

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 !


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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.