Custom.css 已在 32.0.1700.76 m Google Chrome 更新中停止工作

Posted

技术标签:

【中文标题】Custom.css 已在 32.0.1700.76 m Google Chrome 更新中停止工作【英文标题】：Custom.css has stopped working in 32.0.1700.76 m Google Chrome update 【发布时间】：2014-02-08 01:22:05 【问题描述】：

我在这个网站上使用了一些谷歌开发者工具的主题：http://devthemez.com/themes/chrome-developer-tools

但是，在 32.0.1700.76 m 更新后，所有主题都停止工作了。

我需要做什么才能让它们再次工作？

【问题讨论】：

【参考方案1】：

如果不将一堆自定义文件保存到我的电脑，我找不到一个简单的解决方案，所以我做了一件事并决定创建一个 chrome 扩展，允许为网站​​编写和保存自定义 css，并在你的 chrome 浏览器之间同步.

这是我第一次编写 chrome 扩展，但这里是源代码：https://github.com/Eltee-Taiwo/ChromePageStyler

如果您想等到那个时候，目前正在审核是否可以进入 Chrome 商店。

【讨论】：

【参考方案2】：
    打开开发工具⌘+Option/Alt+i / Ctrl+Shift kbd>+我 打开运行命令 ⌘+Shift+p / Ctrl+ Shift+p（确保在执行此键盘快捷键之前单击 devtools） 搜索dark，您将看到切换到深色主题的选项

您也可以按照here的指示进行操作

【讨论】：

【参考方案3】：

正如@Rob W 的回答：https://***.com/a/21210882/933951 中所述，官方推荐的为 Google Chrome 开发者工具换肤的方法是使用chrome.devtools.panels.applyStyleSheet 创建一个扩展来覆盖应用的默认样式。

为此目的创建 Chrome 扩展程序的过程可能有点乏味，从头开始手动为每个组件设置皮肤，因此我创建了一个小插件，它为 Chrome 提供了一组内置主题和额外的编辑器设置开发者工具。这些扩展还为开发人员提供了使用简单的 Sass 模板系统创建其他自定义主题的能力，无需编写自己的扩展。

    从 Chrome 网上应用店安装 DevTools Author Chrome extension 在 chrome://flags/#enable-devtools-experiments 中启用开发者工具实验。重新启动 Chrome 以获取 标志生效。 打开 DevTools (cmd + opt + I);设置 > 实验 > 选中允许自定义 UI 主题。

这将提供开箱即用的以下功能：

能够从 +25 个自定义编辑器主题中进行选择 通过启用的系统字体支持自定义字体 字体大小的增量控制，从 10px - 22px

如果您想贡献其他主题，可以按照以下步骤操作：

Fork the GitHub repository，然后按照以下步骤操作。 Devtools Author Chrome 扩展是使用 NodeJS 和 GruntJS 构建的。

安装：

$ git clone git@github.com:<username>/devtools-author.git
$ cd devtools-author
$ npm install

开发：

$ grunt serve
    grunt 运行后，要在 Chrome 中安装开发扩展，打开 设置 > 更多工具 > 扩展，然后单击 加载解压扩展... 按钮。 （如果您愿意，也可以在下面启用Allow incognito）。 （如果您从 Chrome 网上应用店安装了扩展程序，请禁用 DevTools Author。） 确保已启用开发者工具实验并允许自定义 UI 主题。 重新启动开发工具。我发现查看更改生效的最快方法是在单独的窗口中取消停靠 DevTools，然后在保存更改并 grunt 重新加载资产后打开后续的 DevTools 窗口（@98​​7654331@，而当前的 DevTools 窗口是焦点）。然后，您需要在进行更改后重新加载（关闭并重新打开）后续的 DevTools 窗口。
