Руководство о том, как создать собственное расширение для Chrome с помощью JavaScript.

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

Концептуализация

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

Приступим к созданию нашего расширения для Chrome

manifest.json — это первый файл, который нам нужно создать. Это точка входа для расширения Chrome, как и index.html для веб-приложений, и она содержит все конфигурации, связанные с нашим расширением Chrome, пользовательским интерфейсом, и все загружается из него.

Итак, давайте создадим файл manifest.json в специальной папке, в которой мы сгруппируем код, связанный с нашим расширением.

BLOGPOSTSSAVE // Root Folder
    -> manifest.json // file

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

Те, которые мы собираемся добавить сейчас, следующие:

имя –> это имя нашего расширения, которое видно пользователям.

описание –> краткое описание нашего расширения, которое мы хотим показать пользователю в магазине расширений Chrome.

версия –> указывает версию нашего расширения.

manifest_version – это версия файла manifest.json, которую браузер читает и отображает на основе правил, определенных в указанной версии.

Мы будем использовать manifest_version: 3, так как это последняя версия в соответствии с документами расширения Chrome.

значки –> Мы можем указать путь к значкам в зависимости от размера, чтобы браузеры отображали значок в зависимости от размера экрана в магазине расширений Chrome.

action -> Мы можем указать список действий, которые необходимо выполнить, когда наше расширение запущено. Некоторые из действий: default_popup, default_icon и т. д.

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

default_icon –> Мы можем указать путь к значкам в зависимости от размера, чтобы браузеры отображали значок в зависимости от размера экрана на панели инструментов расширения браузера рядом со строкой URL.

Я добавил значки в папку ресурсов. Вы можете скачать их из репозитория Github здесь.

Наш файл manifest.json выглядит следующим образом.

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

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

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

Примечание. Для каждого изменения, которое мы внесли в код для отражения в расширении, нам нужно щелкнуть «Обновить», а затем запустить расширение.

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

Ура, мы создали наше первое расширение для Chrome. Чувствуете возбуждение? Тем не менее, есть еще много чего добавить. Теперь это похоже на статическое приложение пользовательского интерфейса, нам нужно добавить JavaScript, чтобы сделать его функциональным :)

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

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

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

Мы получим текущие данные вкладки, используя API хромированных вкладок, как показано ниже.

const queryOptions = { active: true, currentWindow: true };
const [tab] = await chrome.tabs.query(queryOptions);
const { title, url, favIconUrl } = tab;

Мы можем прочитать данные из локального хранилища, используя API хранилища Chrome, как показано ниже.

chrome.storage.local.get(['blogposts'], function (result) {
  console.log(result);
});

А также добавьте данные в локальное хранилище, как показано ниже.

chrome.storage.local.set({blogposts: [...postsAdded]}, () => {
console.log('blog added');
});

При этом мы добавим наш обработчик addBlog и прикрепим прослушиватель событий щелчка к узлу DOM кнопки добавления.

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

chrome.storage.local.get(function(result){console.log(result)})

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

Аналогичным образом мы получим DOM-узлы кнопки просмотра списка чтения, контейнера кнопок и списка просмотра, так что контейнер кнопок будет скрыт, а список блогов будет отображаться в виде JavaScript вместе с переходом к блогу на другой вкладке, когда щелкнув по нему и удалив его из списка при нажатии на ссылку удаления.

Наше расширение для Chrome почти закончено, теперь давайте добавим ссылки «Назад к параметрам» и «Очистить все» вместе с прослушивателями событий, прикрепленными в контейнере «Список просмотра». Окончательный код JavaScript выглядит следующим образом.

Окончательная версия:

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

Вот и все! Мы создали собственное расширение для Google Chrome.

Окончательный код в репозитории Github.

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

Надеюсь, это будет полезно
❤️ было бы здорово 😊

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.