Изменить CSS по умолчанию Google Chrome


43

Я хотел бы иметь возможность изменить CSS по умолчанию, используемый Chrome, например удалить подчеркивание для ссылок и т. Д. Однако я не могу найти файл CSS по умолчанию, используемый Chrome. Кто-нибудь знает где это?


3
Если вы разработчик, я рекомендую этого не делать, так как он меняет значение по умолчанию css.
nXqd

Для простого способа изменить css, используя ваше очень простое расширение, смотрите: stackoverflow.com/questions/21948850/…
User

Ответы:


33

(Обновление 2014 г.) Поскольку поддержка пользовательских таблиц стилей была недавно удалена из Google Chrome, единственным вариантом на данный момент является использование расширений (например, Stylus * 1), но они будут вести себя по-другому (см. Ниже).

Наиболее актуальным запросом для повторного введения настоящих пользовательских таблиц стилей в Google Chrome является выпуск 347016: поддержка пользовательских таблиц стилей .

В соответствии со спецификацией правило «истинной пользовательской таблицы стилей» имеет более низкую специфичность происхождения в каскаде, чем правило автора, но !importantпользовательские правила таблицы стилей имеют более высокую специфичность происхождения, чем !importantправило автора, независимо от его специфичности селектора .

Расширения, имитирующие пользовательские таблицы стилей в Chrome, просто вставляют (надеюсь) последний элемент стиля в страницу, что имеет некоторые последствия:

  • такой стиль находится на «авторском уровне» в каскаде, поэтому вы должны убедиться, что ваше !importantправило имеет более высокую специфичность, чем правило, которое вы хотите переопределить
  • «Ваш» внедренный стиль доступен для скриптов страниц, поэтому они могут легко удалить его по желанию.

* 1 Оригинальное расширение, Stylish , в настоящее время (2017 г.) находится в состоянии неустойчивой разработки новым помощником, поэтому я бы посоветовал избегать его и использовать альтернативу, такую ​​как вышеупомянутый Stylus.


(Следующий оригинальный ответ устарел.)

На самом деле невозможно настроить сам CSS css, но вы можете создать глобальный пользовательский стиль: запустите Chrome один раз --enable-user-stylesheet. Это создаст то, <user-data-dir>/<profile>/User StyleSheet/Custom.cssчто вы можете использовать (изменения распространяются немедленно). http://code.google.com/p/chromium/issues/detail?id=2393


2
Это не кажется законным с нынешним Chromium. Возможно, они убрали эту функцию, так как этот ответ был опубликован.
Пистос

1
Вы правы, я обновил ответ.
Myf

да, похоже, больше не поддерживается (пробовал на chrome 73 и 76 (канарейка)) ( Custom.cssи User Stylesheetsбольше не существует)
localhostdotdev


4

Единственное решение, которое я могу придумать, это использовать скрипт Greasemonkey, который добавляет запись стиля на каждую html-страницу, которая отключает подчеркивание для ссылок. Что-то типа:

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

Эта статья, очевидно, может помочь вам начать:
КАК: Установить скрипты Google Chrome Greasemonkey (только для Windows)


4
Мне смешно, что я не могу напрямую изменить CSS. В Firefox есть userChrome.css и userContent.css, которые делают изменение внешнего вида безумно простым.
Георг IV

@harrymc - я переключил ваш <style>код с блочной цитаты на код, чтобы вам не пришлось беспокоиться о «лишних пробелах»
Джаред Харли


0

Вы можете изменить цвет CSS UI стиль. Просто помните, что если вы измените его, некоторые эффекты, такие как Пример: #footer {color:#5F5F5F !important;}будут меняться на каждом сайте, который использует #footer. Вы были предупреждены. Custom.css меняет почти все в браузерах Chrome

Windows XP Google Chrome:

C: \ Documents and Settings \% ИМЯ ПОЛЬЗОВАТЕЛЯ% \ Локальные настройки \ Данные приложения \ Google \ Chrome \ Данные пользователя \ По умолчанию

