Файл манифеста для расширения chrome

Обновлено: 04.07.2024

Мне всегда хотелось рассказывать людям об интересных возможностях (технологиях), которые сейчас могут быть доступны каждому, но почему-то не доступны каждому. Да, получилось тавтология, но она в полной мере отображает моё внутреннее негодование на эту животрепещущую для меня тему. Как бы там ни было, речь сейчас будет не о том, как говорится. А поговорим мы сегодня о создании расширений для браузера Google Chrome (далее Хром).

Расширение, которое мы будем разрабатывать на протяжении всей статьи можно найти в магазине Google Chrome Web Store, с той лишь разницей, что там присутствует расширенный функционал. Помимо этого, присутствует исходный код на GitHub, опять таки с оговоркой на то, что там всё написано на CoffeeScript, а здесь будет вестись повествование с JavaScript. Кстати, я не поклонник и не сторонник CoffeeScript, но штука довольно интересная и полезная — советую попробовать.

Если вы когда-нибудь рассматривали идею создания расширения для Chrome, Firefox, Maxthon и прочих браузеров, то, наверное, уже успели заметить, что минимум усилий нужно приложить как раз таки для Хрома. Убедиться в этом можно, взглянув на документацию у соответствующих браузеров.

Постановка задачи

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

  • Расширение должно скрывать все комментарии в социальной сети «VK»;
  • Расширение должно иметь возможность отображать комментарии;
  • Расширение должно иметь возможность отображать комментарии на конкретных страницах;

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

Предвижу вопросы, содержание которых может быть примерно таким: «Нафига скрывать комментарии, если в этом вся суть социальной сети?!». Что же, справедливый вопрос, заслуживающий развёрнутого ответа:

Так сложились обстоятельства, что последнее время, когда я вижу комментарии в VK, мне хочется дарить горы фейспалмов комментаторам. Я подписан на большое количество различных пабликов, тематических (веб-разработка) и не очень. И как бы это не казалось странным, самым щедрым я становлюсь именно в группах с интересным для меня содержанием, а не котиками (в моём случае с пандами). Такого количества непрофессионального и безобразного потока информации в комментариях я не видел ещё нигде, да ещё и спорить думают. Помимо этого, комментарии в новостной ленте смотрятся не эстетично. В общем, сказано — сделано.

Каркас расширения

Наиприятнейшим для меня сюрпризом стало то, что в самом начале пути нас встречает описательный характер действий. Проще говоря, нам нужно описать наше приложение, его права и возможности — для этого служит файл manifest.json .

Первым делом нужно заполнить три обязательных поля:

Если с названием всё понятно, а с версией манифеста всё ещё проще, то поподробнее нужно остановиться с версией расширения.

Итак, все мы привыкли, что версия чего-либо состоит из трёх чисел, разделённых точками — Мажорное.Минорное.Патч (Имеется в виду число). С npm, bower и прочими прелестями разговор короткий: либо так, либо никак. А вот Google предлагает следующие варианты:

Тем не менее, я сторонник семантического версионирования и советую вам так же придерживаться этой идеи, но не настаиваю.

Далее рекомендуемыми полями идут:

Просто так от Хрома ничего не получить — нужны разрешения. Что же, прочим их:

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

Помимо прочего, нужно указать, что наше приложение хочет иметь иконку справа вверху:

Если приложение имеет страницу настроек, то её тоже следует указать:

Также можно перманентно вешать на различные страницы какие-то ресурсы (css или js), в зависимости от адреса:

И, напоследок, скажу, что можно указать фоновую страницу:

Фоновая страница — это невидимая страница, которая нужна для того, чтобы объединять все вкладки. Ссылки на ресурсы можно указывать как в файле манифеста, так и на самой странице background.html .

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

Фоновая страница – это невидимая страница, которая как раз и содержит такой скрипт. Их бывает два типа: persistent (постоянные) и event (управляемые событиями). Persistent, как можно догадаться, загружена постоянно, а event-страница загружается только при необходимости, когда возникает связанное с ней событие.

— Alexandr Kozlov

Обязательно прочитайте статьи Александра в его блоге.

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

В нашем случае, файл манифеста будет выглядеть следующим образом:

Из того, что ранее не рассматривалось

  • __MSG_key__ — это вариация Chrome на тему интернационализации приложений (i18n). Можно применять как в файле манифеста, так и в других файлах (даже CSS).
  • web_accessible_resources — массив путей ресурсов, которые будут впоследствии использоваться в контексте веб-страниц. Без указания в нём пути — ничего не получится использовать на страницах сайтов, если такое поведение предполагается.

