В конце 2020 года мы делали проект со снежинками — писали специальный скрипт, который запускал падающий снег на сайтах. Если бы мы хотели сделать такой снег на любом своём сайте, это не составило бы труда: добавляешь скрипт в код страницы, и готово.
А вот на чужих сайтах была проблема. Скрипт нужно было вставлять через консоль. А если на сайте была настроена политика безопасности, которая запрещает запуск внешних скриптов, то магия не срабатывала.
Сегодня мы это исправим — сделаем расширение для браузера, которое может запускать любой скрипт на любой странице. Мы охватим принцип, на основе которого вы сможете сделать собственные расширения, в том числе намного более сложные.
Что такое расширение
Расширение для Chrome — это небольшая программа, которая выполняется внутри браузера и помогает расширить возможности сайтов. Сила расширения в том, что оно может выполняться прямо из меню браузера и не зависит от политик безопасности.
Примеры того, что может сделать расширение:
Как сделать фон вк опера расширение
- Сохранить ваши пароли и другие личные данные,
- Выдрать из страницы скрытые данные (например, ссылку на скачивание музыки).
- Менять что-то на странице, например, отключать рекламу, переводить текст, удалять ненужное.
- Собирать статистику вашей работы в интернете.
- Подключаться к другим сервисам (почте, чатам, файлообменникам) и взаимодействовать с ними из браузера.
В этой статье
Мы сделаем самое простое расширение для браузера Chrome, которое позволит запускать скрипт со снежинками на любом сайте, независимо от настроенной политики безопасности. Для этого воспользуемся официальным руководством Google по созданию расширений.
Манифест
В каждом расширении для браузера должен быть манифест — документ, в котором написано:
- как называется расширение;
- к чему расширение может получить доступ;
- какие скрипты будут работать в фоне;
- как должна выглядеть иконка расширения;
- что показать или что выполнить, когда пользователь нажмёт на иконку расширения.
Манифест задаёт общие правила для всего расширения, поэтому манифест — единственный обязательный компонент. Можно обойтись без иконок и скриптов, но манифест обязательно должен быть.Каждый манифест хранится в файле manifest.json — создадим пустой файл с таким именем и напишем внутри такое:
«name»: «Запускаем снежинки на любом сайте»,
«description»: «Проект журнала Код»,
«version»: «1.0»,
«manifest_version»: 3
>
Первые две строчки — это название и подробное описание расширения. Третья отвечает за номер версии расширения, а последняя говорит браузеру, какая версия манифеста используется в описании. На момент выхода статьи в феврале 2021 года используется третья версия.
Сохраняем файл и всё, расширение готово. Оно ничего не умеет, ничего не делает, зато мы уже можем добавить его в браузер. Для этого запускаем Хром и в адресной строке пишем:
Как установить расширение на любой браузер… Обзор/Настройка Vk styles…
Мы попадаем на страницу, которая нам покажет все установленные расширения:
Чтобы добавить своё расширение, в правом верхнем углу включаем режим разработчика, а затем нажимаем «Загрузить распакованное расширение»:
Теперь выбираем папку, в которой лежит наш манифест:
Отлично, мы только что добавили в браузер новое расширение:
Теперь мы можем обновлять наш манифест, класть в ту же папку дополнительные файлы, а для обновления в браузере достаточно будет нажать на круглую стрелку на карточке расширения.
Чтобы было проще работать и тестировать расширение, закрепим его на панели браузера:
Иконки
У расширения есть две иконки, которыми мы можем управлять:
- Картинка в карточке расширения на странице настроек.
- Иконка на панели браузера.
Чтобы не рисовать всё с нуля, скачаем папку с иконками из того же руководства 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» >>
Сохраняем манифест, обновляем расширение на странице настроек и смотрим результат:
Настраиваем разрешения
Разрешения — это то, что браузер позволяет делать расширению со страницами и с их содержимым. Для запуска снежинок нам нужно сделать две вещи:
- Понять, какая вкладка сейчас активная, чтобы запустить снежинки именно на ней.
- Запустить наш скрипт со снежинками.
Чтобы получить доступ к активной вкладке и к запуску скриптов, добавим в манифест такую строку:
«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() полный код скрипта из проекта со снежинками и сохранить файл.
Проверка
В прошлый раз мы не смогли запустить скрипт на любой странице Яндекса — мешала политика безопасности. Теперь всё работает:
Скачать упакованное расширение. Перед установкой его нужно распаковать в любую папку.
Источник: thecode.media
Пишем расширение для Chrome «загрузка аудиозаписей с Вконтакте»
В магазине расширений chrome наверняка уже есть загрузчики песен с вконтакте, но мы попробуем написать свой.
Наше расширение будет добавлять ссылку в каждую из песен раздела Мои Аудиозаписи, которая будет скачивать песню.
Выглядеть должно примерно так:
 |
 |