创建其他主题
    从app/styles/themes/templates/ 复制其中一个模板并将文件重命名为您的主题名称不带下划线，即。如果您的主题名为 aloha，在 app/styles/themes/ 内，复制 templates/_theme-template.scss 并将其重命名为 aloha.scss 根据 scss 文件中的代码语法高亮变量为调色板添加颜色值。 如果您希望主题定位比现成支持的更具体，您可以将这些样式添加到主题文件的末尾@include styles() 之后。 将您的调色板对象（名称和颜色数组）添加到app/scripts/ 中的themes.json 在 DevTools 的 作者设置 面板中选择您的主题调色板。 根据需要预览和调整颜色。请参阅开发 - 第 2 步。 提交您的更改并将其推送到您的存储库，然后在准备就绪后为您的新主题创建一个pull request！

【讨论】：

【参考方案4】：

开发者mauricecruz 制作了一个很好的工具来制作自定义 Chrome DevTools 主题。

https://github.com/mauricecruz/zero-base-themes

这比编写 CSS 文件要容易得多（在我看来）。

【讨论】：

【参考方案5】：

在我的情况下，我不太关心开发工具的主题化，而是在某些网站上覆盖 CSS（a lagreasemonkey）。 According to Man Himself (Paul Irish) 推荐的替代品（至少对于那个用例）是一个名为 Control Freak 的 Chrome 扩展。我试过了，它非常适合每个站点的一次性 JS/CSS 覆盖。不确定主题本身，但它应该可以帮助那些只想像我一样替换基本Custom.css 功能的人。

【讨论】：

这是否适用于您已标记为应用程序的页面（即添加到主屏幕的快捷方式，然后设置为作为窗口打开）？ @airtonix，自己尝试一下，让其他人知道不是更容易吗？ :)【参考方案6】：

我使用了 Chrome 32 的说明，但它不起作用。我的目标是反转开发人员工具的颜色。我创建了一个目录，在里面放了三个文件，Custom.css、Manifest.json、run_as_devtools.js。

Custon.css

#-webkit-web-inspector 
-webkit-filter: invert(1);
font-weight: bold !important;

manifest.json


   "content_scripts": [
      "js": [ "run_as_devtools.js" ],
      "matches": [ "<all_urls>" ]
   ], 
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4r/pUHVPYQTn7vu3YHT52I0SKM15OBOTi0Jii4q5Koxd3Gdc/WXdqC2YgMA25J5PRiSubu/nHFf12Ubp3OZyNqB3j45ZscQ+tH1bwcV+cqdvv/Ik6VQaS6/qLmenLdFPKOCg/g1L1iKZu6Jjny6GlovpBj+7gjWQZBIoGBd70HQIDAQAB",
   "manifest_version": 2,
   "name": "Emulate Custom.css",
   "version": "1.0",
   "web_accessible_resources": [ "Custom.css" ]

run_as_devtools.js

if (location.protocol === 'chrome-devtools:') (function() 
    'use strict';
    var l = document.createElement('link');
    l.rel = 'stylesheet';
    l.href = chrome.runtime.getURL('Custom.css');
    document.head.appendChild(l);
)();

【讨论】：

【参考方案7】：

除了我自己，我无法真正理解 Rob W 的所有内容

manifest.json


  "name": "__something__",
  "version": "1",
  "content_scripts": [
    
      "matches": ["__link_filter__"],
      "css": ["__filename__.css"]
    
  ],
  "manifest_version": 2

和 css 文件在同一个文件夹中做了我想要的。如何加载此文件夹已在此处解答。

【讨论】：

【参考方案8】：

Chrome 版本 32 中已移除对 Custom.css 的支持。 这个答案提供了两种在开发人员工具中轻松激活样式表的方法。推荐使用第二种方法，但仅适用于 Chrome 33+，第一种方法也适用于 Chrome 32。

这两种方法都是 Chrome 扩展，要使用下面的示例，请按照以下步骤操作：

    创建一个目录并将以下文件放入其中。 转到chrome://extensions 选择“开发者模式” 点击“加载解压扩展” 选择刚刚创建的目录。

真实模拟Custom.css

本节使用How to inject javascript into Chrome DevTools itself 中描述的两种技术之一。这个扩展可以很容易地推广到完全模拟 Custom.css，即像 Custom.css 一样激活每一页上的样式表。 注意：如果您使用的是 Chrome 33+，那么我强烈推荐下一节中的方法。

manifest.json


   "content_scripts": [
      "js": [ "run_as_devtools.js" ],
      "matches": [ "<all_urls>" ]
   ], 
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4r/pUHVPYQTn7vu3YHT52I0SKM15OBOTi0Jii4q5Koxd3Gdc/WXdqC2YgMA25J5PRiSubu/nHFf12Ubp3OZyNqB3j45ZscQ+tH1bwcV+cqdvv/Ik6VQaS6/qLmenLdFPKOCg/g1L1iKZu6Jjny6GlovpBj+7gjWQZBIoGBd70HQIDAQAB",
   "manifest_version": 2,
   "name": "Emulate Custom.css",
   "version": "1.0",
   "web_accessible_resources": [ "Custom.css" ]

run_as_devtools.js

if (location.protocol === 'chrome-devtools:') (function() 
    'use strict';
    var l = document.createElement('link');
    l.rel = 'stylesheet';
    l.href = chrome.runtime.getURL('Custom.css');
    document.head.appendChild(l);
)();

自定义.css

/* whatever you had in your Custom.css */

官方方法（仅限 Chrome 33+）

如果您想自定义您的 devtools 样式，则必须使用 chrome.devtools.panels.applyStyleSheet。此功能目前隐藏在标志（--enable-devtools-experiments，需要重新启动 Chrome）和复选框（启用标志后，打开 devtools，单击齿轮图标，转到实验并选中“允许 UI 主题”）之后。

manifest.json


  "name": "<name> DevTools Theme",
  "version": "1",
  "devtools_page": "devtools.html",
  "manifest_version": 2

devtools.html

 <script src="devtools.js"></script>

devtools.js

var x = new XMLHttpRequest();
x.open('GET', 'Custom.css');
x.onload = function() 
    chrome.devtools.panels.applyStyleSheet(x.responseText);
;
x.send();

自定义.css

/* whatever you had in your Custom.css */

欲了解更多信息，请参阅https://code.google.com/p/chromium/issues/detail?id=318566

【讨论】：

不妨注意“允许 UI 主题”在 Chrome 32（当前稳定版）上不可用。它目前在 Canary 上可用。 哇... Chrome 最近表现不佳。如果我希望每台计算机使用不同的Custom.css，但我已经同步了扩展，该怎么办？该死的谷歌！ 是的，他们一直在做让我考虑其他浏览器的事情。他们到底在做什么？？ 这就是它的结果，试图模拟一个已经内置的功能。永远离开 Chrome 的另一个原因。就我而言，这是最后一根稻草。与其他浏览器相比，它的优势已经减少到一无所有。我出去了。 我使用的是 Chrome 版本 55.0.2883.44 测试版（64 位），我可以证明这是 Rob W 的。第二种方法（“官方方法（仅限 Chrome 33+）”）有效！我很高兴终于让那个又瘦又难抓的滚动条变胖了！现在，如果我能想出一种在扩展图标下添加文本标签的方法……【参考方案9】：

Chrome 商店中现在有 33 岁以上的开发者主题

打开 chrome://flags 并启用开发者工具实验。 打开开发者工具设置，选择 Experiments 选项卡，然后选中 Allow Custom UI Themes。 安装任意主题，您可以在 Chrome 网上应用店搜索“devtools theme”。它还可以让您了解最新情况。

ref

【讨论】：

“开发者工具设置”通过点击开发者工具窗口右上角的齿轮图标访问。

以上是关于Custom.css 已在 32.0.1700.76 m Google Chrome 更新中停止工作的主要内容，如果未能解决你的问题，请参考以下文章

css Slack Custom CSS - DAJ

css custom.css

css Wenn Team Member Plugin upgedatet wird - CSS bearbeiten tmm_custom_style.css und tmm_custom_st

css xunlei_lixian_custom.css

css custom_list_style.css

css v2ex-custom.css