Ресурсы расширения

Огромный плюс в карму Chrome — мы уже сейчас можем подключить расширение, конечно, если созданы все ресурсы, указанные в manifest.json .

Не думаю, что стоит заострять внимание на том, что содержится в файле commentblocker.css и commentblocker_on.css . Приведу лишь первый, в котором указаны все селекторы, в которых заключены комментарии:

В файле commentblocker_on.css , как не трудно догадаться, всё наоборот. Обратите внимание, что прямо в CSS я использую строку с языковом ключом content: "__MSG_mode_enable__" . Самое время создать такой файл, где эти ключи будут храниться.

В корне нашего расширения создаём директорию _locales и вложенные в неё директории en и ru . Далее в файле messages.json описываем наши ключи.

Помимо поля message есть и другие поля, о которых можно узнать из документации.

Теперь создаём файлы background.html , для начала так:

Тут всё так, как в обычном HTML — ничего необычного. Кстати, файл background.html можно не создавать, так как он генерируется автоматически, на основе полей в manifest.json .

Запускаем расширение

Запустить расширение можно, не написав ни одной строчки JavaScript. Чтобы сделать это, нужно пройтись по меню:

  • Настройка и управление Google Chrome (Гамбургер)
  • Дополнительные инструменты
  • Расширения
  • Поставить галочку напротив «режим разработчика»
  • Загрузить распакованное расширение
  • Выбрать папку с расширением

Расширение загрузилось и показалось в меню. Да, да, это вот это вот «В».

Chrome Extension — Комментариев больше нет

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

Оживляем расширение

Осталось выполнить второй пункт задачи, а именно реализовать возможность отображения комментариев. Вкратце, нам нужно запихнуть файл commentblocker_on.css , который отменит правила файла commentblocker.css . И тут к нам на помощь спешит наш всемогущий JavaScript.

Помните, что я говорил про background.html ? Да, да, про то, что его можно не создавать. Давайте слегка изменим manifest.json :

Просто подключили JavaScript файл. Ничего особенного. Переходим к этому файлу.

Просто так запихнуть JS на страницу нельзя. И такая же проблема имеется не только со скриптами. Поэтому нам нужно воспользоваться специальной инъекцией executeScript .

Сначала нужно добавить обработчик события клика на иконку расширения:

Где toggleComments — это функция, которая и будет производить инъекцию нашего CSS файла на страницу:

Думаю, что слов о том, что этот кусок кода проверяет наличие подключения нашего CSS на странице и делает выводы о необходимости его подключения или отключения, будет достаточно.

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

  • onCreated — создание вкладки.
  • onUpdated — обновление вкладки.
  • onRemoved — закрытие вкладки.

Стоит заметить, что событие onUpdated вызывается дважды:

  • Обновление страницы;
  • Полная загрузка страницы;

На StackOverflow советуют проверять статус страницы:

Теперь при нажатии на иконку будет происходить подключение файла стилей, которые будут отображать комментарии, а повторный клик на иконку — вновь их скрывать.

Выводы

Как нельзя кстати, стоит упомянуть мою полную версию расширения VK Comment Blocker, которая доступна в Chrome Web Store. Помимо этого, так же доступен полный исходный код на GitHub.

Как можно заметить, разрабатывать расширения для Chrome очень просто. Можно обладать довольно скудными знаниями в этой области, но в тоже время сделать что-то своё. Разумеется, что это лишь песчинка в океане того, что можно сделать сейчас в браузере и, возможно, сделаете вы, если начнете копать глубже, чем рассказано в этой статье.

Ссылки

А как же без дополнительного материала? Думали, что я вот так просто вас отпущу?

  • Целый блог, посвящённый разработке расширений для Chrome. . . . . . .

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

Ответ очень прост:

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

На самом деле, я не люблю углубляться в своих статьях из-за того, что их попросту будет не интересно читать. Моё дело показать, что можно сделать используя ту, или иную технологию, как это просто сделать и какие вообще есть причины рассматривать или изучать то, о чём шла речь в статье. Конечно, есть темы, которые мне очень интересны и я рассказываю о них намного больше, чем просто «обзорно».

Делимся на оплату хостинга или кофе.
Чем чаще пью кофе, тем чаще пишу статьи.

Если вам интересно, как создать расширение Chrome, документация по расширениям Chrome отлично подойдет для базовых задач. Однако для использования более продвинутых функций требуется потратить время на Google и Stack Overflow. Давайте сделаем своё расширение Chrome, взаимодействующее со страницей: которое найдет первую внешнюю ссылку на странице и откроет ее на новой вкладке.