Давайте начнем.
Вообще, писать расширения не так уж и сложно. Расширение — это всего лишь это файл-описание + html/js/css контент. Наше будет состоять из трех файлов — файла описания (manifest.json), внедряемого js скрипта (vk_inject.js), и внедряемого файла стилей vk_styles.css).
Главный файл в расширении — это, конечно, manifest.json. В нем содержится дескриптор расширения, и ссылки на внедряемые файлы.
Пока ничего сложного. Кроме описания, здесь содержится тег «content_scripts», который определяет, какие js и css файлы будут внедрены в страницу.
В данном случае, наше расширение будет встраивать файлы vk_inject.js и vk_styles.css в каждую страницу, подходящую по адресу к маскам http://vk.com/audios* или https://vk.com/audios*. Это как раз те адреса, где содержатся наши (или других пользователей) аудиозаписи на сайте Вконтакте.
Файл стилей (vk_styles.css) будет очень простой. Мы всего лишь определим css класс для внедряемой ссылки.
Обязательно нужно следить, чтобы класс не пересекался со стилями исходной страницы.
Конечно, мы можем обойтись и без внедряемого css файла, и просто задать все стили в коде при создании элемента ссылки, но я
хочу показать вам возможность внедрения стилей. Вы также можете переопределить стили для своих ссылок.
.downloadLink
Практически все действия будут происходить во внедряемом коде vk_inject.js.
Итак, что будем делать:
Страница vk.com/audios* содержит два списка песен — 1) изначальные аудиозаписи на вашей странице — элемент и 2) список поиска — . В списке поиска будут отображаться найденные композиции, если вы перейдете в режим поиска. Оба эти элемента изначально присутствуют на странице аудиозаписей, так что мы можем поменять каждый из них.
Проблема в том, в каждом их этих списков могут добавляться или удаляться записи. Нам нужно следить за этим.
Внедряемый скрипт исполняется в отдельной виртуальной машине, и не может взаимодействовать со скриптом на станице. Поэтому мы не можем переопределять исходные функции или как-то иначе перехватывать js код на исходной странице.
Но, к счастью, оба эти скрипта разделяют DOM-дерево, так что мы будем следить за обновлениями DOM элементов списка с помощью MutationObserver.
(function () < // обернем все в безымянную функцию, чтобы не создавать глобальных переменных — просто хороший тон var observer = new MutationObserver(listModified); // создаем объект observer ->вызывает listModified при каждом изменении DOM var initialList = document.getElementById(‘initial_list’); // список изначальной музыки на нашей странице if (initialList) < // список уже был заполнен при подключении расширения — добавляем ссылку «Скачать» для каждой записи в нем var rows = initialList.children; for (var i = 0; i < rows.length; i++) < addDownloadLink(rows[i]); // добавляем ссылку >observer.observe(initialList, ); // следим за изменениями в изначальном списке тоже > // список аудиозаписей при поиске var searchList = document.getElementById(‘search_list’); if (searchList) < // search_list изначально всегда пустой, нам нужно только отрабатывать добавление песен в него observer.observe(searchList, ); // следим за ним > // вызывается, когда в список песен добавляются (или удаляются) элементы function listModified(mutations) < for (var i = 0; i < mutations.length; i++) < var mut = mutations[i]; if (mut.type != ‘childList’) < return; >// пройдемся по добавленным песням for (var j = 0; j < mut.addedNodes.length; j++) < addDownloadLink(mut.addedNodes[j]); >// удаленные записи — mut.removedNodes игнорируем > > // функция добавляет ссылку «Скачать» к разметке песни function addDownloadLink(row) < var titleNode = row.querySelector(‘div.title_wrap’); // Исполнитель песни + название if (!titleNode) // если ничего не работает (может, разметка была изменена?)- выйдем < return; >var input = row.querySelector(‘div.play_btn > input’); // найдем input, в котором хранится url if (!input) < return; >var ref = input.getAttribute(‘value’); // сам URL файла ref = ref.substr(0, ref.indexOf(‘?’)); // обрежем все после ‘?’, чтобы оставить только ссылку на mp3 var link = document.createElement(‘a’); link.className = ‘downloadLink’; // добавим css класс ‘downloadLink’ для нашей ссылки link.textContent = «Скачать»; link.setAttribute(‘download’, titleNode.textContent + ‘.mp3’); // имя файла для загрузки link.setAttribute(‘href’, ref); link.addEventListener(‘click’, function(event)< // при клике на нашу ссылку, отменим запуск проигрывателя event.stopPropagation(); >); titleNode.appendChild(link); > >)();
Устанавливаем расширение.
Итак, все три файла готовы. Вы можете скопировать их из поста или загрузить архивом.
В браузере войдите на страницу настроек, выберите вкладку Расширения (или просто введите «chrome://extensions» в адресную строку). Обязательно нужно включить Режим разработчика. Потом нажмите Загрузить распакованное расширение. .
Выберите папку, куда вы сохранили эти три файла. В моем случае это D:Droopyworkhabrplugin.
Расширение должно появиться в списке. Включите его.
Давайте проверим, как оно работает. Для этого зайдем на vk.com, и выберем раздел Мои аудиозаписи.
Так, ничего не работает…
Почему? Потому что Вконтакте при переходе со страницы на страницу самостоятельно обновляет html и программно изменяет url в адресной строке. Это не является классическим браузерным переходом со страницы на страницу.
Поэтому браузер и не запустил наше расширение, хотя адрес страницы и стал «https://vk.com/audios*».
Для запуска нашего скрипта, нам нужно явно обновить страницу аудиозаписей.
Обновляем.
Ура, ссылки «Скачать» появились!
Причем, если мы начнем поиск аудиозаписей на этой же странице, то для каждой найденной песни автоматически будет добавляться ссылка на скачивание. Расширение работает.
Но есть одна сложность с названием скачиваемой песни. Когда вы нажимаете на ссылку «Скачать», в диалоге сохранения файла вам будет предлагаться имя файла из набора цифр. Нам же нужно нормальное название песни.
Дело в том, что вконтакте хранит аудиозаписи на отдельном домене, и хром для этого случая будет использовать имя файла на сервере вместо предложенного в ссылке.
В багтрекере хрома сказано, что в этом случае нужно выбирать пункт Сохранить ссылку как. в контекстном меню. Тогда нам будет предложено нормальное имя файла.
Наше расширение, конечно, не всегда работает на всех страницах вконтакте, но для скачивания любимых песен из своих аудиозаписей вполне подходит.
Источник: habr.com
Как создать и опубликовать расширение Chrome за 20 минут
В этой статье Джейк Принс объясняет, что расширение для Chrome — это совсем не страшно и самое простое можно сделать буквально за несколько минут.
Вы когда-нибудь задумывались над тем, как сделать расширение для Chrome? Ну, я здесь, чтобы рассказать вам, насколько это просто. Выполните следующие действия, ваша идея станет реальностью и вы сможете мгновенно опубликовать реальное расширение в интернет-магазине Chrome.
Что такое расширение Chrome?
Расширения Chrome позволяют добавлять функциональные возможности в веб-браузер Chrome без глубокого погружения в нативный код. Это потрясающе, потому что вы можете создавать новые расширения для Chrome на основе технологий, с которыми хорошо знакомы веб-разработчики: HTML, CSS и JavaScript. Если вы когда-либо создавали веб-страницу, то сможете и создать расширение — быстрее, чем пообедаете. Единственное, что вам нужно узнать – это как добавить некоторые функции в Chrome с помощью JavaScript API, которые предоставляет Chrome.
Что вы хотите создать?
Прежде чем начать, вы должны иметь общее представление о том, что вы хотите сделать. Это не должно быть какой-то новой прорывной идеей, с начала мы можем просто сделать проект для удовольствия. В этой статье я расскажу вам о своей идее и о том, как я реализовал ее виде расширения Chrome.
План
Некоторое время назад я использовал расширение Unsplash — оно показывало хорошие фоновые изображения на открываемой по умолчанию пустой вкладке. Позже я заменил его расширением Muzli, которое превращает вкладку по умолчанию в ленту материалов о дизайне и новостей со всего Интернета.
Давайте использовать эти два расширения как вдохновение для создания чего-то нового, но на этот раз для любителей кино. Моя идея – показать случайное фоновое изображение фильма каждый раз, когда вы открываете новую вкладку. При прокрутке расширение должно превращаться в хороший канал о популярных фильмах и телешоу. Давайте начнем.
Шаг первый: настройка
Первый шаг – создать файл манифеста с именем manifest.json. Это файл метаданных в формате JSON, который содержит такие свойства, как имя вашего расширения, описание, номер версии и так далее. В этом файле мы сообщаем Chrome, что расширение будет делать, и какие разрешения он требует.
Для расширения нам нужно иметь разрешение на управление activeTab, поэтому наш файл manifest.json выглядит примерно так:
«browser_action»: < «default_icon»: «tab-icon.png», “default_title”: “Have a good day” >,
“chrome_url_overrides” : < “newtab”: “newtab.html” >,
“permissions”: [“activeTab”] >
Как вы можете видеть, мы указываем, что newtab.html будет HTML-файлом, который должен отображаться каждый раз, когда открывается новая вкладка. Для этого нам нужно иметь разрешение на управление activeTab, поэтому, когда пользователь пытается установить расширение, они будут предупреждены обо всех разрешениях, которые необходимы расширению.
Еще одна интересная вещь внутри manifest.json – это действия браузера. В этом примере мы используем его, чтобы установить заголовок, но вообще есть больше параметров. Например, чтобы показывать всплывающее окно, когда вы нажимаете значок приложения внутри адресной строки, все, что вам нужно сделать, это что-то вроде этого:
“browser_action”: < “default_popup”: “popup.html”, >,
Теперь popup.html будет отображаться внутри всплывающего окна, которое создается в ответ на щелчок пользователя на действии браузера. Это стандартный HTML-файл, поэтому он дает вам свободу действий над тем, что отображает всплывающее окно. Просто поместите часть своей магии в файл с именем popup.html.
Шаг второй: проверьте, работает ли оно
Следующий шаг – создать файл newtab.html и поместить в «Hello world»:
Test
Hello World!
Чтобы проверить, работает ли он, посетите chrome://extensions в вашем браузере и убедитесь, что флажок «Режим разработчика» установлен в верхнем правом углу.
Нажмите Load unpacked extension и выберите каталог, в котором живут ваши файлы расширений. Если расширение действует, оно будет активным сразу, чтобы вы могли открыть новую вкладку и увидеть свой «Hello world».
Шаг третий: сделайте приятный дизайн
Теперь, когда у нас появилась наша первая функция, пришло время сделать ее красивой. Мы можем просто создать новую вкладку, создав файл main.css в нашем каталоге расширений и загрузив его в наш файл newtab.html. То же самое происходит с включением файла JavaScript для любых активных функций, которые вы хотели бы использовать. Предполагаю, что вы создавали веб-страницы раньше, и теперь вы можете использовать свои навыки, чтобы показать своим пользователям все, что захотите.
Окончание плана
Все, что мне понадобилось для завершения расширения – это HTML, CSS и JavaScript, поэтому я не думаю, что важно глубоко погрузиться в код, поэтому я расскажу об этом быстро.
Вот что я сделал:
Для моей идеи мне нужны были хорошие фоновые изображения, поэтому в файле JavaScript я использовал TMDb API для получения списка популярных фильмов, взял их фоновые изображения и поместил их в массив. Всякий раз, когда страница загружает его, он случайным образом выбирает одно изображение из этого массива и задает его как фон страницы. Чтобы сделать эту страницу более интересной, я также добавил текущую дату в верхнем правом углу. И для получения дополнительной информации, он позволяет пользователям кликнуть на фон, который приводит к посещению страницы IMDb фильма.
Я создал экран с хорошей лентой популярных фильмов, когда пользователь пытается прокрутить вниз. Я использовал тот же API для создания карточки фильма с изображением, заголовком, рейтингом и количеством голосов. По клику на карточке показывается обзор с кнопкой для просмотра трейлера.
Результат
Теперь с этим маленьким файлом manifest.json и некоторыми HTML, CSS и JavaScript, каждая новая вкладка, которую вы открываете, выглядит намного интереснее:
Шаг 4. Публикация расширения
Когда ваше первое расширение Chrome выглядит красиво и работает так, как должно, пришло время опубликовать его в магазине Chrome. Просто перейдите по этой ссылке, чтобы перейти на панель инструментов Chrome Web Store (вам будет предложено войти в свою учетную запись Google, если это не так). Затем нажмите кнопку «Add new item», примите условия, и вы перейдете на страницу, где вы можете загрузить расширение. Теперь сжимаем папку, содержащую ваш проект, и загружаем этот ZIP-файл.
После успешной загрузки файла вы увидите форму, в которой вы должны добавить некоторую информацию о своем расширении. Вы можете добавить иконку, подробное описание, загрузить некоторые скриншоты и так далее.
Убедитесь, что вы предоставили несколько хороших изображений, чтобы показать свой проект. Магазин может использовать эти изображения для продвижения вашего новаторского проекта. Чем больше изображений вы предоставите, тем более заметным будет ваше расширение. Вы можете просмотреть, как ваше расширение показывается в веб-магазине, нажав кнопку «Предварительный просмотр».
Когда вы довольны результатом, нажмите «Опубликовать изменения». Готово!
Теперь перейдите в Интернет-магазин Chrome и найдите расширение по своему названию (может потребоваться некоторое время, прежде чем оно там появится). Если вас это интересует, вы можете найти мое здесь.
Осталось только получить пользователей!
Вывод
Веб-разработчику очень легко создать расширение Chrome. Все, что вам нужно, это HTML, CSS, JavaScript и базовые знания о том, как добавить функциональность с помощью некоторых JavaScript API, которые предоставляет Chrome. Ваше первое расширение может быть опубликовано в Интернет-магазине Chrome всего за 20 минут. Создание нового, стоящего и красивого расширения займет, конечно, немного больше времени. Но все зависит от вас!
Используйте свое творческое мышление, чтобы придумать что-то интересное, но если вы когда-нибудь застрянете, есть отличная документация по расширениям Chrome — вероятно, она сможет вам помочь.
Источник: apptractor.ru