Adelitusn.ru

ПК и Техника
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

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

В конце 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() полный код скрипта из проекта со снежинками и сохранить файл.

Проверка

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

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

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

Полезные расширения браузера Google Chrome для веб-мастеров

Здравствуйте друзья и читатели WordPress-book.ru. В переговорах с коллегами по скайпу я слегка утомился объяснять каждому то, как я так быстро вычисляю те или иные SEO показатели и другие параметры их сайтов. В этом мне, конечно, здорово помогают расширения (плагины), расширяющие функциональность моего браузера Google Chrome. После небольшого вступления, о всех дополнительных расширениях, которые я использую в работе, и пойдет речь.

Расширения браузера Google Chrome

Работа любого веб-мастера так или иначе связана с SEO-оптимизацией, с созданием сайтов, с веб-дизайном и т.д. Вы наверняка используете сразу несколько различных браузеров. Обычно есть основной рабочий браузер и несколько дополнительных, которые нужны для проверки корректности отображения всех элементов сайта (как в плане структуры, так и в плане дизайна). Многие веб-мастера в качестве основного браузера используют Google Chrome.

Читайте так же:
Почему не работает аська

Какими же преимуществами он обладает?

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

Для почитателей Яндекс.Браузера, хорошей новостью будет то, что их браузер тоже поддерживает расширения, рассмотренные ниже.

Установка расширения в Google Chrome предельно проста. Перейдите в интернет-магазин браузера, в окно поиска вставьте название искомого плагина и нажмите на клавиатуре клавишу Enter. Для установки найденного расширения в браузер нажмите на кнопку « Бесплатно «.

Поиск и установка расширений для браузера Chrome

На те плагины, которые в поиске недоступны, я дал прямую ссылку. Итак, приступим.

Анализ сайта от PR-CY.ru

Это расширение в один клик перебрасывает вас на страницу анализа сайта сервисом PR-CY.ru. Полезно для сравнительного анализа большого количества сайтов, например сайтов-конкурентов.

Анализ сайта от PR-CY.ru расширение браузера Google Chrome

Silver Bird

Если у вас есть свой аккаунт в Twitter, то Silver Bird позволит вам прямо из окна браузера взаимодействовать со своим твиттер аккаунтом (читать новые твиты, публиковать свои, …).

Silver Bird - расширение браузера Google Chrome

ColorPick Eyedropper

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

ColorPick Eyedropper - расширение браузера Google Chrome

Статистика сайтов от LiveInternet

Данное расширение берет сведения о просматриваемом сайте с сервиса статистики LiveInternet и предоставляет их вам по первому требованию (естественно, лишь в том случае, когда на сайте стоит счетчик статистики LiveInternet эта самая статистика не является закрытой), значительно облегчая анализ посещаемости своего и чужих ресурсов. Можно увидеть охват аудитории, долю поискового трафика, демографию посетителей, посмотреть посещаемость по суткам, неделям и месяцам. Вся эта информация помещается в компактном окошке. Также можно посмотреть более подробную информацию по статистике, перейдя по соответствующей ссылке.

Статистика сайтов от LiveInternet - расширение браузера Google Chrome

RDS bar

Довольно информативное и полезное расширение для веб-мастера. RDS bar предоставляет расширенные сведения о просматриваемом сайте. Все эти сведения удобно поделены на разделы – «индекс цитирования» (отображаются ТИЦ и PR), «проиндексировано» (отображается, сколько именно страниц и картинок сайта проиндексировано в Яндексе и Гугле, а также факт индексации конкретной страницы этими поисковиками), «ссылки на сайт» (показывается количество внешних ссылок, зафиксированных разными сервисами), «наличие сайта в основных каталогах», «другие параметры», … Кроме этого RDS bar выделяет внешние ссылки на странице: открытые — красным пунктиром, закрытые nofollow — перечеркивает, закрытые noindex — закрашивает в желтый цвет.

RDS bar - расширение браузера Google Chrome

Alexa Traffic Rank

Напомню, Alexa Traffic Rank — это буржуйская система рейтинга, учитывающая посещаемость, поведение и другие действия пользователей на проекте. Причем, чем меньше ранк, тем сайт авторитетнее. Что интересно, система собирает статистику только с тех браузеров, на которых установлено данное расширение Alexa Rank. Отсюда можно сделать простой вывод — установив плагин в свой браузер, вы будете способствовать увеличению рейтинга (понижению Alexa Traffic Rank) для своего сайта.

Alexa-Traffic-Rank

Таким образом, за несколько месяцев, я понизил Alexa Traffic Rank одного своего сайта более чем в 20 раз. При этом, мне почти ничего не пришлось делать, только время от времени отвечать на комментарии.

Читайте так же:
Как выбрать SSD для вашего компьютера и ноутбука?

Alexa

PageRank Status

Многофункциональный SEO плагин для браузера Google Chrome. В его арсенале присутствуют такие инструменты, как — общая статистика SEO показателей сайта, статистика изменений Alexe Traffic Rank, информация о сайте (домен, безопасность сайта, …), информация страницы (содержание мета-тегов и заголовков), внешние и внутренние ссылки страницы, расчет скорости загрузки страницы, инструменты (ресурсы веб-мастера для поисковых систем и другие полезные веб-инструменты). Незаменимое приложение для аналитики собственного сайта и сайтов конкурентов.

PageRank Status - расширение браузера Google Chrome

Сервис ускорения индексации сайтов, страниц в Яндексе и Гугле

Полезное расширение (SEO: Быстрая индексация сайтов в поис…) для быстрого доступа к сервису по ускорению индексации сайтов, страниц в двух, самых популярных поисковиках. Сервис оповещает известные ему рабочие пинг-службы слежения о появлении новых URL адресов. Очень удобный плагин, благодаря которому сервис по ускорению индексации будет всегда под рукой.

Сервис по ускорению индексации сайтов

Панель Яндекс-Сервисов

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

Панель Яндекс-Сервисов

TinEye Reverse Image Search

Незаменимое приложение для проверки картинок сайта на уникальность. Находится в интернет-магазине по этому адресу. После добавления расширения в браузер, кликните правой кнопкой мыши по картинке, которую хотите проверить, в открывшемся меню выберите « Search Image on TinEye «. Сервис найдет в интернете все похожие изображения, если таковые имеются.

TinEye Reverse Image Search

PhotoTracker Lite — поиск оригинальных или похожих изображений в Google.Images, Yandex.Картинки, Bing.Images и в TinEye.com

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

Расширение для поиска похожих изображений

AdBlock — как заблокировать рекламу

Никак не мог не упомянуть про расширение AdBlock. Данный плагин будет полезен не только веб-мастерам, но и вообще всем пользователям интернета. Ведь, он блокирует рекламу. С AdBlock я уже давно перестал раздражаться на назойливые мигающие баннеры, всплывающие окна и так далее. Да и страницы, перегруженные рекламой, стали открываться заметно быстрее.

После установки плагина, кликните по его кнопке левой клавишей мыши и выберите « Не запускать на страницах этого домена «. Мою рекламу просматривать можно, желательно еще по ней кликать, иногда :-).

AdBlock - как заблокировать рекламу

Print Friendly & PDF — распечатать web-страницу

Всем нам, как веб-мастерам, так и обычным пользователям интернета, иногда приходится распечатать какую-либо web-страницу с полезной информацией на принтере. Для этого достаточно щелкнуть правой мышью по странице и в выпадающем меню выбрать «Печать…». Но, вот беда, на страницу печати попадают ненужные нам комментарии, список рубрик, меню меток, шапка сайта и многое другое. Тут, придет на выручку популярное расширение Print Friendly & PDF. Кстати, расширение умеет не только отправлять на печать информационную часть статьи, но и преобразовывать страницу в pdf формат.

Print-Friendly-&-PDF

Список уже установленных расширений в Chrome доступен в его настройках.

Расширения браузера Chrome

Чтобы не тормозить работу браузера, н екоторые расширения я включаю только по мере надобности. На странице настроек, для каждого расширения, доступна опция выключения/включения и иконка его удаления.

Читайте так же:
Ошибка отсутствия файла steam_api.dll. Что делать?

Буду рад, если в комментариях расскажите о своих полезных расширениях к браузеру Chrome. С удовольствием включу их в свою коллекцию и в этот обзор :-).

10 полезных расширений Google Chrome для разработчиков и дизайнеров

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

ColorZilla

Понравился цвет на другом сайте или хотите проверить, тот ли оттенок взяли из макета? Включите расширение ColorZilla и посмотрите подробную информацию о цвете любого элемента на странице.

Расширение для веб-разработчика ColorZilla

Можно сразу скопировать нужный цвет

WhatFont

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

Расширение WhatFont

Удобное окно с характеристиками шрифта

CSSViewer

CSSViewer — отличное расширение для исследования CSS-свойств элементов. Включите его, наведите курсор на нужный объект и посмотрите подробное описание стилей.

Расширение CSSViewer

Подробное описание элемента

Code Cola

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

Расширения для веб разработчика CodeCola

Изменения сохраняются, для перезагрузки страницы требуется подтверждение

Windows Resizer

Простой инструмент для изменения размеров окна и вьюпорта. Можно выбрать разрешение из списка или задать свои параметры. В параметрах расширения доступны настройка горячих клавиш и создание пресетов для тестирования. Для удобства можно вывести Windows Resizer как всплывающее окно.

Расширение Windows Resizer

Пресеты для тестирования адаптивности

PerfectPixel

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

Расширение PerfectPixel

Можно наложить любое изображение

PageLiner

В паре с PerfectPixel отлично работает расширение PageLiner. С его помощью вы добавите в окно браузера горизонтальные и вертикальные линии — прямо как в графическом редакторе.

Расширение PageLiner

Удобно равнять элементы интерфейса по линиям

Siteimprove Accessibility Checker

Siteimprove Accessibility Checker помогает убедиться в том, что HTML соответствует стандартам доступности — то есть вашей странице могут пользоваться люди с разными возможностями и ограничениями.

Подробнее о доступности и способах её проверки можно узнать из этой статьи.

Расширение Siteimprove Accessibility Checker

Быстрая проверка доступности страницы

Wappalyzer

Увидели классный сайт и захотели повторить отдельные фишки в своём проекте? Узнайте с помощью Wappalyzer, какие технологии, фреймворки и библиотеки для этого нужны.

Расширение Wappalayzer

Вся информация представлена в виде удобной таблицы

Web Developer

Мощное расширение, с помощью которого можно отключать CSS и JavaScript, удалять изображения, проверять валидность HTML и CSS, изменять стили, тестировать формы, смотреть мета-теги, изменять размер окна браузера. В принципе, Web Developer способен заменить практически все указанные выше расширения вместе взятые. Вопрос только в удобстве.

Расширение Web Developer

Все необходимые инструменты на одной панели

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

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

Перейти к регистрации

10 расширений для браузера, необходимых сммщику

Расширения для браузера, полезные интернет-маркетологу и SMM специалисту

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

Читайте так же:
Программы для записи дисков

Мы подобрали необходимые приложения для Google Chrome для SMM специалистов и интернет-маркетологов.

SimilarWeb

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

Расширение для маркетологов - SimilarWeb

Главред

Очищает текст от лишних слов и помогает отредактировать его в информационном стиле. Подойдет для тех, кто много занимается контентом.

Расширение для Google chrome - Главред

Fontface Ninja

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

Плагин Fontface Ninja поможет определить шрифт на сайте

OneTab

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

VkOpt

Специальное SMM расширение, которое открывает новые функции при работе с ВКонтакте: поиск по изображению, скачивание картинки в разном качестве, скачивание диалогов, просмотр списка wiki-страниц группы и другие опции. Безопасность использования данного расширения для ВКонтакте — на ваше усмотрение.

Расширение VkOpt для работы с Вконтакте

Facebook Pixel Helper

Полезное расширения для SMM-щиков. Если вы работаете с ремаркетингом Facebook и настраиваете события, вам не обойтись без этого инструмента. Он определяет, какие события видит пиксель Facebook при выполнении действий на сайте и упрощает поиск ошибок.

Facebook Pixel Helper - незаменимое расширения для SMM

Palette Creator

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

С помощью Palette Creator легко создавать цветовые схемы

Mercury Reader

Отличное расширение для маркетологов которое отключает рекламу. Но не полностью — ведь вы наверняка мониторите объявления конкурентов, чтобы находить идеи для креативов и быть в курсе), так что не можете полностью убрать рекламу.

Writefull

Если вы общаетесь с коллегами или создаете контент на английском, но еще не достигли уровня Advanced, поставьте Writefull — расширение подскажет верное продолжение для типичных словосочетаний и снизит количество ошибок. Примеры инструмент берет из Google News и Google Books, так что предложенным вариантам можно смело доверять.

Плагин для SMM Writefull поможет с изучением английского

Popsters

Расширение для браузера Popsters показывает статистику любой страницы в 10 социальных сетях (Facebook, Instagram, VK, Одноклассники, YouTube, Twitter, Coub, Flickr, Pinterest и Google Plus). Приложение считает ER для всех публичных страниц, которые раньше анализировались в Popsters. По одному клику можно получить подробную статистику и актуализировать данные.

Расширение для браузера Popsters упростит анализ страниц соцсетей

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

Полезные статьи на близкую тему:

    ; ; для более эффективной работы.

Попробуйте бесплатный пробный тариф Popsters чтобы получить статистику активности до 10 любых страниц в следующие 7 дней

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector