Применение собственного стиля к внутренним страницам Chrome

Question

Я хочу применить пользовательские стили к внутренним страницам, используемым Chrome. (Как и на новой вкладке.)

Я делал то, что сказано здесь:

Взломать Chrome, чтобы показать его внутренние страницы с черным фоном

Но это больше не работает, потому что Chrome 32 больше не поддерживает Custom.css.

Есть ли способ стилизовать внутренние страницы Chrome в Chrome 33+?

Answer 1

Итак, я немного искал по этому вопросу и обнаружил, что вы можете эмулировать custom.css с помощью расширений.

Вот как это сделать:

1. Создайте каталог и поместите в него файлы, которые мы создадим в этом руководстве.
2. Перейти к chrome://extensions
3. Выберите "Режим разработчика"
4. Нажмите "Загрузить распакованное расширение"
5. Выберите каталог, который вы только что создали.

Теперь откройте каталог, который вы только что создали, и создайте эти файлы:

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);
})();

Пользовательские CSS

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

Это вставит CSS только во внутренние страницы Chrome, поскольку все они имеют протокол chrome: . Каждое правило, которое вы добавляете в Custom.css будет вставлено на внутренние страницы Chrome.

Обратите внимание, что страница «Новая вкладка» НЕ является внутренней страницей Chrome. Он загружается из кэша https://www.google.com/_/chrome/newtab?espv=210&ie=UTF-8 . Этот URL-адрес разрывается в браузерах, отличных от Chromium, и перенаправляет на домашнюю страницу в браузерах Chromium, кроме Google Chrome 32+.

РЕДАКТИРОВАТЬ: Я нашел параметр в chrome://flags которые позволяют расширения на страницах chrome:// . Доступно здесь: chrome://flags/#extensions-on-chrome-urls . Но опять же, в этом случае вам нужно будет указать специфичные внутренние страницы chrome вместо <all_urls> в manifest.json , например: chrome://newtab и т.д. И т.д.

Answer 2

Копирование того же контента отсюда..

Если вы хотите настроить свой стиль devtools, следует использовать chrome.devtools.panels.applyStyleSheet. Эта функция в настоящее время скрыта за флагом (--enable-devtools-эксперименты, требуется перезапуск Chrome) и флажком (после включения флага откройте devtools, щелкните значок шестеренок, перейдите в раздел Эксперименты и установите флажок "Разрешить темы пользовательского интерфейса" «).

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