0

We have several environments of our web application, e.g. Development, QA and Production. One of the frequent and risky mistakes that people do is changing the configuration in the wrong environment.

Is there any Chrome plugin where I can configure the URL of the environment so that one can distinguish config tool pages by some prominent change, i.e. colour of header etc.?

For example when I am in the Production environment, the header becomes red, otherwise green in dev. So that I know I have to be extra careful when it's red.

3

Is URLColors perhaps the extension you're looking for? https://chrome.google.com/webstore/detail/urlcolors/jjccpcminoppplpmcfghflolejbdkekm

1

It is amazing to me that you would ask this question because 6 months ago I set out to build this extension (I was going to name it Tempeh) after finding no viable alternative.

What I found 6 months ago was that there is no Chrome extension that behaved as you outlined. When I decided to develop it I found a few things

  1. The "URL" bar in chrome is called the OmniBox and there is an extension API that lets you interact with it
  2. Currently there is no way to change the color of the OmniBox.

After some very extensive searching I found a form post that stated there was an API call which let you change the color of the OmniBox. The post also mentioned the release number that removed this functionality (I don't have it - it was not a major release).

So to answer you question directly - there is no extension that acts exactly in the manner you want because it's not allowed via the API. Furthermore I have not found an extension that uses some other type of notification, and I abandoned the project because I am not a front end developer and all the "notification" actions I wrote (change background color, put a thin border around viewport, etc) turned out to be ugly and disheartening (changing the omnibox color is much more elegant IMO).

If however you are up to the challenge I can now think of a decent way to implement this. I would probably implement a tab in devtools using the devtools api that let the user (a developer) set websites into categories and assigned color to. Then when one of those pages is visited you notify the developer somehow....

1

Stylish

Customize any website to your color scheme in 1 click, thousands of user styles with beautiful themes, skins & free backgrounds.

★ Give Reddit a dark mode, use a minimalist Facebook, or change the look of Google, Twitter and any of your favorite sites

★ Customize backgrounds, color schemes, fonts and even animations

★ Easily disable, enable, edit or delete any of your installed themes

★ Create your own user styles (themes) using Stylish’s CSS editor, and share it with millions of Stylish users

Easy to use and allows you to specify URL groups by regular expression or by wild card.

It is pure CSS and always overrides site styles so you don't have to wonder if it is working. Super simple.

Downside maybe: It works on the client, thus the user would have to have it enabled and configured correctly, though it's easy enough to export and import styles.

0

Why expect Chrome to do it for you and what about when you are testing for other browsers, you do test for other browsers hopefully, when you can provide this yourselves with very little effort? Browser plug-in facilities are mostly to provide web functionality to those that can't change the sites.

Simple:

If you have an automatic deployment mechanism, such as deployment through Jenkins or git, you could have the background colour of the whole config page automatically changed in colour depending on the phase deployed to.

Also Simple:

Make the background colour for the settings page, on each sever or in each environment, be a colour loaded from a css pages that is not a part of the deployed application but is present, but different, on the Test & QA servers to the production server.

Nearly As Simple

On the settings page include a little JavaScript to change background or add watermark or warning.

function setColourBasedOnServer(){
    if(document.URL.indexOf("TestServer") >= 0){ // Use some string unique to test
        document.body.style.background = 'green';
    }
    if (document.URL.indexOf("QAServer") >= 0){ // Use some string unique to QA
        document.body.style.background = 'amber';
    }
    else {  // NOT Test or QA
         document.body.style.background = 'white'; // Or some sensible default colour
    }
}

And invoke it:

<BODY onload="setColourBasedOnServer();">
  • Yes we have done it this way for custom pages. I am now dealing with Google cloud console which we do not have control over but the project name (env name) is always in the url. I want to change something significant in the page if its production project. Otherwise we have been accidenally doing changes. – Neil Mar 4 '17 at 9:56
  • @SoulMan Have you thought of putting the cloud console inside a frame/div on a custom page? – Steve Barnes Mar 4 '17 at 10:27
0

I have been using Tempermonkey for exactly this use case. I don't have the code at hand, but it was pretty straightforward. Just write a script to prepend a navbar to the page and based on the URL that is loaded change color etc. I also added buttons to open the same page on different stages to compare.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.