Chrome extension что это

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

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

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

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

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

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

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

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

В этой статье

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

Манифест

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

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

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

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

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

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

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

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

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

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

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

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

Иконки

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

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

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

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

 < "name": "Запускаем снежинки на любом сайте", "description": "Проект журнала Код", "version": "1.0", "manifest_version": 3, "action": < "default_icon": < "16": "/images/get_started16.png", "32": "/images/get_started32.png", "48": "/images/get_started48.png", "128": "/images/get_started128.png" >>, "icons": < "16": "/images/get_started16.png", "32": "/images/get_started32.png", "48": "/images/get_started48.png", "128": "/images/get_started128.png" >>

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

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

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

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

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

«permissions»: [«activeTab», «scripting»],

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

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

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

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

     /* задаём размеры кнопки и размер текста на кнопке */ button   

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

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

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

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

// получаем доступ к кнопке let snow = document.getElementById("snow"); // когда кнопка нажата — находим активную вкладку и запускаем нужную функцию snow.addEventListener("click", async () => < // получаем доступ к активной вкладке let [tab] = await chrome.tabs.query(< active: true, currentWindow: true >); // выполняем скрипт chrome.scripting.executeScript(< // скрипт будет выполняться во вкладке, которую нашли на предыдущем этапе target: < tabId: tab.id >, // вызываем функцию, в которой лежит запуск снежинок function: snowFall, >); >); // запускаем снег function snowFall()

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

Проверка

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

Скачать упакованное расширение. Перед установкой его нужно распаковать в любую папку.

Расширения браузера, их виды и польза

Расширения браузера — это микропрограмма, которая расширяет (дополняет) функционал браузера, она также способна через браузер встраиваться в облачный софт, и расширить его функционал. Их называют browser extensions (расширения браузера), plug-in (плагин), или add-on (дополнение), и сейчас они поддерживаются практически всеми браузерами. Самые популярные расширения для google chrome и расширения для firefox.

Для создания расширения нужно знать HTML, CSS, JavaScript, и продумать его функциональную нагрузку. Готовое расширение предоставляется пользователю в виде архива, или скачивается через официальный магазин расширений браузера (Chrome,Opera, Firefox, и другие), и просто активируется.

Для чего нужны расширения Хром, Опера, Firefox, и остальные. Основные виды browser extensions

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

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

Интеграционные расширения

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

Дополнительные возможности вашего SaaS в любой вкладке браузера

Это могут быть фоновые сервисы разного характера: проверки, подсказки, календари, переводчики, помощники и прочие.

Микросервисы

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

Инструменты для разработчиков

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

Преимущества и недостатки расширений браузера

Преимущества расширений:

1. Быстрота доступа, удобство и понятность использования;
2. Кроссплатформенность — способность работать на любой платформе, где есть браузер;
3. Возможность интегрировать неинтегрируемое, вставить свою функциональность в сторонние продукты в ядро которых доступа нет;
4. Возможность объединять свои системы и облачные сервисы в комплексный корпоративный ландшафт систем;

Недостатки браузерных расширений:

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

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

Google Chrome Extensions — Часть 1. Архитектура

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

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

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

Manifest.json

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

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

Content Scripts

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

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

Content Security Policy

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

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

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

Коммуникация

Так как background страница в другой области видимости чем например контент скрипт который выполняется в контексте веб-страницы, нужен какой то способ коммуникации между Content Scripts и Background scripts.

Эту возможность нам и предоставляет API. Chrome Javascript API вводит концепцию Message Passing с помощью которой и происходит коммуникация. Background страница может подписываться на сообщения которые пришли из content script-а и наоборот, кроме того давать ответ в том же канале. API дает возможность работать с короткими запросами похожими больше на события и долговременными (аналог полинга).

Два описанных метода коммуникации в Chrome расширениях используют для background страниц или отдельных окон расширения с content script-ами и наоборот. Content scripts выполняються в своей песочнице и это вызывает проблему с доступом к странице и области видимости скриптов.

К сожалению Chrome браузер не предоставляет нормальных способов для решения этой проблемы. Непосредственно с контент скрипта, доступиться к функциям или переменной страницы в данный момент невозможно. Но для этого можно использовать Web Accessible Resources.

Как я уже отмечал ранее, с content script-а мы можем модифицировать DOM, а именно создать например новый тег script, в атрибуте src задать ему путь к скрипту который открыт для внешнего использования, и добавить этот тег в DOM.

Таким способом подключать можно только те которые описаны в массиве web_accessible_resources в manifest.json файле.

Что такое расширения?

Дополнения расширяют и изменяют функциональность браузера. Они разрабатываются с использованием стандартных Веб-технологий — JavaScript, HTML и CSS, а также некоторых специальных JavaScript API, которые позволяют вам делать намного больше, чем то, на что вы способны на любом из сайтов. Вот некоторые из примеров того, что вы можете делать:

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

Дайте пользователям продемонстрировать себя: Дополнения могут управлять содержимым сайтов, например, позволять пользователям добавлять их любимые изображения как фоновые картинки для каждого сайта, которые они посещают. Ещё дополнения могут изменять и то, как выглядит сам интерфейс Firefox, делая это тем же способом, что и обычные темы (en-US) .

Добавьте или скройте содержимое веб-страниц: Возможно, вы захотите помочь пользователям заблокировать назойливую рекламу, дать доступ к туристическим путеводителям, когда на странице упоминается страна или город, или отформатировать содержимое страницы так, чтобы дать незабываемый опыт прочтения. С доступом к HTML и CSS дополнения могут помогать пользователям смотреть на Интернет так, как они хотят.

Дайте новые инструменты и функции: Добавляйте новые пункты в список дел или генерируйте QR-коды для текста страницы или различных ссылок. При помощи гибких опций интерфейса и мощью WebExtension API вы можете с лёгкостью добавлять новые функции в браузер. Причём вы можете расширить таким образом функциональность любого сайта, он не обязательно должен быть вашим.

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

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

Расширения для Firefox создаются с помощью WebExtension API — кросс-браузерной системы разработки дополнений браузера. В значительной степени её API совместим с extension API, который поддерживается браузерами Google Chrome и Opera. Расширения, разработанные для этих браузеров, в большинстве случаев будут работать в Firefox или Microsoft Edge с минимальными изменениями. Также API полностью совместим с мультипроцессным Firefox.

Мы также намерены расширять API для поддержки нужд разработчиков дополнений, и если у вас есть идеи, мы будем рады услышать их. Вы можете связаться с нами через рассылку dev-addons mailing list или на IRC канале #webextensions.

Что дальше?

• Попробуйте создать Ваше первое расширение.
• Изучите структуру и Внутреннее устройство расширений.
• Посмотрите другие Примеры расширений.

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 11 дек. 2023 г. by MDN contributors.