Разное

Background js: ключ background — Mozilla | MDN

09.04.1970

Содержание

ключ background — Mozilla | MDN

Тип Object
Обязательный Нет
Пример
"background": {
  "scripts": ["background.js"]
}

Используйте ключ background для включения одного или нескольких фоновых сценариев и, возможно, фоновой страницы в ваше расширение.

Фоновые сценарии — это место для размещения кода, который должен поддерживать долгосрочное состояние или выполнять долгосрочные операции, независимо от времени жизни каких-либо конкретных веб-страниц или окон браузера.

Фоновые сценарии загружаются сразу при загрузке расширения и остаются загруженными до тех пор, пока расширение не будет отключено или удалено. Вы можете использовать любой API-интерфейс WebExtension в сценарии, если вы запросили необходимые права (permissions).

Дополнительную информацию см. В разделе «Справочные страницы» в статье Анатомия расширения.

Ключ background это объект, у которого есть два следующих необязательных свойства:

scripts

Массив строк, каждая из которых представляет собой путь к файлу JavaScript. Путь к этим файлам указывают относительно папки, в которой находится файл manifest.json. Это скрипты, которые будут выполняться в фоновой странице расширения.

У этих скриптов общий глобальный контекст объекта window.

Скрипты загружаются в том порядке, в котором они указаны в массиве.

Если вы указали значения с помощью свойства scripts, будет создана пустая фоновая страница, в которой будут работать все эти скрипты.

Примечание: Если вы хотите добавить скрипт из удалённого расположения с помощью тега <script> (например, <script src = "https://code.jquery.com/jquery-1.7.1.min.js">), может также понадобиться изменить значение ключа content_security_policy в файле manifest.json вашего расширения.

Примечание: В Firefox до версии 50, когда открыт отладчик, скрипты не всегда загружаются в том порядке, в котором они расположены в массиве. Чтобы обойти этот баг, можно использовать свойство page  (вместо scripts) и добавить фоновые скрипты с помощью тегов <script> в странице HTML. Этот баг починен в Firefox 50. Начиная с этой версии, скрипты всегда загружаются в том порядке, в котором они следуют в массиве.

page

Если вам нужно какое-нибудь содержимое HTML-страницы, можно определить свою фоновую страницу с помощью свойства page. Это строка, которая представляет собой путь к файлу документа HTML, заданный относительно расположения файла manifest.json. Этот файл HTML должен находиться внутри вашего расширения.

Если используется это свойство, то уже нельзя добавлять скрипты с помощью свойства

scripts. Вместо этого нужно добавлять скрипты в страницу — точно таким же образом, как в обычную веб-страницу.

Ключ background также может содержать следующее необязательное свойство:

persistent

Двоичное значение (Boolean).

  • true определяет, что фоновая страница должна храниться в памяти с момента, когда загрузилось расширение или запустился браузер и до того, как расширение будет удалено или выключено, или браузер будет закрыт (то есть фоновая страница постоянна).
  • false определяет, что фоновая страница может быть выгружена из памяти во время бездействия и создана заново, когда будет нужна. Такие фоновые страницы часто называются «Страницами Событий» (Event Pages) — потому, что они загружаются в память только для того, чтобы обрабатывать события, для которых в фоновых скриптах назначены функции-обработчики. Зарегистрированные события остаются когда фоновая страница выгружена из памяти, но остальные значения сбрасываются. Если нужно хранить постоянные данные при использовании страницы событий, используйте storage API.
  "background": {
    "scripts": ["jquery.js", "my-background.js"]
  }

Загрузит два фоновых скрипта.

  "background": {
    "page": "my-background.html"
  }

Загрузит файл фоновой страницы.

BCD tables only load in the browser

Полностью адаптируемый видео бэкграунд. Включая примеры с JS и CSS (Full Background)

Видео бекграунд – полностью адаптивный

Если Вы хотите реализовать “человеческий” видео бекграунд, видео в котором будет всегда располагаться по центру и не иметь черных полос при масштабировании по вертикали (сверху и с низу) и по горизонтали (слова или справа). Видео бекграунд который находится в элементе.

И так начнем! Когда мне потребовалось реализовать видео бекграунд чтобы полностью покрыть фоновую область просмотра видео роликом, я решил, что мне придется использовать JavaScript, измерить область просмотра, а затем изменить размер и расположение видео соответственно полученным вычислениям.

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

Видео бекграунд основной пример (полностью адаптируется и ведет себя как свойство background-position:cover в CSS):

[iframe src=https://codepen.io/dydaevskiy/embed/qLpEYG]

Блок для видео по умолчанию

Взять <video> элемент и сделать его перекрывающим область просмотра так же просто, как с любым элементом HTML, например, с фиксированной позицией:

#myvid {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}

Это заставляет наш элемент видео принимать ширину и высоту области просмотра. Но если наш видео источник имеет формат, отличный от разрешения пропорций экрана «(и это почти наверняка будет в случае , если мы используем только ширину и высоту! Окна просмотра), мы в конечном итоге получим черные полосы :

16: 9 источник видео в квадратном <video> элементе

Если вы привыкли к background-size свойству в CSS, вы знаете, что оно имеет значение «cover», которое дает именно тот эффект, которого мы пытаемся достичь здесь. Если бы мы могли использовать то же самое для изображений и видео контента при реализации задачи!

Ну, мы можем это сделать при помощи, object-fit! Увы, есть подвох.

Использование подгонки объекта

В браузерах, которые поддерживают object-fit свойство CSS, мы могли бы легко это исправить:

#myvid {
  
  object-fit: cover;
}

Эта object-fit функция была разработана для всех визуальных элементов мультимедиа, включая изображения и видео. Это позволяет сообщать браузерам, как они должны помещать один прямоугольник (источник мультимедиа) в другой прямоугольник (элемент мультимедиа). В частности, он имеет cover и contain значения, которые работают так же, как аналогичные значения background-size. Также есть object-position свойство, похожее на background-position другое, за исключением того, что по умолчанию все центрировано ( object-position: 50% 50%).

Итак, object-fit делает все , что мы хотим, но … он поддерживается только в последних версиях Chrome (см. Таблицу поддержки «Могу ли я использовать» ). Небольшая заметка о поддержке прошлого и будущего:

В любом случае, сейчас это не будет работать для наших нужд, поэтому давайте найдем работоспособное решение CSS.

Как работает видеоцентрирование? Возможны две ситуации: видео может быть переполнено по вертикали, или переполнено по горизонтали (и поиск решения на то и другое, это просто пустая трата).

Картинка может помочь:

Проблемы при масштабировании – Серый фон для видео и красные черточки для окна просмотра

Если соотношение сторон окна просмотра больше, чем соотношение сторон видео, видео будет переполнено сверху и снизу (первый пример). Если соотношение сторон окна просмотра меньше, видео будет переполнено слева и справа.

Если мы уже знаем соотношение сторон видео, мы можем кодировать это в CSS. Обратите внимание, что нам нужно жестко закодировать соотношение сторон видео в медиазапросах:

#myvid {
  position: fixed;
  top: 0;
  left: 0;
}
@media (min-aspect-ratio: 16/9) {
  #myvid {
    width: 100%;
    height: auto; 
  }
}
@media (max-aspect-ratio: 16/9) {
  #myvid {
    width: auto; 
    height: 100%;
  }
}

Благодаря этому у нас есть правильные, полностью реагирующие размеры для нашего видео, независимо от размеров области просмотра. Но и от этого наш видео бекграунд все еще не располагается по центру.

Центрирующий трюк

Мы могли бы попытаться отцентрировать видео, используя отрицательные top (или margin-top) или left (или margin-left) значения, но получить правильное количество пикселей для смещения видео не так просто. Я на самом деле пытался использовать calc() и единицы просмотра, это работало в Firefox и терпело неудачу в Chrome и Safari, и в целом это выглядело действительно загадочно. Короче

не хорошее решение!

Итак, как мы можем центрировать блок с видео, который шире или выше, чем область просмотра, если мы не знаем его точных размеров? Легко! Мы делаем контейнер с большим размером, который больше, чем видео, и больше, чем область просмотра.

Вот грубая идея на картинке:

Пунктирный контур по-прежнему является нашим окном просмотра, светлый прямоугольник – нашим видео, а темная область – нашим контейнером с большим размером. Затем мы можем использовать любую технику центрирования CSS по нашему выбору (скажем, Flexbox) для центрирования видео внутри контейнера.

Но угадайте, что работает как контейнер, который автоматически центрирует видео? Поэтому мы можем пропустить создание блока и использование техник центрирования CSS! Теперь нам просто нужно сделать наш элемент видео слишком высоким или слишком широким и позволить браузеру обрабатывать центрирование автоматически и по умолчанию (по сути блок

по отображению получается похож на background-size:contain фонового изображения в CSS)
#myvid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (min-aspect-ratio: 16/9) {
  #myvid {
    height: 300%; top: -100%;
    
  }
}
@media (max-aspect-ratio: 16/9) {
  #myvid {
    width: 300%; left: -100%;
    
  }
}

Это будет хорошо работать. Но я бы также порекомендовал использовать контейнер

для переноса видео, и дать этому контейнеру размеры области просмотра (пунктирный контур). Почему? Потому что, если вы хотите добавить скриптовые кнопки вместе с вашим видео или любыми другими метаданными или контентом, которые вы хотите отображать поверх видео во время воспроизведения, это окажется полезным. Итак, давайте используем немного более подробную конфигурацию:

#SDStudio_VIDEO_BACKGROUND {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}
#SDStudio_VIDEO_BACKGROUND > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  #SDStudio_VIDEO_BACKGROUND > video { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  #SDStudio_VIDEO_BACKGROUND > video { width: 300%; left: -100%; }
}

@supports (object-fit: cover) {
  #SDStudio_VIDEO_BACKGROUND > video {
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
}

И … Вот и все! Возможно, вы захотите посмотреть страницу примера и изменить размер окна вашего браузера во время воспроизведения видео.

Пример который будет предоставлен в конце данного пункта, это сырой пример с применением всего что я описал Выше, на основе которого создан видео бекгрунд (видео фон) моего основного сайта http://sdstudio.top/. С той разницей что идентификатор #SDStudio_VIDEO_BACKGROUND был применен к секции созданной при помощи конструктора страниц ELEMENTOR. Но для того что бы описать каким именно образом осуществить применение видео бэкграунда в ELEMENTOR’E я считаю правильным написать отдельный пост,и уже не сегодня…. Как не как третий час ночи :).

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

ПС. Отдельное спасибо автору данного поста: https://fvsch.com/video-background/

Источник записи:

background | htmlbook.ru

CSSInternet ExplorerChromeOperaSafariFirefoxAndroidiOS
2.16.0+8.0+1.0+3.5+1.0+1.0+2.1+1.0+
39.0+1.0+10.5+1.3+3.6+2.1+1.0+

Краткая информация

Версии CSS

Описание

Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Синтаксис

Здесь:

<фон> = [background-attachment || background-image || background-position || background-repeat] | inherit

<последний_фон> = [background-attachment || background-color || background-image || background-position || background-repeat] | inherit

Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления.

Значения

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

Пример 1

XHTML 1.0CSS2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>background</title>
  <style type="text/css">
   div {
    height: 200px; /* Высота блока */
    width: 200px; /* Ширина блока */
    overflow: auto; /* Добавляем полосы прокрутки */
    padding-left: 15px; /* Отступ от текста слева */
    background: url(images/hand.png) repeat-y #fc0; /* Цвет фона, 
                                                    путь к фоновому изображению и 
                                                    повторение фона по вертикали */
   }
  </style>
 </head>
 <body>

  <div>
   Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie 
   consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et 
   iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore
   te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion 
   ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te 
   feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
  </div>

 </body>
</html>

Результат данного примера показан ниже (рис. 1).

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

