14

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

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

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

对于在不同环境中工作的许多人来说，这可以避免很多混乱。不仅适用于开发人员，也适用于“内容”人员。

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

4

2 回答 2

9

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

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

如何

  1. 创建主题 - 请参阅Chrome 主题文档。
  2. 绑定一个chrome.tabs.onUpdated事件以侦听选项卡更改，并可能将已知“主题选项卡”的状态保存在哈希中（通过 tabId）。当Tab的URI不再使用delete操作员时，请不要忘记删除标签。
  3. 使用背景脚本创建另一个扩展。
    添加警告：请参阅下面的事件，以侦听选项卡更改。这个事件被传递了一个 windowId 和 tabId。使用在步骤 2 中创建的散列来检查主题是否必须更改。chrome.tabs.onActivated
  4. 如果 URL 与特定模式匹配，则使用该chrome.management.setEnabled方法激活新主题。

步骤 3-4 的替代方法：使用内容脚本调用背景页面的方法。然后可以在清单文件的,部分中设置匹配模式。"content_scripts""matches"

警告： Chrome 18 之前不支持onActivated该事件。在 Chrome 18 之前，该事件被称为.onActiveChanged

步骤 2-4 中描述的扩展需要以下权限：

于 2012-04-05T14:22:57.607 回答
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');
于 2014-01-15T17:42:05.443 回答