Background js что это

What is the purpose of background.js on a chrome extension?

I don’t see use for background.js or background.html just yet. It seems like just a middle man. I can easily communicate with all my content scripts by using the following code in popup.html/popup.js (browser action):

then on my content.js :

P.S Hope this helps someone out, I already have a working extension ! 😀

2 Answers 2

a file named background.js has no significance in chrome extensions, you must be asking about Background Pages or Event Pages

These pages do not have to have any particular name, they can be called fred.js or wilma.js — their "special purpose" is only realised if one adds them to the extension through the chrome extension manifest like so:

The functionality offered by and use case for such pages is in the above linked documentation pages

Создаём своё расширение для Google Chrome

На хабре уже есть несколько статей о создании расширений для хрома, поделюсь своим опытом, затронув основные вещи и места, в которых у меня возникли трудности.
Что понадобится для создания расширения в двух словах:
1) Базовые знания Javascript
2) Базовые знания HTML
3) 5$

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

Итак, я начинаю создание расширения с создания папки самого расширения, в которую будем класть все создаваемые нами файлы. Назову её «losttime». Далее, я создаю файл manifest.json, выглядит он следующим образом:

manifest.json

Некоторые из строк должны быть интуитивно понятны, но что обязательно нужно знать:
— Значение manifest_version должно быть обязательно «2»;
— В content_scripts пишем, какой скрипт будет запускаться на всех страницах отдельно;
— В background пишем общий скрипт(фоновый скрипт), который запускается при запуске браузера;
— В permissions пишем адрес сайта, с которого будет браться информация.

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

То самое окошко, которое Вы можете видеть по клику на иконку расширения — это страница: popup.html.

Она у меня выглядит следующим образом:

Чтобы было понятнее, описание кода вставил в самом HTML. Меню я организую просто: на картинку ставлю внутреннюю ссылку расширения.

Раз уж начал про popup.html, то расскажу сразу и о popup.js

Выглядит он у меня весьма просто:

Наиболее интересный момент из моего скрипта, я считаю, должен быть:
chrome.runtime.sendMessage();
Тут происходит отправка сообщения background скрипту, а именно две переменные: site:sait — содержит адрес сайта, на котором скрипт
time:localStorage[sait] — количество времени, проведенное на этом скрипте.

Далее, рассмотрим фоновый скрипт background.js, где и происходит приём данных, а точнее рассмотрим саму функцию приёма данных.

background.js

Вот, собственно, и она. Разбирать подробно ничего не стану, т.к. это в принципе и не нужно. Достаточно знать наглядный пример, чтобы осуществить задуманное. Если в скрипте background.js добавить какие-либо данные в локальное хранилище( а также куки, web sql), то эти же данные можно будет использовать и в popup.js скрипте.

Вот собственно всё, что я хотел поведать о создании расширения, но я затрону еще один момент, в котором у меня возникли трудности.

На странице настроек мне необходимо было организовать перетаскивание сайтов в разные колонки.

Т.к. данные вставляются посредством InnerHtml, то данная возможность просто так не появится. Вот, что пришлось организовать:

Думаю, объяснять не нужно. Почитать подробнее можете по ссылке

Тестирование расширения

Заходим в Настройки — Инструменты — Расширения, жмем на «Загрузить распакованное расширение»

Публикация расширения
Заходим на страницу оплачиваем 5$, публикуем.
Я не останавливаюсь на моментах, с которыми у меня не возникли трудности. А трудности возникли при оплате карточкой:
— В моём случае должен быть подключен 3д пароль.
Если Вам при оплате пишет ошибку, звоните своему банку и узнавайте. Мне за минуту помогли и всё гуд.

А также само расиширние.

Style background Property

The background property sets or returns up to eight separate background properties, in a shorthand form.

With this property, you can set/return one or more of the following (in any order):

The properties above can also be set with separate style properties. The use of separate properties is highly recommended for non-advanced authors for better controllability.

Модификация веб страницы

Одним из наиболее распространённых вариантов использования расширений является внесение изменение в веб-страницу. К примеру, расширение может изменить стиль, применённый к странице, скрыть существующие или вставить на страницу дополнительные DOM-узлы.

Существует два способа сделать это используя WebExtensions API:

• Декларативно: объявить шаблон, которому соответствует набор URL-адресов, и загрузить набор скриптов на страницы, которые попадают в под этот шаблон.
• Программно: используя JavaScript API, загрузить скрипт на страницу, из определённой вкладки.

В любом случае, эти скрипты называются контентными скриптами, и отличаются от других скриптов, которые составляют расширение:

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

В этой статье мы рассмотрим оба способа загрузки скрипта.

Модификация страниц, подпадающих под URL-шаблон

Прежде всего создадим новую директорию, назовём её «modify-page». В этой директории, создадим файл «manifest.json», со следующим содержимым:

Ключ content_scripts — это как мы загружаем скрипты на страницы, соответствующие URL-шаблону. В нашем случае, content_scripts говорит браузеру загрузить скрипт «page-eater.js» на все страницы, начинающиеся с https://developer.mozilla.org/.

Примечание: Поскольку свойство «js» ключа content_scripts это массив, вы можете использовать его, для внедрения более одного скрипта. Если вы сделаете это, страницы получат набор, как если бы эти скрипты были загружены самой страницей, они будут загружены в той же очерёдности, в которой они расположены в массиве.

Примечание: Ключ content_scripts также имеет свойство «css» , которое вы можете использовать для вставки CSS-таблиц.

Далее, создадим файл «page-eater.js», внутри директории «modify-page»:

Примечание: Обратите внимание, несмотря на то, что в указанном видео, на странице addons.mozilla.org всё работает нормально, на текущий момент, для этого сайта, контентные скрипты заблокированы.

Программная модификация страницы

Что, если вы всё ещё хотите «съедать» страницы, но лишь в тех случаях, когда пользователь попросил об этом? Давайте обновим этот пример таким образом, чтобы мы внедряли контентный скрипт, когда пользователь выбирает соответствующий пункт контентного меню.

Для начала обновим «manifest.json»:

Мы удалили ключ content_scripts и добавили два новых:

: для внедрения скрипта, нам нужны разрешения для страниц, которые мы модифицируем. Разрешение activeTab это способ получить доступ к текущей вкладки. Нам также нужно разрешение contextMenus , чтобы добавлять в контекстное меню новые элементы. : мы используем этот ключ, для загрузки постоянного «фонового скрипта», с именем «background.js», в котором мы настроим контекстное меню и внедрим контентный скрипт.

Давайте создадим этот файл. Создадим новый файл «background.js» в директории «modify-page» и поместим в него следующий код:

В этом скрипте мы создаём элемент контекстного меню, передавая ему определённый идентификатор и заголовок (текст будет отображаться в элементе контекстного меню). Затем мы настраиваем обработчик событий таким образом, чтобы когда пользователь выбирает пункт контекстного меню, осуществлялась проверка, наш ли это элемент eat-page . Если это так — внедряем скрипт «page-eater.js» в текущую вкладку, используя tabs.executeScript() API. Это API опционально принимает идентификатор вкладки, в качестве аргумента. Мы опустили его, это означает, что скрипт будет внедряться в текущую активную вкладку.

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

Теперь перезагрузим расширение, откроем страницу (на этот раз любую) активируем контекстное меню и выберем «Съесть эту страницу»:

Примечание: Обратите внимание, несмотря на то, что в указанном видео, на странице addons.mozilla.org всё работает нормально, на текущий момент, для этого сайта, контентные скрипты заблокированы.

Обмен сообщениями

Контентные и фоновые скрипты не могут на прямую взаимодействовать друг с другом. Не смотря на это они могут взаимодействовать с помощью обмена сообщениями. Для этого один конец создаёт обработчик сообщений, а другой — может посылать сообщения. В следующей таблице представлены API-интерфейсы, задействованные с каждой стороны:

Давайте обновим наш пример, чтобы посмотреть, как послать сообщение из фонового скрипта.