14

As a web developer I'm constantly working on projects in different environments (local, staging, testing, production). I mostly work on Drupal projects. I can't tell you the number of times I've been led from local to production by just browsing the site. And then accidentally changing a setting on production that was really only supposed to be changed on my local environment.

So here's an idea: A Chrome theme that changes color depending on the sub domain of a site.

For example: on local.mysite.com* the browser chrome should be green, on staging.mysite.com* it should be blue, and on mysite.com* the color should be standard chrome grey.

This could avoid a lot of confusion for a lot of people working in different environments. Not only for developers, also for "content" people.

Sadly, I have no idea how to code a Chrome theme with that kind of behavior.

Pacerier
  • 86,231
  • 106
  • 366
  • 634
TD540
  • 1,728
  • 3
  • 14
  • 26
  • 1
    That's certainly a fantastic idea. I've often found myself making that same mistake! I'm fairly sure the Chrome theme format doesn't allow this sort of dynamic theming, though. – Xenon Apr 05 '12 at 11:21
  • I saw something similar to this recently. It used a greasemonkey script to overlay coloured info/warning boxes based on url of current page. I can't find it again, but it shouldn't be too hard to put together. – jon Apr 05 '12 at 11:51
  • Chrome themes make this super tricky, but I had a quick go: https://github.com/roc/colorchrome – Ralph Cowling Oct 19 '18 at 10:15

2 Answers2

9

Themes are not dynamic, so the solution is not straightforward.
It's possible to create the feature using the management API. At least three extension are needed:

  • The main extension for switching themes.
  • Theme #1, theme #2 etc (an extra extension for every additional theme).

How to

  1. Create a theme - See the Chrome themes documentation.
  2. Bind a chrome.tabs.onUpdated event to listen for tab changes, and possibly save the state of known "theme-tabs" in a hash (by tabId). Don't forget to remove the tabId when the tab's URI is not "special" any more, using the delete operator.
  3. Create another extension, with a background script.
    Add a chrome.tabs.onActivated Warning: See below event, to listen for tab changes. This event is passed a windowId and tabId. Use the hash, created in step 2, to check whether the theme has to be changed or not.
  4. If the URL matches a certain pattern, activate the new theme using the chrome.management.setEnabled method.

Alternative approach for step 3-4: Use Content scripts to call a method the background page. The match patterns can then be set in the manifest file, at the "content_scripts", "matches" section.

Warning: The onActivated event was not supported prior Chrome 18. Before Chrome 18, the event was called onActiveChanged.

The extension as described in steps 2-4 requires the following permissions:

Community
  • 1
  • 1
Rob W
  • 341,306
  • 83
  • 791
  • 678
2

My solution is to use PHP to detect what server I am connected to and then update Administrative screens of my application (WordPress, Drupal etc.) with a specific color. You could also display a color bar at the top of local and staging sites as well.

Here is what I do for WordPress admin screens:

// determine if this is development, staging or production environment
if (strpos(home_url(),'http://localhost') !== false)   
{
    define('MY_ENVIRONMENT', 'DEV');
}
else if (strpos(home_url(),'<enter staging URL here>') !== false)
{
    define('MY_ENVIRONMENT', 'STAGE');
}
else
{
    define('MY_ENVIRONMENT', 'PROD');
}

And then I used this to show specific colors in WordPress admin screen:

function change_admin_color($result) {
  return (MY_ENVIRONMENT== 'PROD' ? 'sunrise' : (MY_ENVIRONMENT== 'STAGE' ? 'ocean' : 'fresh'));
}
add_filter('get_user_option_admin_color','change_admin_color');
zdenekca
  • 1,174
  • 8
  • 8