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

Community
  • 1
Ram Rachum
  • 5,210
  • 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 '14 at 16:44

2 Answers2

4

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.

Akshat Mittal
  • 2,253
  • 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 '14 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. – Akshat Mittal Mar 21 '14 at 09: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 '14 at 16:43
  • Okay, Thanks for correcting me. But I thought they did, coz I remember I did something similar for Dev Tools. – Akshat Mittal Mar 21 '14 at 17:56
  • @RamRachum Here, I have edited it. It should now work. Just read the "Edit" part at the end. – Akshat Mittal Mar 25 '14 at 04:45
  • Works like a charm, bounty awarded. I realize now that in addition, I will need a way to add custom.css immediately on page load before extensions are loaded, so if you know how to do that, please share. – Ram Rachum Mar 25 '14 at 15:13
  • 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. – Akshat Mittal Mar 26 '14 at 08:33
  • With developer mode enabled, extensions certainly used to allow the author of stylesheets to change the look and feel of Chrome’s internal pages. I clearly remember writing a few to change the appearance of Chrome’s internal pages and developer tools. I have the whole of the CSS file that I wrote to customize the appearance of Dev Tools, if you would like to take a look. Chrome’s guide for customizing pages used to reside here: https://code.google.com/p/chromium/wiki/ThemeCreationGuide However, it now redirects to some bug collection page. – Irfan May 11 '23 at 15:09
  • Although I have not written any extensions lately, which I used to do a lot during the 2012–2014 period, so I cannot say with certainty that the following should hold true, but the use of "location.url === 'chrome:'" in the .js file appears redundant. If you were to change matches directive in your manifest.json to "chrome:*", then I think it should do the job of matching for the proper protocol or for internal URLs starting with chrome: protocol. – Irfan May 11 '23 at 15:16
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 */
Community
  • 1
Vysakh
  • 308