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

Мы все используем некоторые из них в повседневной жизни — вероятно, большинство из вас читает статью с помощью VPN, 🔻Загрузчика, блокировщика рекламы🚫 и т. д., установленные через расширение. Кажется, что есть плагин Chrome практически для всего, что вам может понадобиться.

Что будем строить ❓

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

У нас также будет текстовая страница редактора, где впервые будут храниться ссылки. И последнее⏮, но не менее важное: мы увидим, как мы можем легко загрузить💨 расширение.

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

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

Они созданы с использованием существующих веб-технологий, таких как HTML, 🎨CSS и JavaScript📜, что означает, что вам не нужно изучать ничего нового, кроме ключевых компонентов расширения Chrome.

Если вам интересно узнать больше о расширениях Chrome в целом, ознакомьтесь с ➡ Документацией по расширениям Chrome.

⭕ Шаг 1. Создайте файл manifest.json

Создайте пустой каталог/папку, в которой будут храниться все необходимые файлы для расширения. Все расширения должны иметь файл manifest.json. Это файл конфигурации, который будет содержать информацию о нашем расширении, такую ​​как файл, используемый для всплывающего окна, сценарии, которые мы используем для него, или даже разрешения, которые мы хотим запросить для расширения. Вы можете пока оставить файл манифеста пустым.

Нам понадобится значок для нашего расширения. Вы можете получить образец значка из этого Образец значка Google (128 X 128 пикселей) .

Получив значок, мы можем редактироватьmanifest.json файл.

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

⭕ Шаг -2: Создайте пользовательский интерфейс (пользовательский интерфейс)

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

Откройте🔓 страницу popup.html и добавьте➕ следующее:

Шаг 3: Редактор ссылок

Нам нужно создать еще один файл HTML для добавления ссылки на значки, эти ссылки будут открываться в новой вкладке, когда мы нажимаем на них. Итак, нам нужно создать файл edit.html. Добавьте следующий 🔻код:

Эта страница принимает данные от пользователей их социальных профилей.

Шаг 4: Реализуйте логику

Последнее, что нам нужно сделать для создания плагина, — это реализовать логику, которая должна выполняться, когда пользователь нажимает кнопку редактирования внутри вкладки или щелкает значок для перенаправления на ссылку, предоставленную пользователем.

Нам нужно добавить прослушиватель событий для прослушивания события click на кнопке checkPage. Для добавления ссылок в иконку нам нужна еще одна реализация логики. Следовательно, мы создадим два файла javascript.

Откройте файл popup.js и добавьте следующий код:

Откройте файл edit.js и добавьте следующий код:

🤴Вуаля, вы завершили это расширение. Теперь успешно протестируйте его.

Проверить новое расширение в Chrome очень просто. Введите «chrome://extensions» на вкладке, чтобы открыть страницу расширений.

Установите флажок «Режим разработчика», чтобы включить загрузку распакованных расширений. Это позволит вам загрузить расширение из папки. Наконец, нажмите «Загрузить распакованное» и импортируйте каталог, в котором вы сохранили файлы.

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

Вы проделали потрясающую работу, 🤩 ура.

В общем, мы рассмотрели, как мы можем инициализировать расширение Chrome с помощью файла манифеста, как мы можем создавать события и обрабатывать их с помощью файлов javascript.