Aplicando estilo personalizado a páginas internas do Chrome

Question

Eu quero aplicar estilos personalizados às páginas internas usadas pelo chrome. (Como a nova página da guia.)

Eu costumava fazer o que é dito aqui:

Hackeie o Chrome para exibir suas páginas internas com preto fundo

Mas não funciona mais porque o Chrome 32 não suporta mais o Custom.css.

Existe uma maneira de estilizar as páginas internas do Chrome no Chrome 33 +?

    

Answer 1

Ok, pesquisei um pouco sobre isso e descobri que você pode emular custom.css usando extensões.

Veja como fazer isso:

1. Crie um diretório e coloque os arquivos que criaremos neste guia dentro dele.
2. Ir para chrome://extensions
3. Selecione "modo de desenvolvedor"
4. Clique em "Carregar extensão descompactada"
5. Selecione o diretório que você acabou de criar.

Agora, abra o diretório que você acabou de criar e crie esses arquivos:

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

Isso inserirá o CSS somente nas páginas internas do Chrome, pois todas elas têm o protocolo chrome: . Todas as regras adicionadas a Custom.css aqui serão inseridas nas páginas internas do Chrome.

v es Bves es es vB Bv v es es es es es es es es es es es es v es es es v v v es es es v vves v esv esv esv esv esv esv eses Ele é carregado do cache de https://www.google.com/_/chrome/newtab?espv=210&ie=UTF-8 . Este URL é dividido em navegadores que não são do Chromium e redireciona para a página inicial dos navegadores do Chromium, exceto o Google Chrome 32 +.

EDIT: Encontrei uma configuração em chrome://flags , que habilita extensões em chrome:// páginas. Disponível aqui: chrome://flags/#extensions-on-chrome-urls . Mas, novamente, neste caso você terá que especificar as páginas internas específicas do chrome em vez de <all_urls> em manifest.json , por exemplo: chrome://newtab , etc etc.

    

Answer 2

Copiando o mesmo conteúdo de aqui ..

Se você quiser personalizar seu estilo devtools, o chrome.devtools.panels.applyStyleSheet deve ser usado. Esse recurso está oculto por trás de um sinalizador (--enable-devtools-experiments, requer o relançamento do Chrome) e uma caixa de seleção (depois de ativar o sinalizador, abra o devtools, clique no ícone de marchas, vá para Experimentos e marque "Permitir temas de interface do usuário ").

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