Хром:

C: \ Documents and Settings \% ИМЯ ПОЛЬЗОВАТЕЛЯ% \ Локальные настройки \ Данные приложения \ Chromium \ Данные пользователя \ По умолчанию \ Таблицы стилей пользователя

Windows 7 или Vista (справка в разделе справки) Google Chrome:

C: \ Users \% USERNAME% \ AppData \ Local \ Google \ Chrome \ Данные пользователя \ По умолчанию \ Пользовательские таблицы стилей

Хром:

C: \ Users \% USERNAME% \ AppData \ Local \ Chromium \ Пользовательские данные \ По умолчанию \ Пользовательские таблицы стилей

Mac OS X Google Chrome:

~ / Библиотека / Поддержка приложений / Google / Chrome / По умолчанию / Таблицы стилей пользователя

Хром:

~ / Библиотека / Поддержка приложений / Chromium / По умолчанию / Таблицы стилей пользователя

Linux Google Chrome:

~ / .config / google-chrome / Default / User StyleSheets

Хром:

~ / .Config / хром / По умолчанию

Chrome OS

/ Главная / Хронос /

Хотите доказательства, проверьте мою тему для редактора программы http://userstyles.org/styles/95226/chrome-userstyles-editor-hacker-version-cyberat

Не стесняйтесь проверять меня, я создаю таблицы стилей пользовательского интерфейса или случайные сайты, такие как facebook google.etc, и делаю их черно-красными.


4
Это не сработает, потому что в Chrome 33 отсутствует поддержка пользовательских стилей.
Synetech

0

При использовании Стильный в качестве инжектора пользовательского стиля возникает проблема :
уровень приоритета пользователя без!important выше уровня приоритета автора без!important

Поэтому я пишу пользовательский скрипт в качестве инжектора:
https://github.com/zcyzcy88/SelfColle/blob/master/StyleInject.user.js

Принцип:
стиль Inject document.head.prependChild(), прежде чем стиль автора веб-страницы, имеет более низкий приоритет, чтобы избежать наложения пользовательского стиля.


Привет и добро пожаловать на SuperUser.com. Сможете ли вы более подробно рассказать, что именно делает ваш сценарий?
Сервисный менеджер

Введите стиль в document.head.prependChild(), чтобы избежать наложения стиля пользователя.
Систа Фиолен

Если вы можете отредактировать свой ответ, было бы полезно подробнее узнать о том, что делает каждая часть вашего скрипта.
Сервисный менеджер

0

В 2018 году Chrome> = 68.0.3440.106 (и, вероятно, намного раньше)

У меня уже было расширение Resource Override для различных целей разработки, поэтому я теперь использую его, чтобы добавить свою собственную таблицу стилей, чтобы исправить некоторые неудачные варианты стилей в JIRA (и скрыть больше рекламы - хе-хе). Опция, которую я использую - «Inject File», и она работает очень хорошо. Я не пытался переопределить настройку 'url', чтобы она работала только на определенных сайтах, но мои селекторы CSS достаточно специфичны, чтобы я мог просто оставить URL как '*'


0

Я сталкивался с этим вопросом, когда искал решение о том, как предоставить таблицу стилей для страниц без стилей. Ни одно из приведенных выше решений не помогло мне, так как по состоянию на 09/2018 Chrome не поддерживает ранее удаленную функцию пользовательских таблиц стилей.

Решение, которое я придумал и которое работает как очарование для моего варианта использования, достигается с помощью этого chrome-аддона с пользовательским сценарием js, который вставляет мой пользовательский CSS в заголовок страницы, если у него нет таблиц стилей. Он не будет работать на странице, с которой связаны какие-либо таблицы стилей, но для моего случая использования этого достаточно.

Вот сценарий JS, который я использую:

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

-1

Пожалуйста, процитируйте основные части ответа по ссылочной ссылке (ссылкам), так как ответ может стать недействительным, если связанные страницы изменятся.
ДэвидПостилл
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.