Идея: условная тема Chrome, основанная на среде

Как веб-разработчик, я постоянно работаю над проектами в разных средах (локальном, промежуточном, тестовом, производственном). В основном я работаю над проектами Drupal. Я не могу сказать вам, сколько раз меня приводили с локального производства, просто просматривая сайт. А затем, случайно изменив настройку на производство, которая действительно должна была быть изменена только в моей локальной среде.

Итак, вот идея: тема Chrome, которая меняет цвет в зависимости от поддомена сайта.

Например: на local.mysite.com * цвет браузера должен быть зеленым, на staging.mysite.com * он должен быть синим и на mysite.com * цвет должен быть стандартным хром-серым.

Это может избежать большого путаницы для многих людей, работающих в разных средах. Не только для разработчиков, но и для "контентных" людей.

К сожалению, я не знаю, как закодировать тему Chrome с таким поведением.

Ответ 1

Темы не являются динамическими, поэтому решение не является простым.
Возможно создание функции с помощью API управления. Требуется не менее трех расширений:

Основное расширение для переключения тем.
Тема # 1, тема # 2 и т.д. (дополнительное расширение для каждой дополнительной темы).

Как

Создать тему - см. документацию по темам Chrome.
Привязать событие chrome.tabs.onUpdated, чтобы прослушать изменения вкладок и, возможно, сохранить состояние известных "тем-вкладок" в хеше (по tabId). Не забудьте удалить tabId, если UIB-вкладка больше не является "специальным", используя оператор delete.
Создайте еще одно расширение с background script.
Добавьте chrome.tabs.onActivated ^{Предупреждение: см. Ниже} чтобы прослушать изменения вкладок, Это событие передается windowId и tabId. Используйте хэш, созданный на шаге 2, чтобы проверить, нужно ли изменять тему или нет.
Если URL-адрес соответствует определенному шаблону, активируйте новую тему, используя метод chrome.management.setEnabled.

Альтернативный подход для шага 3-4: используйте Скрипты содержимого до вызвать метод фоновой страницы. шаблоны соответствия могут быть затем установлены в файле манифест, в разделе "content_scripts", "matches".

^{Предупреждение}: onActivated событие не поддерживалось до Chrome 18. До Chrome 18 событие называлось onActiveChanged.

Для расширения, описанного в шагах 2-4, требуется следующее permissions:

Ответ 2

Мое решение - использовать PHP для определения того, к какому серверу подключаюсь, а затем обновлять административные экраны моего приложения (WordPress, Drupal и т.д.) с определенным цветом. Вы также можете отображать цветную панель в верхней части локальных и промежуточных сайтов.

Вот что я делаю для экранов администратора WordPress:

// 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');
}

И затем я использовал это, чтобы показать конкретные цвета в окне администратора WordPress:

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