想法：基于环境的条件 Chrome 主题 [关闭]答案

【问题标题】：Idea: Conditional Chrome theme based on environment [closed]想法：基于环境的条件 Chrome 主题 [关闭]
【发布时间】：2012-04-19 03:04:59
【问题描述】：

作为一名网络开发人员，我一直在不同环境（本地、暂存、测试、生产）中开展项目。我主要从事 Drupal 项目。我无法告诉您仅通过浏览该站点而将我从本地引导到生产的次数。然后不小心更改了实际上只应该在我的本地环境中更改的生产设置。

所以这里有一个想法：根据站点的子域改变颜色的 Chrome 主题。

例如：在 local.mysite.com* 上，浏览器 chrome 应该是绿色，在 staging.mysite.com* 上应该是蓝色，而在 mysite.com* 颜色应为标准铬灰色。

这可以避免很多在不同环境中工作的人的困惑。不仅适用于开发者，也适用于“内容”人员。

遗憾的是，我不知道如何编写具有这种行为的 Chrome 主题。

【问题讨论】：

这当然是一个绝妙的主意。我经常发现自己犯了同样的错误！不过，我很确定 Chrome 主题格式不允许这种动态主题。
我最近看到了类似的东西。它使用greasemonkey 脚本根据当前页面的url 覆盖彩色信息/警告框。找不到了，不过拼起来应该不会太难。
Chrome 主题让这件事变得非常棘手，但我很快就开始了：github.com/roc/colorchrome

标签： google-chrome google-chrome-extension environment-variables google-chrome-devtools google-chrome-theme

【解决方案1】：

主题不是动态的，因此解决方案并不简单。
可以使用management API 创建功能。至少需要三个扩展：

切换主题的主要扩展。
主题 #1、主题 #2 等（每个附加主题的额外扩展）。

如何

创建主题 - 请参阅 the Chrome themes documentation。
绑定chrome.tabs.onUpdated 事件以侦听选项卡更改，并可能将已知“主题选项卡”的状态保存在哈希中（通过tabId）。 Don't forget to remove the tabId when the tab's URI is not "special" any more, using the delete operator.
使用background script 创建另一个扩展。
添加chrome.tabs.onActivated ^{警告：见下文} 事件，以监听标签更改。这个事件被传递了一个 windowId 和 tabId。使用在第 2 步中创建的哈希来检查是否必须更改主题。
如果 URL 与特定模式匹配，请使用 chrome.management.setEnabled 方法激活新主题。

第 3-4 步的替代方法：使用Content scripts 到call 方法的背景页面。然后可以在manifest file 的"content_scripts"、"matches" 部分设置match patterns。

^警告：onActivated 事件是not supported prior 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');

【讨论】：