4

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+?

1
  • 2
    Other vendors allow freedom and will provide better flexibility. You could try a Chrome variant like (Chromium?), Iron, Comodo, Torch, etc. Most tend to forgo the iron-fisted, tyranical, dictatorial, fascism that Google has come to embrace and enforce on users.
    – Synetech
    Mar 21, 2014 at 16:44

2 Answers 2

4
+100

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.

9
  • Tried it, it didn't work. I tried the settings page and it didn't apply there. Also, I'd prefer a solution that doesn't use an extension because these might load too late for some uses. Something more internal to Chrome would be better.
    – Ram Rachum
    Mar 20, 2014 at 23:44
  • Yes, you are right. I just realized that Google disabled running of Content Scripts on Chrome's internal pages. So far, I have found no way to modify Internal Pages. Mar 21, 2014 at 9:12
  • That’s not new; extensions have never applied to Chrome pages. There is (was?) only a very limited set of things extensions could do to Chrome itself (e.g., replace the NTP), but other things like Google’s own screenshot extension could not work on chrome:// pages.
    – Synetech
    Mar 21, 2014 at 16:43
  • Okay, Thanks for correcting me. But I thought they did, coz I remember I did something similar for Dev Tools. Mar 21, 2014 at 17:56
  • 1
    Try adding "run_at": "document_start" in manifest.json file. That will load the js before the page loads and technically, that is before all the other extensions load (if they don't have run_at by themselves). I am not sure this would work. Mar 26, 2014 at 8:33
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 */
2
  • 1
    What makes you think this'll work for chrome:// pages?
    – Ram Rachum
    Mar 25, 2014 at 10:07
  • Since it has got the correct version you were searching for (33+)..
    – Vysakh
    Mar 25, 2014 at 11:18

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .