Alterar CSS padrão do Google Chrome


43

Gostaria de poder alterar o CSS padrão usado pelo chrome, como remover os sublinhados dos links etc. No entanto, não consigo encontrar o arquivo CSS padrão usado pelo Chrome. Alguém sabe onde fica?


3
Se você é um desenvolvedor, recomendo não fazer isso, pois altera o valor padrão de css.
NXqd

Para uma maneira simples de modificar o css usando sua própria extensão muito simples, consulte: stackoverflow.com/questions/21948850/…
User

Respostas:


33

(Atualização 2014) Como o suporte às folhas de estilo do usuário foi removido recentemente do Google Chrome, a única opção para esse momento é usar extensões (como a Stylus * 1), mas elas terão um comportamento diferente (veja abaixo).

A solicitação mais relevante para a reintrodução de folhas de estilo de usuário verdadeiras no Google Chrome é o Problema 347016: suporte a folhas de estilo de usuário .

Por especificação, a regra "folha de estilo do usuário verdadeira" possui uma especificidade de origem mais baixa em cascata do que a regra do autor, mas !importantas regras da folha de estilo do usuário têm uma especificidade de origem mais alta que a !importantregra do autor, independentemente da especificidade do seletor .

As extensões que imitam as folhas de estilo do usuário no Chrome simplesmente injetam (espero) o último elemento de estilo na página, o que tem algumas consequências:

  • esse estilo está no "nível do autor" na cascata; portanto, você deve garantir que sua !importantregra tenha uma especificidade maior do que aquela que você deseja substituir
  • O estilo injetado "your" é exposto aos scripts da página, para que eles possam excluí-lo facilmente à vontade.

* 1 A extensão original, Stylish , está atualmente (2017) em estado de desenvolvimento irregular por um novo mantenedor, por isso aconselho a evitá-la e a usar alternativas como a Stylus mencionada acima.


(A resposta original a seguir agora está obsoleta.)

Depois, não é possível ajustar o css do UA em si, mas você pode criar um estilo de usuário global: inicie o Chrome uma vez --enable-user-stylesheet. Isso criará o <user-data-dir>/<profile>/User StyleSheet/Custom.cssque você pode usar (as alterações são propagadas imediatamente). http://code.google.com/p/chromium/issues/detail?id=2393


2
Isso não parece legítimo com o Chromium atual. Eles podem ter retirado esse recurso desde que esta resposta foi publicada.
Pistos

1
Você está certo, eu atualizei a resposta.
23414

Sim, parece que não é mais suportado (experimentado nos chrome 73 e 76 (canary)) ( Custom.csse User Stylesheetsnão existe mais)
localhostdotdev


4

A única solução que posso pensar nisso é usar um script Greasemonkey que adiciona uma entrada de estilo a cada página html que desativa os sublinhados dos links. Algo como:

<style> a {text-decoration:none} </style>

Este artigo aparentemente pode ajudá-lo a começar:
COMO: Instalar scripts do Google Chrome Greasemonkey (somente Windows)


4
Acho engraçado não poder modificar diretamente o CSS. O Firefox possui userChrome.css e userContent.css, que tornam a aparência da modificação insanamente simples.
George IV

@harrymc - Troquei o <style>código do blockquote para o código para que você não precisa se preocupar com os "espaços extras"
Jared Harley


0

Você pode alterar o estilo de crom ui crom. Lembre-se, se você o alterar, alguns efeitos como Exemplo: #footer {color:#5F5F5F !important;}serão alterados em todos os sites que usam #footer. Você foi avisado. Custom.css muda quase tudo nos navegadores de cromos

Windows XP Google Chrome:

C: \ Documents and Settings \% USERNAME% \ Configurações locais \ Dados do aplicativo \ Google \ Chrome \ Dados do usuário \ Padrão

Crómio:

C: \ Documents and Settings \% USERNAME% \ Configurações locais \ Dados do aplicativo \ Chromium \ Dados do usuário \ Padrão \ Folhas de estilo do usuário

Windows 7 ou Vista (ajuda na seção de ajuda) Google Chrome:

C: \ Users \% USERNAME% \ AppData \ Local \ Google \ Chrome \ Dados do usuário \ Default \ User StyleSheets

Crómio:

C: \ Users \% USERNAME% \ AppData \ Local \ Chromium \ Dados do usuário \ Default \ User StyleSheets

Mac OS X Google Chrome:

~ / Biblioteca / Suporte a aplicativos / Google / Chrome / Padrão / User StyleSheets

Crómio:

~ / Biblioteca / Suporte a aplicativos / Chromium / Padrão / User StyleSheets

Linux Google Chrome:

~ / .config / google-chrome / Padrão / User StyleSheets

Crómio:

~ / .config / chromium / Padrão

Chrome OS

/ Página inicial / Chronos /

Quer uma prova, confira meu tema para o editor do programa http://userstyles.org/styles/95226/chrome-userstyles-editor-hacker-version-cyberat

Sinta-se à vontade para me consultar, crio folhas de estilo de interface do usuário ou sites aleatórios como o facebook google.etc e os deixo em preto e vermelho.


4
Isso não funcionará porque o Chrome 33 abandonou o suporte a estilos de usuário.
Synetech

0

Há um problema ao usar o Stylish como injetor no estilo do
usuário!important : o nível de prioridade do usuário sem é maior que o nível de prioridade do autor sem!important

Então, escrevo um script de usuário como injetor:
https://github.com/zcyzcy88/SelfColle/blob/master/StyleInject.user.js

princípio:
injetar estilo em document.head.prependChild(), antes do estilo do autor da página da web, tem uma prioridade mais baixa, para evitar sobreposições no estilo do usuário.


Olá, e seja bem-vindo ao SuperUser.com. Você seria capaz de aprofundar o que seu script faz exatamente?
Service Manager

Injete o estilo em document.head.prependChild(), para evitar a sobreposição do estilo do usuário.
Sista Fiolen

Se você pode editar sua resposta, para entrar em mais detalhes sobre o que cada parte do seu script faz, seria útil.
Service Manager

0

Em 2018, o Chrome> = 68.0.3440.106 (e provavelmente muito antes)

Eu já tinha a extensão Substituição de Recursos para vários usos de desenvolvimento, então agora uso isso para adicionar minha própria folha de estilo para corrigir algumas más opções de estilo no JIRA (e ocultar mais anúncios - heh heh). A opção que eu uso é "Injetar arquivo" e funciona muito bem. Eu não tentei regexar a configuração 'url' para fazê-la funcionar apenas em sites específicos, mas meus seletores de css são específicos o suficiente para que eu possa deixar a URL como '*'


0

Me deparei com essa pergunta ao procurar uma solução sobre como fornecer uma folha de estilo para páginas não estilizadas. Nenhuma das soluções acima me ajudou muito e ainda o Chrome de 09/2018 não suporta a função de folha de estilo personalizada removida anteriormente.

A solução que eu criei e que funciona como charme para o meu caso de uso é alcançada usando este complemento do chrome com um script js personalizado que insere meu css personalizado no cabeçalho da página, se ela não tiver folhas de estilo. Não funcionará em uma página que tenha qualquer folha de estilo vinculada, mas, para o meu caso de uso, é suficiente.

Aqui está o script JS que estou usando:

window.addEventListener("load", function(event) {
    console.log("All resources finished loading!");
    console.log(document.styleSheets); 
    if (document.styleSheets.length > 0) {
        return;
    }

    var css = `
    /*Your CSS goes here*/
    `;
    var style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    document.head.appendChild(style);
  });

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.