manifest.json

Файл manifest.json сообщает Chrome важную информацию о вашем расширении, его имени и необходимых разрешениях.

Наиболее простым возможным расширением является обычный каталог с файлом manifest.json . Давайте создадим каталог и поместим следующий JSON в manifest.json :

Это самый простой manifest.json , со всеми заполненными обязательными полями. manifest_version всегда должна быть 2, поскольку версия 1 не поддерживается по состоянию на январь 2014 года. Пока что наше расширение абсолютно ничего не делает, но в любом случае давайте загрузим его в Chrome.

Установка расширения в Chrome

Чтобы загрузить расширение в Chrome, откройте chrome://extensions/ в браузере и нажмите кнопку "Режим разработчика" (Developer mode) в правом верхнем углу. Теперь нажмите кнопку "Загрузить распакованное расширение" (Load unpacked extension) и выберите директорию расширения. Теперь вы должны увидеть расширение в списке.

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

Скрипты контента

Скрипт содержимого (content script) - это "файл JavaScript, который выполняется в контексте веб-страниц". Это означает, что скрипт содержимого может взаимодействовать с веб-страницами, которые посещает браузер. Не каждый JavaScript-файл расширения Chrome может сделать это; мы посмотрим, почему позже.

Давайте добавим скрипт контента под названием content.js :

Чтобы включить скрипт, нам нужно сообщить об этом в наш файл manifest.json.

Добавьте это в свой manifest.json файл:

Это говорит Chrome о необходимости вставлять файл content.js в каждую страницу, которую мы посещаем, используя специальный шаблон URL <all_urls> . Если мы хотим вставить скрипт только на некоторых страницах, мы можем использовать специальные шаблоны. Вот несколько примеров значений для " matches ":

Перезагрузите расширение Chrome. На каждой странице, которую вы посещаете сейчас, появляется уведомление. Вместо этого давайте начнем логировать первый URL-адрес страницы.

Логирование URL

jQuery не нужен, но он делает манипуляцию с DOM проще. Сначала скачайте версию jQuery с CDN jQuery и поместите ее в папку вашего расширения. Я скачал последнюю уменьшенную версию jquery-2.1.3.min.js. Чтобы загрузить его, добавьте в manifest.json перед "content.js" . Весь ваш manifest.json должен выглядеть вот так:

Теперь, когда у нас есть jQuery, давайте используем его для логирования первой внешней ссылки на странице, добавим в content.js :

Обратите внимание, что нам не нужно использовать jQuery для проверки загрузки документа. По умолчанию Chrome вводит сценарии содержимого после загрузки DOM.

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

Действия браузера

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

Поместите файл icon.jpg из руководства по расширению Google в папку расширений и добавьте его в файл manifest.json :

Скрипт содержимого имеет доступ к текущей странице, но ограничен в API, к которым он имеет доступ. Например, он не может прослушивать клики на действие браузера. Нам нужно добавить другой тип сценария к нашему расширению, фоновый сценарий, который имеет доступ к каждому API Chrome, но не может получить доступ к текущей странице. Как говорит Google:

Контент скрипты имеет некоторые ограничения. Они не могут использовать chrome.* API, за исключением: i18n , runtime и storage .

Добавьте следующее, чтобы рассказать manifest.json о фоновом скрипте:

Теперь мы добавим background.js :

Открытие новой вкладки

Мы можем использовать API для открытия новой вкладки с помощью chrome.tabs :

Во-первых, нам нужно сказать content.js , чтобы он отправил URL на background.js . Для использования этого кода измените файл content.js :

Теперь нам нужно добавить код, чтобы сказать background.js , что нужно слушать это событие:

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

Полный текст content.js и background.js приведен выше. Вот полный manifest.json:

И вот полная структура каталога:

Для получения дополнительной информации обратитесь к официальной документации по расширениям Chrome.

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

  • Файл манифеста manifest.json, в котором записывается информация о приложении;
  • Иные файлы, которые используются в расширении: это могут быть html-странички, скрипты, картинки и т.д.
  • name, description и version — собственно имя расширения, его короткое описание и номер версии;
  • permissions — массив с дополнительными правами расширения на выполнение тех или иных действий. Подробнее почитать можно здесь. В даном случае расширение может знать об открытых вкладках и окнах браузера;
  • background_page — главная страника которая запускается при запуске браузера и работает на фоне;
  • icons — набор иконок разных размеров;
  • browser_action — описание кнопочки на панели инструментов. default_title — текст при наведении на кнопку, default_icon — иконка на кнопке, popup — html-страничка, которая откроется в попапе после клика;

Фоновая страничка будет проверять установлен ли пароль и запрашивать его при открытии браузера или создании окна с неким профилем. От протестированных мною расширений моё отличается именно тем, что более менее адекватно работает в режиме мультипрофильности.Пароль от нашего профиля будет храниться в localStorage['profile_password']. localStorage — это массив, в котором расширение может хранить свои какие-то данные, не беспокоясь о том, что какое-то другое расширение доступиться к этим данным. Для каждого расширения и профиля это отдельная переменная, поэтому можно устанавливать разные пароли на разные профили.


Устанавливать и изменять пароль мы сможем на страничке, которая открывается в попапе popup.html. Изначально пароль не установлен и его можно будет установить. Пожже его можно будет изменить или вовсе удалить. Короче говоря всяческие манипуляции с паролем для входа.Исходник файла запихиваю в спойлер, особо пояснять ничего не буду, по-моему и так всё понятно.

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

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

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

👉 Что такое расширение

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

Примеры того, что может сделать расширение:

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

В этой статье

Мы сделаем самое простое расширение для браузера Chrome, которое позволит запускать скрипт со снежинками на любом сайте, независимо от настроенной политики безопасности. Для этого воспользуемся официальным руководством Google по созданию расширений.

Манифест

В каждом расширении для браузера должен быть манифест — документ, в котором написано:

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

Манифест задаёт общие правила для всего расширения, поэтому манифест — единственный обязательный компонент. Можно обойтись без иконок и скриптов, но манифест обязательно должен быть.Каждый манифест хранится в файле manifest.json — создадим пустой файл с таким именем и напишем внутри такое:

«name»: «Запускаем снежинки на любом сайте»,
«description»: «Проект журнала Код»,
«version»: «1.0»,
«manifest_version»: 3
>

Первые две строчки — это название и подробное описание расширения. Третья отвечает за номер версии расширения, а последняя говорит браузеру, какая версия манифеста используется в описании. На момент выхода статьи в феврале 2021 года используется третья версия.

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

Мы попадаем на страницу, которая нам покажет все установленные расширения:

Делаем своё расширение для браузера за 10 минут

Чтобы добавить своё расширение, в правом верхнем углу включаем режим разработчика, а затем нажимаем «Загрузить распакованное расширение»:

Делаем своё расширение для браузера за 10 минут

Теперь выбираем папку, в которой лежит наш манифест:

Делаем своё расширение для браузера за 10 минут

Отлично, мы только что добавили в браузер новое расширение:

Делаем своё расширение для браузера за 10 минут

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

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

Делаем своё расширение для браузера за 10 минут

Иконки

У расширения есть две иконки, которыми мы можем управлять:

  1. Картинка в карточке расширения на странице настроек.
  2. Иконка на панели браузера.

Чтобы не рисовать всё с нуля, скачаем папку с иконками из того же руководства Google и положим её в ту же папку, что и манифест:

Теперь добавим иконки в манифест. За картинку в карточке отвечает блок icon, а за иконку на панели — блок action. Разные размеры картинки нужны для того, чтобы на разных мониторах с любой плотностью пикселей иконки выглядели хорошо:

Сохраняем манифест, обновляем расширение на странице настроек и смотрим результат:

Добавляем иконки в манифест

Настраиваем разрешения

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

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

Чтобы получить доступ к активной вкладке и к запуску скриптов, добавим в манифест такую строку:

"permissions": ["activeTab", "scripting"],

Показываем меню

Если мы сейчас нажмём на иконку расширения на панели браузера, то ничего не призойдёт, потому что мы ничего не запрограммировали. Исправим это — сделаем так, чтобы при нажатии расширение показывало кнопку запуска. Когда расширение будет уметь больше, вместо одной кнопки можно будет показать целое меню.

Чтобы сделать всплывающее меню, добавим в манифест в раздел action такую строку:

Она означает, что при нажатии на иконку мы увидим рядом с ней мини-страничку, на которой что-то будет.Создадим в той же папке расширения файл popup.html и добавим в него такой код:

Чтобы браузер не ругался, что у нас нет файла popup.js , создадим пустой файл с таким названием и положим его в ту же папку:

Показываем меню расширения

Сохраняем манифест, обновляем его на странице настроек и видим, что у нашего расширения появилось меню с кнопкой:

Показываем меню расширения

Запускаем снежинки

Вся магия будет происходить в файле popup.js — откроем его и добавим такой код:

Последнее, что нам осталось сделать, — положить в функцию snowFall() полный код скрипта из проекта со снежинками и сохранить файл.

Проверка

В прошлый раз мы не смогли запустить скрипт на любой странице Яндекса — мешала политика безопасности. Теперь всё работает:

Проверяем расширение

Что такое Chrome Extension? Это маленькая программа, которая модифицирует и дополняет функциональность браузера Google Chrome. Для создания полноценного расширения вам понадобиться знание HTML, CSS, JavaScript. После написания, файлы пакуются в специальный файл с расширением .crx, который собой являет zip архив. В таком виде пользователь сможет установить расширение. За счет того что этот пакет содержит все необходимые файлы, chrome расширение не зависит от ресурсов из интернета и способен корректно работать даже в оффлайн режиме.


Любое chrome расширение может иметь такую структуру:


может, так как не все эти части есть обязательные, все зависит от конкретных потребностей и особенностей реализации.

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

  • Manifest_version — Версия манифест файла
  • Name — название расширения
  • Description — описание расширения
  • Version — версия расширения
  • Permissions — массив с названиями доступов, которые необходимы для корректной работы расширения, например без пермишина tabs вы не сможете работать с вкладками браузера
  • Content_scripts — массив файлов, которые будут подключены как контент скрипты
  • Background — описание файла или файлов, которые будут выполнять роль background скрипта и страницы
  • Web_accessible_resources — набор файлов, которые имеют открытый доступ извне
  • Browser_action — настройка соответствующей кнопки, в тулбаре
  • Icons — списки иконок по стандартным размерам 16 48 и 128.

Если взять определение с официальной документации — невидимая страница, которая содержит основную логику расширения. Главной особенностью background страницы есть то, что она запускается и выполняет некую работу в фоновом режиме, как только запускается браузер и держится в оперативной памяти как фоновый процесс на протяжении сессии. Используя комбинацию Shift + Esc Вы можете просмотреть список задач, которые выполняются внутри браузера Google Chrome. Когда установлено много расширений, список задач этом списке также большой. Они занимают часть памяти и возможно других ресурсов, но не выполняют никаких функций, так как непосредственно само расширение не запущено, а в списке вы видите background страницу конкретного расширения.


Чтобы оптимизировать использование ресурсов, в 2012 году была разработана концепция ивент страниц (Event Pages). Она выполняет те же функции что и бэкграунд страница, но призвана решить проблему производительности и ресурсов, которые используются иррационально. Главное отличие этого подхода — вместо непрерывной работы в фоновом режиме, ивент страница запускается только тогда, когда нужно — например чтобы обработать конкретное событие. После чего выгружается, освобождая память до того момента пока конкретное событие не сработает в следующий раз. В плане кода, разницы никакой между этими двумя подходами нет, а единственное что нужно, указать в manifest.json файле это корректное значение проперти persistent. По умолчанию это значение будет стоять в true для стандартных background страниц и false для ивент страниц.

Это обязательные элементы Chrome Extension-а, теперь давайте перейдем к опциональным.

Контент скрипты — это javascript файлы или код, которые выполняються не в отдельном фоновом процессе (как бекграунд скрипты) а в контексте Веб страницы. Контент скрипты используют в ограниченном виде Chrome API. Но при этом они изолированные и не могут использовать, как функции и переменные которые объявлены, например на бекграунд странице так и переменные, функции и тд. со скриптов находящихся на веб странице.


Пример расширения с использованием контент скриптов

Полноценный доступ есть только через к DOM дереву страницы. С контент скрипта вы можете инициировать ивенты, изменять DOM. Даже можете добавлять script тег в страницу и подключать нужные файлы.


Content Security Policy

Для Chrome расширений, действует так называемое Content Security Policy — это набор строгих правил, которые необходимы для того чтобы сделать расширения безопасней и контролировать контент который может быть загружен и выполнен в расширении.

По умолчанию, если использовать манифест 2 версии то в расширении будут такие ограничения:

  • Запрещено использовать eval и схожие функции
  • Inline джаваскрипт выполняться не будет
  • Возможность загружать только локальные скрипты и ресурсы

Также можно разрешить использование eval функции.

Разрешить нельзя использование только инлайн скриптов.

Разрабатывая хром расширения, получить доступ к методам и возможностям браузера можно с помощью специального Chrome Javascript API’s. Большинство методов асинхронные, о чем нужно помнить разрабатывая расширение.

Читайте также: