Applying custom style to internal Chrome pages

Question

I want to apply custom styles to the internal pages used by chrome. (Like the new tab page.)

I used to do what is said here:

Hack Chrome to show its internal pages with black background

But it no longer works because Chrome 32 doesn't support Custom.css anymore.

Is there a way to style internal Chrome pages in Chrome 33+?

Answer 1

Okay, so I searched a bit on this and found that you can emulate custom.css using Extensions.

Here's how to do it:

1. Create a directory and put the files we will create in this guide inside it.
2. Go to chrome://extensions
3. Select "Developer mode"
4. Click on "Load unpacked extension"
5. Select the directory you just created.

Now, open the directory you just created and create these files:

manifest.json

{
   "content_scripts": [{
      "js": [ "inst.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" ]
}

inst.js

if (location.protocol === 'chrome:') (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 */

This will insert the CSS only to Chrome Internal pages since they all have chrome: protocol. Every rule you add to Custom.css here will be inserted to Chrome's Internal Pages.

Note that, the New Tab page is NOT Chrome's Internal page now. It is loaded from cache of https://www.google.com/_/chrome/newtab?espv=210&ie=UTF-8. This URL breaks in non-Chromium browsers and redirects to homepage on Chromium Browsers except Google Chrome 32+.

EDIT: I have found a setting in chrome://flags which enable extensions on chrome:// pages. Available here: chrome://flags/#extensions-on-chrome-urls. But again, in this case you'll have to specify the scpecific chrome internal pages instead of <all_urls> in manifest.json, eg: chrome://newtab, etc etc.

Answer 2

Copying the same content from here..

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 */