Idea: Conditional Chrome theme based on environment [closed] - google-chrome

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
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.

Answer 1

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
Create a theme - See the Chrome themes documentation.
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.
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.
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:
management
tabs

Answer 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');