Custom.css has stopped working in 32.0.1700.76 m Google Chrome update
Support for Custom.css
has been removed from Chrome in version 32.
This answer provides two methods for easily activating style sheets in the developer tools. The second method is recommended, but only works for Chrome 33+, the first method also works for Chrome 32.
Both methods are Chrome extensions, to use the examples below, follow the following steps:
- Create a directory and put the following files in it.
- Go to
chrome://extensions
- Select "Developer mode"
- Click on "Load unpacked extension"
- Select the directory you just created.
True emulation of Custom.css
This section uses one of the two techniques described at How to inject javascript into Chrome DevTools itself. This extension can easily be generalized to fully emulate Custom.css, i.e. activate the style sheet on every page like Custom.css.
Note: If you're using Chrome 33+, then I strongly recommend the method in the next section over this one.
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);
})();
Custom.css
/* whatever you had in your Custom.css */
Official method (Chrome 33+ only)
If you want to customize your devtools style, chrome.devtools.panels.applyStyleSheet
has to be used. This feature is currently hidden behind a flag (--enable-devtools-experiments
, requires relaunch of Chrome) and a checkbox (after enabling the flag, open the devtools, click on the gears icon, go to Experiments and check "Allow UI themes").
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();
Custom.css
/* whatever you had in your Custom.css */
For more info, see https://code.google.com/p/chromium/issues/detail?id=318566
There is now developer themes in Chrome Store for 33+
Open chrome://flags and Enable Developer Tools experiments. Open developer tools settings, select Experiments tab, and check Allow Custom UI Themes. Install any theme, you can search for “devtools theme” on the Chrome Web Store. It’ll also keep you up to date.
ref
I couldn't really understand everything from Rob W but for me
manifest.json
{
"name": "__something__",
"version": "1",
"content_scripts": [
{
"matches": ["__link_filter__"],
"css": ["__filename__.css"]
}
],
"manifest_version": 2
}
and css file in same folder did what I wanted. How to load this folder is already answered here.