Idea: Conditional Chrome theme based on environment
environment-variables, google-chrome, google-chrome-devtools, google-chrome-extension, google-chrome-theme
Solution
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
Problem
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.