Пример 2

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background</title>
  <style>
   body {
    background: url(images/hand.png) repeat-y, 
                #fc0 url(images/bg-right.png) repeat-y 100% 0;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Объектная модель

[window.]document.getElementById(«elementID»).style.background

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

javascript — Не удалось загрузить фоновый скрипт src / background.js. Не удалось загрузить манифест

В этом примере создается расширение Chrome, позволяющее пользователям щелкать правой кнопкой мыши изображения на веб-странице и выполнять на них обнаружение мультиклассовых объектов. Расширение применит к изображению классификатор MobileNetV2, а затем напечатает предсказанный класс поверх изображения.

проблема : Я следую инструкциям, но все еще не могу протестировать это расширение

https: // github.com / tenorflow / tfjs-examples / tree / master / chrome-extension

появляется (ошибка): [https://i.stack.imgur.com/7ITsK.jpg visible[2] «Архив ~ \ Рабочий стол \ tfjs-examples \ chrome-extension \ dist Ошибка Не удалось загрузить фоновый скрипт src / background.js. Не удалось загрузить манифест «.

Манифест:

  {
  "Ключ": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEApAR3gTAUuMUf / nAaIip / Vd2xMAR2Xk + 9dqlVruWUdsMXeCGiuECchTmOguyPakqdTTA7Mbyd0RyaU86z63iX350cdyYXzfhLUwecQYIZUFh25c7HhGm8YliGj26voZAkczPB8EnaQtnhUIvTkdrys2 / TtQy46bCmZlOTuAwM + xQXf0Yo0GkKCU / + Б.И. / S / e7ZkYD + 39Riwj / ж / Xv + ipdfAH6clPJ / Xs + COM + MsydKuR7bB3PermsHiv2LKbEnyS7wn7Vev5Q2pdGRRcMQDnXZwYP5YlrEQEp2xdwM2kIvCh3MOk7J0ULniFUpPpdk7Uy2jD72pCZxT4SiiuAUdMLogQIDAQAB",
  "name": "ТФ.js mobilenet в расширении Chrome ",
  "версия": "0.0.0",
  "description": "Классифицируйте изображения прямо в браузере с помощью TensorFlow.js и мобильной сети.",
  "разрешения": [
    "",
    "activeTab",
    "contextMenus",
    "место хранения",
    "вкладки",
    "webRequest",
    "webRequestBlocking"
  ],
  "задний план": {
    "скрипты": ["src / background.js"],
    "постоянный": правда
  },
  "content_scripts": [
    {
      «соответствует»: [«http: // * / *», «https: // * / *»],
      "js": ["src / content.js"],
      "all_frames": правда,
      "run_at": "document_start"
    }
  ],
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "manifest_version": 2,
  "icons": {
    «16»: «изображений / get_started16.png ",
    "32": "images / get_started32.png",
    "48": "images / get_started48.png",
   "128": "images / get_started128.png"
  }
}
  

Кто-нибудь может мне с этим помочь? или скажите мне, как я могу протестировать / начать создание расширения Chrome, которое будет использовать TensorFlow.js?

Управляйте событиями с помощью сервисных работников

Расширения — это программы на основе событий, используемые для изменения или улучшения работы в браузере Chrome. События — это триггеры браузера, такие как переход на новую страницу, удаление закладки или закрытие вкладки.Расширения отслеживают эти события с помощью сценариев в своем фоновом работнике службы, которые затем реагируют указанными инструкциями.

Рабочий фоновой службы загружается, когда это необходимо, и выгружается, когда он простаивает. Вот некоторые примеры событий:

  • Расширение сначала устанавливается или обновляется до новой версии.
  • Фоновая страница ожидала события, и событие отправлено.
  • Сценарий содержимого или другое расширение отправляет сообщение.
  • Другое представление в расширении, например всплывающее окно, вызывает runtime.getBackgroundPage .

После загрузки сервис-воркер продолжает работать, пока выполняет какое-либо действие, например, вызывает Chrome API или отправляет сетевой запрос. Кроме того, работник службы не выгружается, пока не будут закрыты все видимые представления и все порты сообщений.

Открытие представления не приводит к загрузке сервис-воркера, а только предотвращает его закрытие после загрузки.

Эффективные фоновые сценарии остаются бездействующими до тех пор, пока не произойдет событие, в котором они ожидают возгорания, отреагируют указанными инструкциями, а затем выгружаются.

Регистрация фоновых сценариев #

Расширения регистрируют своих рабочих фоновых служб в манифесте в поле «background» . В этом поле используется ключ «service_worker» , который указывает один файл JavaScript.

  {
"name": "Расширение Awesome Test",
...
"background": {
"service_worker": "background.js "
},
...
}

. Вы можете захотеть разбить код обработки событий на модули, разделив его на несколько файлов JavaScript. В этом случае вы должны импортировать эти сценарии из основной службы. рабочий файл:

  {
...
...
}

Инициализировать расширение #

Прослушать событие runtime.onInstalled для инициализации расширения при установке. Используйте это событие, чтобы установить состояние или для одноразовой инициализации, например, контекстное меню.

  chrome.runtime.onInstalled.addListener (function () {
chrome.contextMenus.create ({
"id": "sampleContextMenu",
"title": "Пример контекстного меню",
"contexts": [" выделение "]
});
});

Настройка слушателей #

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

Слушатели должны регистрироваться синхронно с начала страницы.

  chrome.runtime.onInstalled.addListener (function () {
chrome.contextMenus.create ({
"id": "sampleContextMenu",
"title": "Пример контекстного меню",
"contexts": [" выделение "]
});
});


chrome.bookmarks.onCreated.addListener (функция () {
});

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

  хром.runtime.onInstalled.addListener (function () {
chrome.bookmarks.onCreated.addListener (function () {
});
});

Расширения могут удалять слушателей из своих фоновых сценариев, вызывая removeListener . Если все прослушиватели события удалены, Chrome больше не будет загружать фоновый скрипт расширения для этого события.

  chrome.runtime.onMessage.addListener (функция (сообщение, отправитель, ответ) {
chrome.runtime.onMessage.removeListener (событие);
});

Фильтровать события #

Используйте API-интерфейсы, поддерживающие фильтры событий, чтобы ограничить прослушивателей случаями, о которых заботится расширение.Если расширение прослушивает событие tabs.onUpdated , попробуйте вместо этого использовать событие webNavigation.onCompleted с фильтрами, поскольку API вкладок не поддерживает фильтры.

  chrome.webNavigation.onCompleted.addListener (function () {
alert («Это мой любимый веб-сайт!»);
}, {url: [{urlMatches: 'https://www.google.com/' }]});

Реагировать на слушателей #

Слушатели существуют для запуска функций после запуска события.Чтобы отреагировать на событие, структурируйте желаемую реакцию внутри события слушателя.

  chrome.runtime.onMessage.addListener (function (message, callback) {
if (message.data == "setAlarm") {
chrome.alarms.create ({delayInMinutes: 5})
} else if (message .data == "runLogic") {
chrome.scripting.executeScript ({file: 'logic.js'});
} else if (message.data == "changeColor") {
chrome.scripting.executeScript (
{code: 'document.body.style.backgroundColor = "orange"'});
};
});

Выгрузить фоновые сценарии #

Данные должны сохраняться периодически, чтобы важная информация не была потеряна, если расширение завершится сбоем без получения onSuspend .Используйте API хранилища, чтобы помочь с этим.

  chrome.storage.local.set ({variable: variableInformation});  

Если добавочный номер использует передачу сообщений, убедитесь, что все порты закрыты. Фоновый сценарий не будет выгружен, пока не будут закрыты все порты сообщений. Прослушивание события runtime.Port.onDisconnect позволит понять, когда закрываются открытые порты. Закройте их вручную с помощью runtime.Port.disconnect.

  chrome.runtime.onMessage.addListener (function (message, callback) {
if (message == 'hello') {
sendResponse ({приветствие: 'welcome!'})
} else if (message == ' до свидания ') {
хром.runtime.Port.disconnect ();
}
});

Время жизни фонового работника службы можно наблюдать, отслеживая, когда запись для расширения появляется и исчезает из диспетчера задач Chrome.

Откройте диспетчер задач, щелкнув меню Chrome, наведя курсор на другие инструменты и выбрав «Диспетчер задач».

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

  chrome.runtime.onSuspend.addListener (function () {
console.log ("Выгрузка.");
chrome.browserAction.setBadgeText ({text: ""});
});

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

фон — Mozilla | MDN

Тип Объект
Обязательный
Пример
  "фон": {
  "скрипты": ["фон.js "]
}  

Используйте клавишу background , чтобы включить один или несколько фоновых сценариев и, при необходимости, фоновую страницу в ваше расширение.

Фоновые скрипты — это место для размещения кода, который должен поддерживать долгосрочное состояние или выполнять долгосрочные операции, независимо от времени жизни каких-либо конкретных веб-страниц или окон браузера.

Фоновые сценарии загружаются сразу после загрузки расширения и остаются загруженными до тех пор, пока расширение не будет отключено или удалено, если только постоянный не указан как false .Вы можете использовать любой из API-интерфейсов WebExtension в сценарии, если вы запросили необходимые разрешения.

Дополнительные сведения см. В разделе «Фоновые страницы» статьи «Анатомия расширения».

Ключ фона — это объект, который может иметь одно из следующих двух свойств, оба необязательные:

скрипты

Массив из строк , каждая из которых является путем к источнику JavaScript.Путь указывается относительно самого файла manifest.json. Это сценарии, которые будут выполняться на фоновой странице расширения.

Скрипты используют один и тот же глобальный контекст окна и .

Скрипты загружаются в том порядке, в котором они появляются в массиве.

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

Примечание: Если вы хотите получить сценарий из удаленного места с тегом

❮ Объект стиля

Пример

Стиль фона документа:

документ.body.style.background = "# f3f3f3 url ('img_tree.png') Право без повтора верх »;

Попробуй сам "

Дополнительные примеры "Попробуйте сами" ниже.


Определение и использование

Свойство фона устанавливает или возвращает до восьми отдельных фонов. properties в сокращенной форме.

С помощью этого свойства вы можете установить / вернуть одно или несколько из следующих (в любом заказ):

  • цвет фона
  • фоновое изображение
  • фон-повтор
  • фон-приставка
  • background-position
  • размер фона
  • фон происхождения
  • фон-клип

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


Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Имущество
фон 1,0 4,0 1,0 1,0 3.5

Примечание: См. Поддержку каждого значения в отдельном браузере ниже.


Синтаксис

Вернуть свойство фона:

Установите свойство фона:

объект .style.background = "цветное изображение повторить размер позиции прикрепления исходный клип | начальный | наследование "

Стоимость недвижимости

Значение Описание
цвет Устанавливает цвет фона элемента
изображение Устанавливает фоновое изображение для элемента
повтор Устанавливает, как будет повторяться фоновое изображение
приставка Устанавливает, будет ли фоновое изображение фиксированным или прокручивается вместе со страницей.
позиция Устанавливает начальную позицию фонового изображения
размер Устанавливает размер фонового изображения
происхождение Устанавливает область позиционирования фона
зажим Задает область рисования фонового изображения
начальный Устанавливает для этого свойства значение по умолчанию.Читать о начальных
наследовать Наследует это свойство от своего родительского элемента. Читать о наследовать


Технические данные

Значение по умолчанию: прозрачный без повторения прокрутки 0% 0% автоматическое заполнение границы рамки
Возвращаемое значение: Строка, представляющая фон элемента
Версия CSS CSS1 + новые свойства в CSS3

Другие примеры

Пример

Изменить фон элемента DIV:

документ.getElementById ("myDIV"). style.background = "url ('smiley.gif') синий Repeat-x center";

Попробуйте сами »

Пример

Установить цвет фона для документа:

document.body.style.backgroundColor = "красный";

Попробуйте сами »

Пример

Установить фоновое изображение для документа:

document.body.style.backgroundImage = "url ('img_tree.png')";

Попробуйте сами »

Пример

Установить фоновое изображение без повтора:

документ.body.style.backgroundRepeat = "повторять-у";

Попробуйте сами »

Пример

Установить фиксированное фоновое изображение (не будет прокручиваться):

document.body.style.backgroundAttachment = "исправлено";

Попробуйте сами »

Пример

Изменить положение фонового изображения:

document.body.style.backgroundPosition = "вверху справа";

Попробуйте сами »

Пример

Вернуть значения свойств фона документа:

документ.body.style.background;

Попробуйте сами »

Связанные страницы

Учебник

CSS: фон CSS

Учебное пособие по CSS3: фоны CSS3

Ссылка CSS: свойство фона


❮ Объект стиля

Как использовать фоновый скрипт для получения данных в расширении Chrome | by Hu Chen

Как вы можете видеть на изображении ниже, сигналы тревоги срабатывают каждые 3 минуты.

Проверить фоновый скрипт

И здесь вы также можете проверить сеть , localStorage .Если ваше расширение изменило новую вкладку, localStorage используется в вашем расширении, именно так мы обмениваемся данными между вашим фоновым скриптом и расширением новой вкладки.

Теперь у нас есть базовый будильник, давайте получим данные и сохраним их в локальное хранилище. Позже в нашем расширении React мы могли напрямую читать из локального хранилища при загрузке, а не получать из API.

  1. Мы создадим аварийный сигнал « обновить » для извлечения и сохранения данных каждые 30 минут при первой установке или обновлении расширения.
  2. Мы будем получать данные при перезапуске Chrome, чтобы пользователь мог получить самые свежие данные.
  3. Мы также будем создавать еще один аварийный сигнал « watchdog » каждые 5 минут, чтобы проверять, доступен ли еще аварийный сигнал обновления, если нет, мы создадим его. (Здесь это может не понадобиться)

В приведенном выше коде есть две проблемы, и нам нужно будет решить их сейчас:

  1. Обратите внимание, что мы не писали реализацию для fetchRepositories и saveToLocalStorage , они, скорее всего, уже доступны в вашем приложении React, можно скопировать реализацию в фон .js , но было бы лучше, если бы мы могли повторно использовать функции для сохранения кода DRY.
  2. Мы написали background.js с использованием синтаксиса ES6, например => и async await , старые браузеры могут не запустить его.

Здесь мы будем использовать webpack , чтобы помочь собрать и перенести код в ES5.

5.1 Установка зависимостей

 yarn add --dev webpack-cli npm-run-all rimraf 

Обратите внимание, что нам не следует устанавливать webpack. ( сценариев реакции уже имеют его в зависимости, и он будет жаловаться на другой экземпляр webpack ). Не стесняйтесь установить его, если вы не используете create-response-app .

5.2 Изменить сценарий сборки

Теперь измените сценарий сборки build , чтобы собрать как приложение, так и фоновый сценарий:

 «prebuild»: «rimraf build», 
«build»: «npm-run-all build: *» ,
«сборка: приложение»: «INLINE_RUNTIME_CHUNK = ложная сборка сценариев реакции»,
«сборка: bg»: «webpack --mode production./src/background.js --output ./build/background.js ",

Мы уже рассмотрели INLINE_RUNTIME_CHUNK = false в предыдущем руководстве. После изменения, если вы запустите npm run build , он выполнит

  • Очистите папку сборки
  • Объедините расширение React с помощью сценария реакции
  • Объедините src / background.js с помощью webpack и экспортируйте в build / background.js

5.3 Рефакторинг./src/background.js

В вашем src / background.js вы можете импортировать любые внешние библиотеки, такие как lodash , или импортировать константы / функции из других файлов, например:

 import {
fetchRepositories,
saveToLocalStorage
} из './lib/helpers';chrome.runtime.onInstalled.addListener (() => {
...

Теперь ваш код стал намного чище.

5.4 Обновите конфигурацию ESlint

Если вы используете ESLint в вашем редакторе, он может жаловаться на , хром не определен в вашем ./src/background.js . Это связано с тем, что chrome API доступен только в расширениях, нам нужно будет сообщить ESLint, что мы разрабатываем расширение, и игнорируйте их.

Добавьте / обновите следующие строки в вашем package.json .

 "eslintConfig": {
"extends": "react-app",
"env": {
"browser": true,
"webextensions": true
}
}

После добавления webextensions с по env , редактор больше не будет жаловаться на это.

5.5 Добавить .babelrc

Webpack потребуется файл .babelrc для компиляции, и нам нужно будет добавить его вручную. Поскольку в сценариях реакции уже установлено приложение babel-presets-react-app , нам просто нужно его использовать.

 {
"presets": ["response-app"]
}

Теперь запустите npm run build будет иметь ваше полное расширение вместе с скомпилированным фоновым скриптом в папке build .

Если вам интересно, вы можете проверить все файлы, измененные в коммите моего расширения, на GitHub.

38 JavaScript фоновых эффектов

Коллекция вручную подобранных бесплатных фоновых эффектов ванильного JavaScript примеров кода: изменение цвета фона или изображения, анимация, с холстом и т. Д. Обновление коллекции за февраль 2020 года. 24 новинки.

  1. CSS Анимированные фоны
  2. Плагины фона jQuery
О коде

Окружающий фон в оттенках серого

Фон из частиц.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: moodljs.js, tweenmax.js

Автор
  • Бруно Виейра
О коде

BVAmbient - Частицы фона VanillaJS

Простой в использовании фон из частиц, созданный с помощью VanillaJS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: bootstrap.css, bvambient.js

Автор
  • Кэмерон Найт
О коде

Изменение цвета фона с помощью GSAP ScrollTrigger

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: локомотив-свиток.css, gsap.js, locomotive-scroll.js

Автор
  • F.ala O.viara
О коде

Шаблоны Юникода

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Тошия Марукубо
О коде

Холст JavaScript

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Тошия Марукубо
О коде

Холст JavaScript

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Эффект при наведении курсора на сетку фонового изображения

Краткое руководство о том, как добиться эффекта наведения при наведении курсора на сетку фонового изображения.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Тошия Марукубо
О коде

Холст JavaScript

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Тадас Карпавичюс
О коде

Движение

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: победитель.js, chroma.js, simplex-noise.js, tweakpane.js

Автор
  • Павитра Голчха
О коде

1337 Матрица

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Сеточные черви

Анимирует связанные узлы по сетке.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Танк Манан
Сделано с
  • HTML (мопс) / CSS (стилус) / JS
О коде

Hello Matrix

Привет, мир на 92 языках, падающий под дождем кода Матрицы.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Сделано с
  • HTML (Мопс) / CSS (Меньше) / JS
О коде

Привет Свет

DYNAMIC_DRAW и bufferSubData combo

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Йохан Карлссон
О коде

Случайный образец шеврона

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Кевин Леврон
О коде

Случайное, Cos и Sin

Щелкните для рандомизации.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: three.js, chroma.js

Автор
  • Йохан Карлссон
О коде

Разноцветные круги

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Йохан Карлссон
О коде

Разноцветные квадраты

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Йохан Карлссон
О коде

Апельсиновые квадраты

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Пол Нив
О коде

Колебание

Играйте с красочной шаткой поверхностью.Интерактивная мышка-игрушка. Заставьте поверхность подпрыгивать и раскачиваться.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Страхиня Бабич
О коде

Изменение формы фона

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Бен Мэтьюз
О коде

Решетка Truchet

Генератор мозаичного фона, использующий плитки труше с чередующейся окраской.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: p5.js

Автор
  • Фабио Оттавиани
Сделано с
  • HTML / CSS (SCSS) / JS (Babel)
О коде

Поле потока N.2

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: p5.js

Автор
  • Саймон Гелльнер
О коде

Обязательно падающий снег

Попробуйте поиграть с параметрами в графическом интерфейсе справа. Падающий снег - это лишь один из множества возможных вариантов.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: sparticles.js, dat.gui.js, stats.js

Автор
  • Альфонс Нильссон
О коде

Металлические элементы - WebGL

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Крис Смит
О коде

Заливка фонов анимацией

Перебирать каждый элемент на странице, раскрашивая их.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Скотт Уивер
О коде

Обои Triple "A"

Щелкните для нового рисунка.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: css-doodle.js, webfont.js

О коде

Светлячки

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Майкл Берридж
О коде

Фоновая текстура на нескольких элементах

Отображение одной фоновой текстуры на нескольких разноцветных div s.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: nouislider.js

Автор
  • Хаким Эль-Хаттаб
Сделано с
  • HTML / CSS (SCSS) / JS (Babel)
О коде

rymd

Перемещайте указатель мыши или проводите пальцем по сенсорному устройству, чтобы перемещаться по звездам.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Кристаллический параллакс

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Крис Нил
Сделано с
  • HTML / CSS (SCSS) / JS (Babel)
О коде

Анимированный градиент маски-изображения CSS

Анимированный CSS маска-изображение градиент с JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Алекс Андрикс
О коде

Спипа Круг

Частицы никогда не сталкиваются друг с другом. Пятно освобождается после определенного количества шагов.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: lodash.js

Автор
  • Азазель N28
Сделано с
  • HTML (мопс) / CSS (стилус) / JS (Babel)
О коде

Фон вращающиеся квадраты

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Сделано с
  • HTML / CSS (SCSS) / JS (Babel)
О коде

Узор SVG "Космос"

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: tweenmax.js, drawsvgplugin.js

Автор
  • Лиам Иган
Сделано с
  • HTML / CSS (SCSS) / JS (Babel)
О коде

Ясень осень

Пепел падает, когда я смотрю на этот выжженный мир.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: три.js, ccapture.js

Автор
  • Mac Galeano
О коде

Фон с разреженными треугольниками

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Алекс Заворски
О коде

Изменение цвета

Щелкните в любом месте.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: anime.js

Автор
  • Локтар
О коде

Фон Тетриса

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Передача сообщений в примере расширения Chrome · GitHub

Передача сообщений в примере расширения Chrome · GitHub

Мгновенно делитесь кодом, заметками и фрагментами.

Пример передачи сообщений в расширении Chrome

/ *********************************************** *****************
* onMessage из расширения или вкладки (сценарий содержимого)
*********************************************** **************** /
хром.runtime.onMessage.addListener (
Функция (запрос, отправитель, sendResponse) {
if (request.cmd == "любая команда") {
sendResponse ({результат: "любой ответ из фона"});
} else {
sendResponse ({результат: "ошибка", сообщение: `Invalid 'cmd'`});
}
// Примечание: здесь требуется возврат истины!
// ссылка: http: // stackoverflow.ru / questions / 20077487 / chrome-extension-message-pass-response-not-sent
вернуть истину;
});
{
"имя": "пример",
"версия": "0.0.1",
"description": "Пример передачи сообщений в расширении Chrome",
"разрешения": [
"<все_урлы>",
"webRequest",
"webRequestBlocking",
"фон",
"activeTab"
],
«фон»: {
"скрипты": ["фон.js "]
// "постоянный": ложь
},
"content_scripts": [{
// "соответствует": ["http: // * / *"],
// "css": ["mystyles.css"],
"js": [
"extlib / js / jquery.min.js ",
"content.js"
]
}],
"browser_action": {
"default_title": "hoge",
"default_icon": "icon.png",
"default_popup": "всплывающее окно.html "
},
"manifest_version": 2,
"content_security_policy": "script-src 'self' https://ajax.googleapis.com https://maxcdn.bootstrapcdn.com/; object-src 'self"
}
Вы не можете выполнить это действие в настоящее время.Вы вошли в систему с другой вкладкой или окном. Перезагрузите, чтобы обновить сеанс. Вы вышли из системы на другой вкладке или в другом окне. Перезагрузите, чтобы обновить сеанс. .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *