Установка расширений Google Chrome прямо на сайте. Как это сделать?

image

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

Chrome Extension Manager расширение для Google Chrome для удобного управления расширениями.

image

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

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

Установить Chrome Extension Manager

Рудольф Коршун Aug 4, 2020·7 min read

Хотите написать расширение для Chrome, но не знаете, с чего начать? Читайте это руководство с нуля до подготовки к публикации скрипта содержимого. Здесь применяются фреймворк CSS TailWind и универсальный упаковщик Parcel.js, решаются проблемы переопределения стиля страницы и перезагрузки расширения. Весь код вы найдёте в конце.

Написать расширение для Chrome непросто. Это не то же самое, что разработка веб-приложения: не хочется перегружать браузер оверхедом JS, ведь расширения работают одновременно с сайтами. Более того, у нас нет инструментов упаковки или отладки из привычных фреймворков.

Когда я решил заняться созданием расширения для Chrome, то обнаружил: блог-постов и статей об этом довольно мало. И информации оказывается даже ещё меньше, если вам захочется использовать новые инструменты, например TailwindCSS.

В этом руководстве мы напишем расширение для Сhrome с помощью Parcel.js для упаковки и просмотра результатов, а также TailwindCSS для оформления. Кроме того, мы отделим стилизацию расширения от веб-сайта, чтобы избежать конфликта CSS.

Есть несколько типов расширений для Chrome, достойных упоминания:

  • Скрипты содержимого. Наиболее распространённый тип. Они запускаются в контексте веб-страницы и могут изменять её. Именно такое расширение мы и будем создавать.
  • Выпадающее окно (popup). Использует иконку справа от адресной строки, чтобы открыть окно с каким-то HTML.
  • UI с опциями. Пользовательский интерфейс для настройки параметров в качестве расширения. Получить доступ к нему можно, щелкнув правой кнопкой мыши по значку расширения и выбрав пункт “Параметры” или перейдя на страницу расширения из списка расширений Chrome: chrome://extensions.
  • Расширение DevTools. Добавляет функциональность в инструменты разработчика. Оно может добавлять новые панели интерфейса, взаимодействовать с проверяемой страницей, получать информацию о сетевых запросах и многое другое — документация Google Chrome.

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

Parcel.js — это упаковщик веб-приложений, не требующий конфигурации. Входным может быть файл любого типа, упаковщик прост в использовании и работает с любыми приложениями, включая расширения Chrome. Создаём папку demo-extension . Удостоверьтесь, что у вас установлены yarn или npm. Здесь будем работать с yarn. Установим Parcel как локальную зависимость и создадим папку src

 yarn add -D parcel@nextmkdir src

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

Каждому браузерному расширению необходим файл манифеста. Именно там мы определяем версию и метаданные расширения, а также скрипты, которые в нём работают. Контент, фон, всплывающее окна, разрешения, если они нужны и так далее. Вы найдёте полное описание файла манифеста в документации Chrome: https://developer.chrome.com/extensions/manifest. Давайте двинемся дальше и добавим в src файл manifest.json с такими строками:

Прежде чем углубиться в детали работы расширения Chrome, установим и настроим TailwindCSS.

TailwindCSS — это CSS-фреймворк, применяющий служебные классы низкого уровня для создания переиспользуемых и настраиваемых компонентов интерфейса. Tailwind устанавливается двумя способами, самый распространённый — установка с помощью NPM. Кроме того, сразу же стоит добавить autoprefixer и postcss-import:

yarn add tailwindcssyarn add -D autoprefixer postcss-import

Они нужны, чтобы добавить префиксы поставщиков к стилям и иметь возможность писать конструкции @import "tailwindcss/base", импортируя файлы Tailwind прямо из node_modules.

Теперь, когда всё установлено, давайте создадим файл postcss.config.js в корневом каталоге. Этот файл — конфигурация для PostCSS. Вставим в него такой код:

Порядок плагинов здесь имеет значение! Это всё, что нужно, чтобы начать использовать TailwindCSS в вашем расширении. Начинаем. Создадим файл style.css в папке src и импортируем в него стили Tailwind:

Очищаем CSS с помощью PurgeCSS

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

$ npx tailwindcss init

Теперь у нас есть tailwind.config.js. Чтобы удалить неиспользуемый CSS, добавляем пути ко всем нашим файлам JS в поле конфигурации purge:

Теперь CSS будут очищены, а неиспользуемые стили удалены при сборке для продакшна.

Chrome не перезагружает файлы при внесении изменении, то есть нам нужно нажимать кнопку “Перезагрузить” на странице расширений каждый раз, когда мы хотим посмотреть на результат. К счастью, есть пакет NPM для автоматической перезагрузки:

$ yarn add crx-hotreload

Чтобы использовать его, создадим файл background.js в папке src и импортируем в этот файл crx-hotreload:

import "crx-hotreload";

Наконец, добавим указатель на background.js в manifest.json, чтобы он мог работать с нашим расширением: горячая перезагрузка в продакшне отключена по умолчанию:

Достаточно конфигураций. Давайте создадим небольшую форму-скрипт в расширении.

Типы скриптов расширения Chrome

Как уже упоминалось, у расширений Chrome есть несколько типов скриптов:

  • Скрипты содержимого — это сценарии, которые выполняются в контексте посещаемой веб-страницы. Вы можете запустить любой код JavaScript, в противном случае доступный на любой обычной веб-странице, включая доступ к DOM и манипулирование им.
  • Фоновые скрипты — это место, где вы можете реагировать на события браузера с доступом к API расширения.

Добавляем скрипт содержимого

Создадим файл content-script.js в папке src. И добавим HTML-форму в только что созданный файл:

import cssText from "bundle-text:../dist/style.css";  
New event!

for=»event-time-input» class=»font-bold pl-1 block mb-1 text-xl» > Time id=»event-time-input» type=»time» value=»17:30″ class=»border-black mr-4 lowercase duration-400 w-auto bg-white text-xl border-2 rounded-lg px-4 py-4 focus:outline-none focus:shadow-outline» /> Casablanca Africa

Перевод статьи Marouane Rassili: “How to Make a Chrome Extension — a Browser Plugin Development Tutorial”

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

В этой статье мы рассмотрим создание самого простого расширения — запускатора избранных сайтов. Хотя приложение и будет примитивным, оно всё-таки раскроет процесс создания и загрузки расширения для google Chrome.

Желательно знать HTML, CSS и JS (если придётся расширить набор функций) на самом базовом уровне, чтобы понимать материал лучше, но в любом случае мы будем объяснять код.

Митап «Эволюция фронтенд-разработчика»

10 июля в 12:00, Санкт-Петербург, Беcплатно

tproger.ru События и курсы на tproger.ru

В каждом расширении для Chrome должен быть файл manifest.json. Он служит только для описания функций приложения, общего описания, номера версии и разрешений. Более подробно вы сможете ознакомиться с этим файлом в блоге команды разработчиков Chrome.

Давайте же внесём свой вклад в развитие web

Здесь всё очень просто:

{  "manifest_version": 2,  "name": "Tproger Launcher",  "description": "Запускатор представительств Tproger",  "version": "1.0.0",  "icons": {"128": "icon_128.png"},  "browser_action": {  "default_icon": "icon.png",  "default_popup": "popup.html"  },  "permissions": ["activeTab"]  }

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

Для начала давайте напишем базовый HTML-код:

<!DOCTYPE html>              

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

<!DOCTYPE html>         />     Tproger Media Quick Launcher           <link        <link    

Не забывайте указывать кодировку, иначе не отобразятся кириллические буквы.

Перейдём ко второму блоку кода, а именно к тегу body и его содержимому.

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

                          

Запускатор Tproger (1.0.0)

Переходим к следующему контейнеру. Он содержит описание функций расширений.

           Быстрый доступ к контентным площадкам Типичного Программиста         

Далее следует контейнер modal-icons, внутри которого ещё 5 контейнеров.

      

Для каждой иконки мы выделили отдельный контейнер с классом flex, чтобы знать, к каким элементам будем применять Flexbox.

Кроме того, мы указали названия иконок для каждого ресурса. Более детально со всеми доступными элементами можно ознакомиться на сайте Bootstrap.

Стили

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

      /* Модальная структура документа */      /*общие настройки для всего документа*/      html,      body {        font-family: 'Open Sans', sans-serif;        font-size: 14px;        margin: 0;        min-height: 180px;        padding: 0;        width: 380px;      }      /*задаём настройки для заголовков первого уровня*/      h1 {        font-family: 'Menlo', monospace;        font-size: 22px;        font-weight: 400;        margin: 0;        color: #2f5876;      }      a:link,      a:visited {        color: #000000;        outline: 0;        text-decoration: none;      }      /*задаём ширину картинки*/      img {        width: 30px; /*ширина изображений*/      }      .modal-header {        align-items: center; /*выравнивание элементов по центру*/        border-bottom: 0.5px solid #dadada; /*свойства нижней разделительной линии*/        height: 50px;      }      .modal-content {        padding: 0 22px; /*отступы сверху и снизу, сверху и слева*/      }      .modal-icons {        border-top: 0.5px solid #dadada; /*свойства верхней разделительной линии*/        height: 50px;        width: 100%;      }      .logo {        padding: 16px; /*отступы со всех сторон*/      }      .logo-icon {        vertical-align: text-bottom; /*выравнивание по нижней части текста*/        margin-right: 12px; /*задётся отступ элементов от изображения*/      }      .version {        color: #444;        font-size: 18px;      }

Основные настройки документа заданы, давайте перейдём к следующему фрагменту кода, в котором как раз и будет применён Flexbox, о котором шла речь в начале статьи.

.flex-container {        display: flex; /*отображает контейнер в виде блочного элемента*/        justify-content: space-between; /*равномерное выравнивание элементов*/        padding: 10px 22px;      }      /*задаём настройки для контейнеров с иконками*/      .flex {        opacity: 1; /*параметр непрозрачности иконок*/        width: 120px;      }      .flex:hover {        opacity: 0.4; /*уровень непрозрачности при наведении курсора на элемент*/      }      .flex .fa {        font-size: 40px;        color: #2f5876;      }         

Мы постарались как можно подробнее объяснить в комментариях относительно сложные моменты. А сейчас нам нужно лишь загрузить наше расширение в браузер Chrome и оно будет работать, а если пройдёт модерацию, то появится в магазине расширений (плагинов).

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

     />      Tproger Media Quick Launcher        />        /*здесь мы прописали стили*/                      

Проверка кода и публикация

Прежде чем опубликовать, проверьте ещё раз весь код. Если вы делали всё так, как мы, то у должно было получиться следующее:

<!DOCTYPE html>           />    Запускатор Tproger                             /* Модальная структура документа */      /*общие настройки для всего документа*/      html,      body {        font-family: 'Open Sans', sans-serif;        font-size: 14px;        margin: 0;        min-height: 180px;        padding: 0;        width: 380px;      }      /*задаём настройки для заголовков первого уровня*/      h1 {        font-family: 'Menlo', monospace;        font-size: 22px;        font-weight: 400;        margin: 0;        color: #2f5876;      }      a:link,      a:visited {        color: #000000;        outline: 0;        text-decoration: none;      }      /*задаём ширину картинки*/      img {        width: 30px; /*ширина изображений*/      }      .modal-header {        align-items: center; /*выравнивание элементов по центру*/        border-bottom: 0.5px solid #dadada; /*свойства нижней разделительной линии*/        height: 50px;      }      .modal-content {        padding: 0 22px; /*отступы сверху и снизу, сверху и слева*/      }      .modal-icons {        border-top: 0.5px solid #dadada; /*свойства верхней разделительной линии*/        height: 50px;        width: 100%;      }      .logo {        padding: 16px; /*отступы со всех сторон*/      }      .logo-icon {        vertical-align: text-bottom; /*выравнивание по нижней части текста*/        margin-right: 12px; /*задётся отступ элементов от изображения*/      }      .version {        color: #444;        font-size: 18px;      }      .flex-container {        display: flex; /*отображает контейнер в виде блочного элемента*/        justify-content: space-between; /*равномерное выравнивание элементов*/        padding: 10px 22px;      }      /*задаём настройки для контейнеров с иконками*/      .flex {        opacity: 1; /*параметр непрозрачности иконок*/        width: 120px;      }      .flex:hover {        opacity: 0.4; /*уровень непрозрачности при наведении курсора на элемент*/      }      .flex .fa {        font-size: 40px;        color: #2f5876;      }                                           

Запускатор Tproger (1.0.0)

Быстрый доступ к контентным площадкам Типичного Программиста

После проверки можно приступать к публикации расширения. Для этого у вас должны быть следующие файлы и папки:

И далее следуем инструкциям на скриншотах ниже.

Для загрузки расширения в магазин нам нужно зайти в меню, навести мышку на «дополнительные настройки», а затем выбрать «расширения» или ввести в адресной строке chrome://extensions/.

Далее нажимаем на «загрузить распакованное расширение» и выбираем папку с файлами.

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

Надеемся, что всё работает правильно и вы понимаете структуру расширений для Chrome.

Основано на видео с канала «Traversy Media»

2. Imgur Uploader Imgur Uploader – замена оригинального Imgur, удаленного из интернет-магазина Chrome, но с меньшим набором функций. Расширение позволяет загрузить любую картинку, поделиться ей в соцсетях (Facebook, Twitter, Pinterest, и Reddit) или сделать скриншот. Для того, чтобы им воспользоваться, нужно вызвать контекстное меню, – в галерее Chrome расширение не работает. 3. Colorzilla С помощью Colorzilla можно пипеткой взять цвет из любой точки вашего браузера и определить его номер. Незаменимая вещь для дизайнеров. 4. What Font Типичная ситуация – вам понравился шрифт на одном из сайтов, но вы не знаете, как он называется. Лезть в коды и выискивать название слишком долго (а многие и вообще не знают, как это делается). С расширением What Font вам потребуется на это всего пару секунд. Вы просто наводите курсор мыши на нужное вам слово и получаете название шрифта. Работает и с латинскими, и с кириллическими шрифтами. 5. Resolution Test С помощью Resolution Test вы можете посмотреть, как выглядит веб-страница на различных типах экранов. К стандартному набору разрешений можно добавить любые свои. 6. User-Agent Switcher Позволяет проверить, как ваш сайт выглядит на разных типах платформ. Работа с информацией: экспресс-перевод и анализ текста, удобный поиск, систематизация и шеринг 7. Google Dictionary Самый быстрый способ перевести нужное слово на английский. Вы просто выделяете его и щелкаете на значок расширения. Очень удобно. 8. «Главред» Плагин, который помогает очищать текст от всякого словесного мусора, приводить материалы в порядок, согласно правилам инфостиля. 9. LanguageTool Расширение проверяет ваши тексты на наличие орфографических и грамматических ошибок где угодно в интернете – считывает поля в соцсетях, на почте и т. д. На сайте еще есть плагин для Google Docs, надстройка для Word и даже десктопная версия, которая работает без интернета. Кстати, огромный плюс, что поддерживается 25 языков: можно проверять тексты на английском, немецком и др. 10. Multicopy Расширение добавляет в меню пункт, позволяющий сохранять (и не терять) сразу несколько кусков текста. Удобнее, чем многократное «Ctrl+C» и «Ctrl+V» куда-нибудь в Word или «Блокнот». 11. Characters and words counter Простое расширение для подсчета символов/слов в любом выделенном тексте. Область применения не ограничивается копирайтингом: знаки считают при подготовке рекламных объявлений, метатегов и т. д. В настройках плагина можно выбрать, что именно отображать: символы с пробелами, количество слов или число символов без пробелов. 12. Evernote Web Clipper Самое крутое расширение для сохранения статей, закладок, картинок и другого контента. Правда, чтобы его использовать, нужен аккаунт в Evernote. Вас еще нет в Evernote? Так чего же вы ждете? Срочно регистрируемся! Ведь не зря у этого сервиса столько поклонников. 13. Spell Checker for Chrome Проверяет правильность написания. Не нужно открывать Word и ждать, пока он загрузится. 14. OneTab C помощью расширения OneTab вы можете сэкономить 95 % памяти браузера, а также избавиться от беспорядка на панели вкладок. Когда у вас открыто много страниц, вы просто нажимаете на его иконку и сворачиваете все вкладки в аккуратный список. Чтобы их развернуть, достаточно нажать на кнопку “Restore it”. 15. Dualless Разделяет ваш монитор на две части. Размер окон настраивается. 16. Print Friendly & PDF Удаляет рекламу, меню навигации и весь остальной мусор перед печатью веб-страницы. Также позволяет отредактировать документ и сохранить его в формате pdf. 17. Convertio Полезнейшее расширение для конвертирования файлов из одного формата в другой. Поддерживается свыше 2 500 различных комбинаций: rar в zip, pdf в jpg, epub в pdf, png в ico и многие другие. Продуктивность: тайм-трекинг, таск-менеджмент 18. Block site Когда вы поймете, какие сайты являются вашими главными тайм-киллерами, вам, вероятно, захочется как-то уменьшить свое время пребывания на них. А поскольку зависимость уже достаточно сильна, без посторонней помощи вы вряд ли сможете справиться. Решение этой проблемы – расширение Block site. С помощью него можно либо полностью заблокировать сайт, либо указать время, когда он должен быть заблокирован (например, в рабочее – с 9 до 18). Тогда у вас точно не будет соблазна полазить по страничкам «ВКонтакте». Пригодится в работе: «Транслитерация кириллицы в латиницу онлайн» В галерее Chrome расширение не работает, воспользоваться им можно, выбрав «Заблокировать эту ссылку» в меню. 19. Extensity Расширение для управления расширениями (простите за тавтологию). Одним кликом включает и выключает плагины. Думаю, после прочтения этой статьи оно вам точно понадобится. 20. The Great Suspender The Great Suspender – расширение, которое делает Google Chrome менее прожорливым, приостанавливая работу вкладок, которые в данный момент не используются. Время, на которое будет приостановлена работа данных вкладок, можно назначить самому. 21. RescueTime Отличное приложение для любителей прокрастинации и вообще всех, кто хочет контролировать свое время или хотя бы просто понять, на что оно тратится. Списки отвлекающих/продуктивных сайтов настраиваются. 22. Tomato Clock Простейший инструмент тайм-менеджмента, работающий по методу «помидора». Кнопка «Tomato» запускает отсчет 25 минут, по истечении срока раздается звуковой сигнал. Потом, соответственно, надо выбрать – короткий или длинный перерыв. Есть статистика. SEO, веб-разработка, безопасность: статистика сайтов, подбор ключевых слов, проведение технического аудита 23. Yandex Wordstat Assistant Для тех, кто не готов платить за Key Collector. Расширение значительно ускоряет ручной сбор поисковых запросов с «Вордстата». Как составить семантическое ядро, если вы не сеошник и не хотите им быть 24. RDS bar Расширение для быстрого анализа основных SEO-показателей: PR, Alexa Rank, входящие ссылки и т. д. 25. NoFollow Находит и выделяет красной рамкой тег no-follow и метатег no-index. 26. Wappalyzer Расширение, которое показывает, какие веб-технологии использовались при разработки того или иного сайта. Показывает CMS, установленные счетчики, язык программирования и т. д. 27. Alexa Traffic Rank Alexa Traffic Rank предоставляет данные о сайте (трафик, среднее время загрузки), который вы посещаете, без прерывания от просмотра. Также можно посмотреть, как данный сайт выглядел в прошлом с помощью сервиса Wayback Machine, связанные ссылки и т. д. 28. SEOquake SEOquake – расширение, которое предоставляет данные основных показателей поисковой оптимизации сайтов и подробный анализ страниц поисковой выдачи, а также позволяет проводить SEO-аудит для технической подготовки к работам по продвижению сайта. 29. Check My Links Расширение Check My Links выделяет все ссылки на странице, неработающие – красным, остальные зеленым. 30. BuiltWith Technology Profiler Данное расширение показывает, с помощью каких инструментов был «построен» просматриваемый сайт и какие сервисы аналитики, рекламы, отслеживания, коммуникации он использует. 31. SimilarWeb Этот плагин измеряет количество трафика на сайт и его источники, показывает поведенческие метрики (показатель отказов, время на сайте и др.). Необходим для анализа конкурентов, оценки площадок под внешний контент-маркетинг. Работа с соцсетями и YouTube: оценка площадок, удобный поиск и постинг контента, аналитика 32. Social Book Post Manager Менеджер постов «Фейсбука». Позволяет массово удалять их, менять настройки конфиденциальности, управлять лайками. 33. Pepper panel Инструмент быстрого анализа сообществ «ВКонтакте». Показывает пол и возраст подписчиков, если их больше 1 000. Бесплатно отслеживать понравившуюся группу можно после регистрации и вступления в сообщество самого сервиса. Для использования парсеров уже придется покупать подписку от 490 рублей в месяц. 34. Pablo Простейший инструмент для создания изображений для соцсетей. За минуту можно загрузить фото, выбрать шаблон и формат, добавить текст. Исходные картинки и тексты можно копировать в Pablo в один клик с любого ресурса. 35. Giphy for Chrome Расширение позволяет быстро добавлять гифки из библиотеки giphy.com в Gmail, Twitter, Facebook и др. 36. VidIQ Крутой плагин для просмотра статистики по своему YouTube-каналу и анализа конкурентных (по вовлеченности, просмотрам и др.). Также инструмент пригодится для подбора тегов и расширенного встраивания видео. «Ютуб-аналитика: обзор инструментов сбора собственной статистики и анализа конкурентов» Деловая переписка по e-mail : отслеживание писем, быстрый поиск контактов на сайте, автозаполнение 37. Email Finder Расширение мгновенно находит на сайтах email-адреса, тем самым экономит время на поиск контактов. Еще есть встроенная функция проверки ящиков на работоспособность. Плагин пригодится при общении с вебмастерами, рассылке вакансий и коммерческих предложений. 38. Gmail Snippets Плагин, который ускоряет переписку в Gmail – дает возможность вставлять часто употребляемые фразы с помощью коротких команд. По умолчанию на английском, но все спокойно редактируется, также можно добавить новые ярлыки. 39. Streak CRM for Gmail Еще одно расширение для Google-почты, только оно превращает интерфейс в подобие CRM-системы. Можно группировать сообщения, отслеживать статус сделки, ускорять отправку писем за счет шаблонов. 40. Mailtrack для Gmail Расширение, которое позволяет узнать, прочитано ли письмо адресатом. Можно пользоваться бесплатно и безлимитно, но с рекламой инструмента в подписи. Однако она отключается всего за 2,5 $. Понравился материал? Будем благодарны за репосты

Разработка

В этой статье Джейк Принс объясняет, что расширение для Chrome — это совсем не страшно и самое простое можно сделать буквально за несколько минут.

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

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

Расширения Chrome позволяют добавлять функциональные возможности в веб-браузер Chrome без глубокого погружения в нативный код. Это потрясающе, потому что вы можете создавать новые расширения для Chrome на основе технологий, с которыми хорошо знакомы веб-разработчики: HTML, CSS и JavaScript. Если вы когда-либо создавали веб-страницу, то сможете и создать расширение — быстрее, чем пообедаете. Единственное, что вам нужно узнать – это как добавить некоторые функции в Chrome с помощью JavaScript API, которые предоставляет Chrome.

Что вы хотите создать?

Прежде чем начать, вы должны иметь общее представление о том, что вы хотите сделать. Это не должно быть какой-то новой прорывной идеей, с начала мы можем просто сделать проект для удовольствия. В этой статье я расскажу вам о своей идее и о том, как я реализовал ее виде расширения Chrome.

План

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

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

Шаг первый: настройка

Первый шаг – создать файл манифеста с именем manifest.json. Это файл метаданных в формате JSON, который содержит такие свойства, как имя вашего расширения, описание, номер версии и так далее. В этом файле мы сообщаем Chrome, что расширение будет делать, и какие разрешения он требует.

Для расширения нам нужно иметь разрешение на управление activeTab, поэтому наш файл manifest.json выглядит примерно так:

{   “manifest_version”: 2,   “name”: “RaterFox”,   “description”: “The most popular movies and TV shows in your   default tab. Includes ratings, summaries and the ability to watch trailers.”,   “version”: “1”,   “author”: “Jake Prins”,
"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, поэтому, когда пользователь пытается установить расширение, они будут предупреждены обо всех разрешениях, которые необходимы расширению.

image

Еще одна интересная вещь внутри manifest.json – это действия браузера. В этом примере мы используем его, чтобы установить заголовок, но вообще есть больше параметров. Например, чтобы показывать всплывающее окно, когда вы нажимаете значок приложения внутри адресной строки, все, что вам нужно сделать, это что-то вроде этого:

“browser_action”: {    “default_popup”: “popup.html”,   },

Теперь popup.html будет отображаться внутри всплывающего окна, которое создается в ответ на щелчок пользователя на действии браузера. Это стандартный HTML-файл, поэтому он дает вам свободу действий над тем, что отображает всплывающее окно. Просто поместите часть своей магии в файл с именем popup.html.

Шаг второй: проверьте, работает ли оно

Следующий шаг – создать файл newtab.html и поместить в «Hello world»:

<!doctype html>   Test    

Чтобы проверить, работает ли он, посетите chrome://extensions в вашем браузере и убедитесь, что флажок «Режим разработчика» установлен в верхнем правом углу.

image

Нажмите 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-файл.

image

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

Убедитесь, что вы предоставили несколько хороших изображений, чтобы показать свой проект. Магазин может использовать эти изображения для продвижения вашего новаторского проекта. Чем больше изображений вы предоставите, тем более заметным будет ваше расширение. Вы можете просмотреть, как ваше расширение показывается в веб-магазине, нажав кнопку «Предварительный просмотр». Когда вы довольны результатом, нажмите «Опубликовать изменения». Готово!

Теперь перейдите в Интернет-магазин Chrome и найдите расширение по своему названию (может потребоваться некоторое время, прежде чем оно там появится). Если вас это интересует, вы можете найти мое здесь.

Осталось только получить пользователей!

Вывод

Веб-разработчику очень легко создать расширение Chrome. Все, что вам нужно, это HTML, CSS, JavaScript и базовые знания о том, как добавить функциональность с помощью некоторых JavaScript API, которые предоставляет Chrome. Ваше первое расширение может быть опубликовано в Интернет-магазине Chrome всего за 20 минут. Создание нового, стоящего и красивого расширения займет, конечно, немного больше времени. Но все зависит от вас!

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

Если вы нашли опечатку — выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru. Advertisement

Популярное

  • GitHub1 месяц назад

    Как начинающему Android-разработчику прокачать свои навыки: 5 open source проектов для изучения

  • App store optimization1 неделя назад

    Как я масштабировал приложение с 0 до 100,000 загрузок без единого потраченного доллара

  • Разработка3 недели назад

    6 мощных инструментов для разработчиков, использующих Mac

  • Разработка1 месяц назад

    Проектирование продуктов, формирующих привычки

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий