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

Пользовательские стили — это правила CSS, которые влияют на страницы Scratch. Они могут применять стили к существующему пользовательскуму интерфейсу, а также к элементам, добавленным дополнениями.

Объявления пользовательских стилей в манифесте дополнения

Некоторые изменения требуют перезагрузки расширения со страницы chrome://extensions для применения, включая обновление файла манифеста дополнения.

Не обязательно перезагружать расширение при изменении исходного кода уже существующего файла CSS пользовательского стиля. В тех случаях достаточно перезагрузки страницы.

Пользовательские стили объявлены в массиве “userstyles”, схоже пользовательским сценариям.

Каждый предмет массива должен иметь следующие свойства:

"url": относительная гиперссылка к файлу CSS.
"matches": список страниц Scratch, где пользовательские стили будут применены. Смотрите совпадения для исчерпывающей информации.
if: список условий, которые могут переключать активность пользовательского стиля. Читайте пользовательский стиль.если для большего объяснения.

Примерный манифест:

{
  "name": "Scratch Messaging",
  "description": "Provides easy reading and replying to your Scratch messages.",
  "userstyles": [
    {
      "url": "styles.css",
      "matches": ["projects", "https://scratch.mit.edu/", "profiles"]
    },
    {
      "url": "resize.css",
      "matches": ["projects"],
      "if": {
        "settings": {
          "resize": true
        }
      }
    },
  ],
  "settings": [
    {
      "name": "Resize messages",
      "id": "resize",
      "type": "boolean",
      "default": false
    }
  ],
  "tags": ["community"],
  "enabledByDefault": false
}

Динамическое переключение пользовательских стилей после полной загрузки страницы

Обычно не нужно использовать пользовательский сценарий JavaScript для динамического переключения активности пользовательского стиля в ответ изменения человеком настроек.

Включение dynamicEnable: true в манифесте дополнения разрешит расширению динамически внедрять пользовательские стили если дополнение было включено (в первый раз) после загрузки страницы.
Включение dynamicDisable: true в манифесте дополнения позволит расширению динамически убирать или инъецировать пользовательские стили, если дополнение было переключено, без перезагрузки страницы.
Включение updateUserstylesOnSettingsChange: true в манифесте дополнения перепроверит условия “if”, которые зависят от пользовательских настроек без перезагрузки страницы. Расширение будет соответственно извлекать или инъецировать пользовательские стили.

Доступ к настройкам дополнения из CSS

Пользовательские стили могут легко обрести цветные и цифровые настройки через переменные CSS. Они также могут получить доступ к настройкам других активированных дополнений.

Переменные CSS всегда следуют формату --addonId-settingId. Идентификаторы настроек всегда переводятся из формата-кебаб в форматВерблюд.

Эти переменные CSS всегда доступны для всех включенных дополнений и никакое свойство манифеста не требуется для их раскрытия. Они также синхронизированны с пользовательскими настройками без требования перезагрузки страницы.

.sa-progress-bar {
  /* Настройка цвета */
  background-color: var(--progressBar-bgColor);

  /* Настройка цвета с аварийным случаем */
  border-color: var(--editorDarkMode-border, #fc7c24);
  /* Если editor-dark-mode выключен, то вместо главного цвета будет использоваться аварийный */

  /* Цифровая настройка */
  height: calc(1px * var(--progressBar-height));
}

Настраиваемые переменные CSS

Если пользовательскому стилю надо выбрать одно из двух значений на основе фонового цвета (контраст текста) или настройки дополнения, JavaScript не обязателен. Эти случаи, помимо других, могут быть объявлены в манифесте дополнения через customCssVariables и пользовательский стиль может просто отсылаться на эту переменную CSS.

Применение стилей, основанных на режиме редактора

Расширение автоматически переключает имя класса на элементе <html>, когда пользователь заходит или выходит из редактора проектов.

К примеру, вот различное стилизирование элементов <input> внутри и снаружи редактора:

.sa-editor input {
  /* Применяется только если `addon.tab.editorMode` равно `editor` или `fullscreen` */
}

:root:not(.sa-editor) input {
  /* Применяется лишь если `addon.tab.editorMode` НЕ равно `editor` или `fullscreen` */
}

В похожей манере, класс .sa-fullscreen добавлен к элементу <html>, когда проект в полноэкранном режиме:

.sa-fullscreen [class*="green-flag_green-flag_"] {
  /* Применяется при `fullscreen` значении `addon.tab.editorMode` */
}

:root:not(.sa-fullscreen) [class*="green-flag_green-flag_"] {
  /* НЕ применяется при `fullscreen` значении `addon.tab.editorMode` */
}

Содержание

Лучшие Практики

Следуйте этим лучшим практикам при написании или рассмотрении пользовательских стилей.
Советы для Отладки

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