Background js что это

ключ background

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

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

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

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

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

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

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

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

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

Примечание: Если вы хотите добавить скрипт из удалённого расположения с помощью тега (например, ), может также понадобиться изменить значение ключа content_security_policy в файле manifest.json вашего расширения.

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

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

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

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

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

• true определяет, что фоновая страница должна храниться в памяти с момента, когда загрузилось расширение или запустился браузер и до того, как расширение будет удалено или выключено, или браузер будет закрыт (то есть фоновая страница постоянна).
• false определяет, что фоновая страница может быть выгружена из памяти во время бездействия и создана заново, когда будет нужна. Такие фоновые страницы часто называются «Страницами Событий» (Event Pages) — потому, что они загружаются в память только для того, чтобы обрабатывать события, для которых в фоновых скриптах назначены функции-обработчики. Зарегистрированные события остаются когда фоновая страница выгружена из памяти, но остальные значения сбрасываются. Если нужно хранить постоянные данные при использовании страницы событий, используйте storage API (en-US).

Примеры

"background":  "scripts": ["jquery.js", "my-background.js"] > 

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

"background":  "page": "my-background.html" > 

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

Совместимость с браузерами

BCD tables only load in the browser

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Создаём расширение google chrome для записи экрана и камеры

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

В расширении также будет использоваться интернационализация (i18next). Для управления состоянием будет использоваться библиотека onChange. Для перемещения встраиваемой камеры по странице jquery-ui. И для стилизации видеоплеера библиотека plyr-player.

Первым делом нужно настроить главный файл расширения google chrome — manifest.json

"action": < "default_popup": "html/popup.html" >,

default_popup: файл HTML, который будет отображаться в выпадающем меню, когда пользователь нажимает на значок действия. В нашем случае это будет loader, после загрузки которого мы будем вставлять iframe на страницу пользователя.

"background": < "service_worker": "js/background.js", "type": "module" >,

Файл background.js обязателен для всех расширений google chrome. Он может использоваться для выполнения различных задач в фоновом режиме, таких как обновление данных, отправка запросов на сервер, мониторинг веб-страниц и т.д. Это позволяет расширению работать в фоновом режиме, даже если пользователь не активен в браузере. В нашем случаем в нем нет необходимости, поэтому просто создадим его и оставим пустым.

"content_scripts": [ < "matches": [ "https://*/*", "http://*/*" ], "js": [ "js/content-script.js" ] >],

Пожалуй, главный файл нашего расширения — это content-script.js. Он может использоваться для изменения внешнего вида и поведения веб-страницы, добавления или удаления элементов на странице, взаимодействия с содержимым страницы и т.д. matches: URL-адреса веб-страниц, на которых должен быть запущен сценарий.

"web_accessible_resources": [ < "matches": [ "" ], "resources": [ "html/popup.html", "html/iframe.html", "js/renderContent/camera.js", "js/renderContent/iframe.js", "libs/jquery-3.6.0.min.js", "libs/jquery-ui.min.js" ] > ],

Файл «web_accessible_resources» в Google Chrome Extension используется для определения ресурсов, которые могут быть доступны на веб-странице, даже если они находятся за пределами расширения.

"permissions": [ "tabs", "storage", "downloads", "activeTab", "scripting" ]

Ну и «permissions» является важным элементом в разработке расширений Google Chrome, позволяющим расширению запросить необходимые разрешения у пользователя, чтобы выполнить необходимые действия. Без этого файла расширение не сможет получить доступ к некоторым функциям браузера, что может ограничить его функциональность.

setTimeout(() => < chrome.tabs.query(< active: true, currentWindow: true >, function (tabs) < chrome.tabs.sendMessage(tabs[0].id, "open") window.close() >) >, 1500)

Итак в выпадающем окне popup у нас отображается loader, после загрузки которого с помощью таймера передается сообщение в content-script и закрывается наш popup с помощью window.close()

chrome.runtime.onMessage.addListener((msg, _, sendResponse) => < const iframePlugin = document.querySelector("#record_plugin") switch (msg) < case "close": < iframePlugin?.remove() break >case "open": < ;(async () =>< const src = chrome.runtime.getURL("js/renderContent/iframe.js") const contentScript = await import(src) contentScript.renderIframe(iframePlugin) >)() break >

В content-script мы слушаем сообщения, которые нам приходят из popup и из нашего iframe, который мы встраиваем тут же.

Внутри iframe будет происходить основная логика расширения. За доступ к содержимому экрана, звуку системы, микрофону и камере будет отвечать класс Media с помощью методов navigator.mediaDevices.getDisplayMedia и navigator.mediaDevices.getUserMedia.

if (state.mode === "screen") < combine = new MediaStream([ . this.screenStream.getTracks(), . this.voiceStream.getTracks(), ]) >else

Так создается поток медиа данных который включает в себя видео и аудио треки в зависимости от режима (запись экрана или запись с камеры).

let blobData = new Blob(data, < type: "video/mp4" >) // Convert the blob data to a url let url = URL.createObjectURL(blobData) // Assign the url to the output video tag and anchor output.src = url downloadTitle.href = url

Обработка готового потока медиа данных и их помещение внутрь проигрывателя и ссылки (для скачивания видеофайла).

const player = new Plyr("#video", < controls: [ "play-large", "play", "progress", "current-time", "volume", "captions", "settings", "fullscreen", ], >) const newMedia = new Media() const defaultLanguage = lStorage.get("language_plugin") || "en" newMedia.getFlowCamera() const i18nInstance = i18next.createInstance() await i18nInstance.init(< lng: defaultLanguage, debug: false, resources, >)

Итак внутри iframe сперва создаем экземпляр плеера, затем экземпляр Media для работы с потоками видео и аудио, запрашиваем доступ к камере, достаем из localStorage текущий язык и инициализируем тексты.

const initialState = < //активность записи recording: false, language: defaultLanguage, // полный экран для плеера fullscreen: false, // проверка на то, что запись не пустая emptyRecord: true, // режим - screen или camera mode: "screen", UIState: < wiewIframe: "control", switch: < microphone: false, camera: false, cameraLocal: false, audio: false, >, >, >

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

Также создаем объект со всеми необходимыми элементами, на которые навешиваем обработчики, внутри которых будет меняться наш стейт.

Таким образом, в данной статье мы в общих чертах рассмотрели создание расширения google chrome для записи экрана и камеры. Исходный код — для более детального ознакомления с расширением.

• chrome extension
• google chrome
• javascript
• google apps
• recording

• JavaScript
• Google Chrome
• Google API
• Расширения для браузеров

Передача данных в background.js

Изучаю создание расширений для Google Chrome. Как понял из документации, есть 2 скрипта: background.js, который выполняется в тени, и front.js, который работает с DOM страницы. Мне нужно как-то из front послать в backround событие, чтобы там выполнилась функция и передала ответ обратно. Например, по клику по какому-нибудь тегу запустилась функция в background.js. Как это можно сделать?

• javascript
• google-chrome
• chrome-extension

Отслеживать
2,057 2 2 золотых знака 24 24 серебряных знака 44 44 бронзовых знака
задан 8 июл 2015 в 22:43
Радик Камалов Радик Камалов
970 2 2 золотых знака 24 24 серебряных знака 57 57 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Чтобы отправить сообщение с front (или как чаще ее называют — content) доступен метод chrome.runtime.sendMessage(message, callback) (документация), где message — непосредственно само сообщение, callback — функция, в которую будет передан ответ от background, если таковой имеется (дополнительные параметры в документации).

Чтобы получить сообщение на background (или event) существует chrome.runtime.onMessage.addListener(callback) (документация), где callback — функция-обработчик сообщения. Она прининимает аргументы message , sender и sendResponse , где message — само сообщение, sender — информация об отправителе сообщения (например информация о вкладке, с которой отправили сообщение) и sendResponse — функция, которую нужно вызвать, если необходимо отправить ответ обратно на front.

Таким образом, чтобы отправить сообщение по клику и получить ответ:

// front.js document.addEventListener('click', function () < chrome.runtime.sendMessage('Hello, background', function (response) < console.log(response); // 'Hi front!' >); >, false); // background.js chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) < console.log(message); // 'Hello background' sendResponse('Hi front!'); >); 

Пространство chrome.runtime используется с Chrome 26+, до этой версии использовалось chrome.extension . (т.е. chrome.extension.sendMessage и chrome.extension.onMessage.addListener ).

Форум

eandr-67 писал(а): Спасибо за ссылку, прекрасно подтверждающую то, что это глюк антивируса. Так что кончай здесь вонять и бегом в техподдержку Касперского — плеваться на некачественный антивирус.

Для убогих: иногда смотреть и комментарии в вирустотале нужно, а не тупо пялиться в отчёты!
Максим Сообщения: 6022 Зарегистрирован: 11 дек 2010, 20:29

Re: Ругается антивирус? Тебе сюда!

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

Хоть это и не моя проблема, но я еще днем отправил этот файл (он от одного из расширений для Chrome) в Касперский на пересмотр, так что скоро и узнаем есть там вирус или всё таки нет.

Fassendek Сообщения: 12 Зарегистрирован: 02 апр 2018, 08:46 Откуда: Москва, Россия. Контактная информация:

Re: Ругается антивирус? Тебе сюда!

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

Хоть это и не моя проблема, но я еще днем отправил этот файл (он от одного из расширений для Chrome) в Касперский на пересмотр, так что скоро и узнаем есть там вирус или всё таки нет.

И не думал ругаться. Просто крендель выше взял мне и нахамил.
Что касается вируса. Я без касперского могу сказать что там. Деобфускацировав файл background.js и найдя в соседней папке файл promo.jpg выяснилось, что именно он содержит вредоносный код. Пересохранив его в редакторе и заменив в установщике проблема исчезает. Это тоже не моя проблема конечно, и тем не менее.

Максим Сообщения: 6022 Зарегистрирован: 11 дек 2010, 20:29

Re: Ругается антивирус? Тебе сюда!

eandr-67, и вы тоже не ругайтесь, никто тут не «воняет», Fassendek отстаивает свою точку зрения и правильно делает. Я вот тоже свою отстаиваю, но это не значит что кто-то из нас прав, могу ошибаться и я, и Fassendek. Другое дело что в 99% случаев сообщений о вирусах в этой теме это пустышка, т.е. ложные срабатывания антивируса, отсюда и моя позиция. Но я не святой, бывает всякое, поэтому как уже сказал выше еще днем я отправил файл на проверку. Если окажется что Fassendek прав, то придётся удалить это расширение из Chrome и перезалить Ultimate версию на сервер, это не сложно.

А теперь пожалуйста прошу всех — перестаньте ругаться, давайте жить дружно

Максим Сообщения: 6022 Зарегистрирован: 11 дек 2010, 20:29

Re: Ругается антивирус? Тебе сюда!

Fassendek, антивирус ругается на файл background.js, а не на картинку, поэтому не совсем понял смысл пересохранения картинки, это ни на что не влияет по идее. Ну а что касается того, чья это проблема, то всё зависит от того ложное срабатывание или нет. Если не ложное, то проблема будет уже моей, но изначально конечно это вина Google т.к. вредоносное расширение попало в их магазин расширений. Ну а если ложное срабатывание, то Касперский просто удалит сигнатуру из базы, они это делают достаточно оперативно.

Fassendek Сообщения: 12 Зарегистрирован: 02 апр 2018, 08:46 Откуда: Москва, Россия. Контактная информация: