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

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

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

Сегодня мы остановимся на версии VanillaJS.

Почему расширение RSS-канала?

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

Вы можете сделать расширение без каких-либо зависимостей и опубликовать его через день. Кроме того, если вы уже используете такую ​​платформу, как Wordpress или Magento, у вас уже есть RSS-канал, включенный в ваш веб-сайт.

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

И давайте посмотрим правде в глаза, мы все любим учебники, которые могут сделать что-то конкретное и полезное.

Полезные ссылки и уведомления

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

Если вы не хотите читать это руководство, и вас интересует только результат кода, начнем.

Создание с помощью Vanilla JS

Начнем с создания папки с несколькими файлами:

root-directory/
             |_____img/
                    |_____logo-16.png
                    |_____logo-48.png
                    |_____logo.png
             |_____manifest.json
             |_____background.js
             |_____popup.js
             |_____popup.html
             |_____main.css

Шаг 1. Объявление манифеста

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

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

  • browser_action - это определение действий, запускаемых при нажатии на значок вашего расширения в браузере.
  • background определяет скрипт (ы), который выполняется во время навигации.
  • permissionsis определяет разрешения, запрашиваемые расширением для пользователей.

Для нашего расширения RSS нам нужно создать всплывающий интерфейс, который будет показывать последние результаты RSS-канала. Для этого нам нужно объявить default_popup interface.

Мы также хотим проинформировать пользователя о наличии нового контента. Поэтому нам нужно добавить фоновый скрипт, который будет выполняться каждые [X] мин. Это приведет к загрузке RSS-канала и проверке новой даты сборки.

Шаг 2. Popup.js

Нам нужно вытащить средний RSS-канал, чтобы отобразить его в нашем расширении. Мы добавили средний веб-сайт в наш манифест на предыдущем шаге, чтобы разрешить доступ из разных источников. Теперь у нас есть доступ к каналу, и мы определим его в нашем конструкторе:

Теперь нам нужно выполнить функцию для получения XML-содержимого канала, его синтаксического анализа и создания базового отображения для каждого элемента. Для этого воспользуемся domParser.

И, наконец, добавьте вызов init:

new InitPopup().populatePopup();

Теперь давайте убедимся, что он работает с этим простым HTML-кодом:

Давайте добавим немного CSS, чтобы лучше видеть наш контент:

Теперь вы должны увидеть что-то вроде этого:

Шаг 3. Background.js

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

Как вы могли заметить, мы поместили второй параметр - persistentto false. Это означает, что мы не хотим, чтобы скрипт был постоянно активен, потому что нам не нужно знать об этом каждую секунду.

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

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

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

Для этого мы будем использовать хромовое хранилище и хранить на локальном компьютере дату последней сборки. Затем мы будем сравнивать каждые 5 минут, если есть новая сборка RSS-канала.

И теперь у нас есть значок!

Но теперь значок никогда не исчезает. Самый простой способ исправить это - сбрасывать значок каждый раз, когда мы открываем всплывающее окно. Просто добавьте эту простую строку в конец файла popup.js:

chrome.browserAction.setBadgeText({ text: '' });

Шаг 4. Тестирование расширения Chrome

Теперь у нас есть все наши файлы, нам нужно протестировать его как настоящее расширение! Для этого запустите Chrome и введите свой URL: chrome://extensions.

Нажмите на режим разработчика в правой части экрана.

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

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

Фактически, когда вы создаете приложение для Chrome, простой HREF не работает. Вам нужно указать Chrome, как обрабатывать щелчок по ссылке.

Итак, мы добавим эту небольшую корректировку в наш файл popup.js:

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

Поздравляем, вы сделали свое первое расширение для Chrome!

Шаг 5. Опубликуйте расширение.

Примечание. Google теперь взимает плату в размере 5 долларов с нового веб-разработчика Chrome, чтобы убедиться, что они реальны. Если вы хотите опубликовать свое расширение для всех, вам придется заплатить. Но если вы хотите опубликовать его для тестирования и поделиться с другом, это все равно бесплатно.

Просто перейдите в панель управления разработчика интернет-магазина Chrome здесь.

  • Авторизоваться
  • Щелкните «Добавить новый элемент».
  • Заархивируйте папку расширения и загрузите ее.
  • Добавьте изображения, необходимые для страницы вашего магазина
  • Нажмите на публикацию
  • Ура!

Заключение

Как было сказано ранее, если вы хотите скачать папку, она доступна здесь.

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

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

Если вам нужна помощь в настройке, не стесняйтесь спрашивать меня в комментариях.

И спасибо за чтение.