Создание простого расширения Chrome

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

В этой статье я объясню, как создать простое расширение шаг за шагом.

Расширение, которое мы будем строить в этой статье, это просто Простой пример Я придумал (вдохновленный моей собакой Acho 🐶). Мы спросим Ахо “Где мы?” Нажав на кнопку расширения на панели инструментов браузера, а ACHO расскажет нам имя страницы, которая загружена на текущей вкладке.

Вот GIF продления Работа:

1. Создать манифест

Mainesest.json Файл там, где мы будем Опишите Наше приложение: его название, описание, разрешения и т. Д.

Наш манифест будет выглядеть так (на данный момент):

{
    "manifest_version": 2,
    "name": "Acho, where are we?",
    "version": "0.1.0",
    "description": "Ask Acho where you are and he'll bark the page title at you."
}

Так что это все это? Давайте посмотрим:

• mainesest_version (Обязательно): это формат файла манифеста, требуемый нашим расширением. Для последних версий Chrome мы должны использовать Версия 2 , но имейте в виду, что Манифест v3 Будет запущен в ближайшее время для Chrome 88. Версия 1 устарела.
• Имя (Обязательно): имя нашего расширения.
• Версия (Обязательно): строка, представляющая текущую версию нашего расширения.
• Описание (Необязательно, но рекомендуется): краткое описание нашего расширения.

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

2. Загрузить расширение в Chrome

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

1. Открыть хром
2. Перейдите к Chrome://расширения
3. Включите переключатель «Режим разработчика» (расположен в правом верхнем углу экрана)
4. Нажмите на кнопку «Загрузить распакованную», которая появилась слева
5. Выберите папку расширений

Теперь мы можем увидеть наше расширение в списке, с именем и описанием, которое мы определили в манифесте. Конечно, это все, что мы можем сделать с нашим расширением сейчас, так как мы еще не добавили никакой логики, поэтому давайте продолжим.

3. Создайте всплывающее окно

3.1 Обновить Mainesest.json

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

{
    "manifest_version": 2,
    ...

    "browser_action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "images/icon16.png",
            "24": "images/icon24.png",
            "32": "images/icon32.png"
        },
    },
    "permissions": [
        "tabs"
    ]
}

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

  • default_popup Вот мы объявим имя файла для нашего всплывающего окна.
  • Default_icon (Необязательно): список значков в разных размерах (Chrome выберет тот, который лучше работает для устройства пользователя)
• Разрешения : Нам нужно объявить разрешения, нам нужно выполнить определенные операции с использованием API Chrome. В этом случае мы объявим вкладки Разрешение, так как нам нужно будет получить текущую вкладку Заголовок.

3.2 Создание Popup.html

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

Как видите, наше popup.html состоят в следующих основных элементах:

• Абзац
  Где мы напишем ответ Acho.
• Изображение ачо лая.
• Здесь мы добавим некоторые стили на наше всплывающее окно.

Оригинал: “https://dev.to/paulasantamaria/creating-a-simple-chrome-extension-36m”