MeetUp — Компаньон для совещаний

Давайте посмотрим, как я создаю расширение Chrome

Начинающий? Начать создание своего первого расширения для Chrome очень просто.

• Вы когда-нибудь задумывались, как создаются расширения для Chrome?
• Хотите узнать, как создать собственное расширение?

Затем я поделюсь своим опытом создания расширения для Chrome под названием MeetUp во время Crio's IBD Challenge, где я создал это расширение всего за 2 дня. И да, его очень просто создать, даже если вы начинающий веб-разработчик.

Что такое MeetUp? Как это работает?

• MeetUp — это простое расширение для Chrome, которое находится на панели расширений (рядом с адресной строкой).
• Самое приятное то, что это расширение работает в различных браузерах на основе Chromium, таких как Google Chrome, Microsoft Edge, Brave Browser и т. д.
• Стек построения основан на базовом стеке веб-разработки, то есть HTML, CSS и JS. Вы всегда можете использовать другие фреймворки для веб-разработки.

Как я получил эту идею?

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

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

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

Встречаем MeetUp!

• Функции MeetUp тоже просты.
• Он имеет такие функции, как добавление и удаление ссылок на веб-встречи.
• Присоединяйтесь к встрече, нажав на ссылку
• Найдите добавленную ссылку.
• Переименуйте или отредактируйте добавленные ссылки.

Создание MeetUp

Чтобы создать расширение Chrome, необходимо ознакомиться с иерархией расширений Chrome, которую можно найти в Документации Chrome.

Таким образом, для любого расширения Chrome требуется 3 основных файла:

• Manifest.json — содержит все разрешения, детали и модули расширения.
• Popup.html — содержит структуру расширения Chrome с HTML и CSS.
• Popup.js — содержит действия/функции, необходимые для выполнения задачи, для которой создано расширение.

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

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

Файл манифеста

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

manifest.json
{
  "name": "Meet Up",
  "version": "1.0",
  "description": "Stores all Links for Future Meetings",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["./background.js"]
  },
  "permissions": ["storage"],
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Alt+L",
        "linux": "Alt+L",
        "windows": "Alt+L",
        "mac": "Alt+L"
      }
    }
  },
  "manifest_version": 2,
  "content_security_policy": "script-src 'self' https://cdn.jsdelivr.net https://kit.fontawesome.com;  object-src 'self';"
}

Вы можете найти этот код в этом репозитории MeetUp.

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

Встреча в действии

Установка:

• Создайте форк или клонируйте код из этого репозитория: MeetUp by theAdityaNVS.
• Затем перейдите в раздел chrome:extensions / brave:extensions/ edge:extensions и нажмите Загрузить распакованное.
• Затем выберите клонированную папку.
• Вот и все, вы найдете MeetUp на панели расширений.
• Не стесняйтесь идти вперед и хранить все ваши будущие встречи в одном месте.

Демонстрационное видео:

Исходный код:

Вывод

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

Счастливого обучения

Ваше здоровье,

@theAdityaNVS

использованная литература