Question

作为一名Web开发人员，我一直致力于不同环境（本地，登台，测试，制作）的项目。我主要从事Drupal项目。我不能告诉你我通过浏览网站从本地生产到生产的次数。然后不小心改变了我本地环境中真正应该改变的生产设置。

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

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

这可以避免许多在不同环境中工作的人产生混淆。不仅适用于开发人员，也适用于“内容”人士。

可悲的是，我不知道如何使用这种行为对Chrome主题进行编码。

Answer 1

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

切换主题的主要扩展。
主题＃1，主题＃2等（每个额外主题的额外扩展名）。

如何

创建主题 - 请参阅the Chrome themes documentation。
绑定chrome.tabs.onUpdated事件以侦听选项卡更改，并可能将已知“theme-tabs”的状态保存在哈希中（通过tabId）。当标签的URI不再是“特殊”时，请不要忘记使用delete运算符删除tabId。
使用background script创建另一个扩展程序。
添加chrome.tabs.onActivated ^{警告：请参阅下面的}事件，以侦听标签更改。此事件传递给windowId和tabId。使用在步骤2中创建的哈希来检查是否必须更改主题。
如果网址与特定模式匹配，请使用chrome.management.setEnabled方法激活新主题。

步骤3-4的替代方法：使用Content scripts call方法作为背景页面。然后可以在"content_scripts"，"matches"，onActivated部分设置match patterns。

^警告： onActiveChanged 事件为manifest file。在Chrome 18之前，该活动名为 {{1}} 。

步骤2-4中所述的扩展程序需要以下not supported prior Chrome 18：

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

Idea：基于环境的有条件Chrome主题

2 个答案:

如何