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

43

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

Георг IV
источник
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

Myf
источник
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)

harrymc
источник
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, и делаю их черно-красными.

cyberationmicro.com
источник
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

Используйте Stylebot.

Хром

Библиотека пользовательских скриптов

Для Firefox, Настройте свой веб

Quidam
источник
Пожалуйста, процитируйте основные части ответа по ссылочной ссылке (ссылкам), так как ответ может стать недействительным, если связанные страницы изменятся.
ДэвидПостилл