Мое первое расширение для Chrome — Настройка, запуск в фоновом режиме и тестирование

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

Итак, я подумал дать ему шанс. Первоначальная идея — создать таймер с кнопками Start, Stop, Reset. Таймер также должен работать в фоновом режиме, т. е. когда всплывающее окно закрыто.

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

Структура папок этого проекта плоская. Это содержит:

1. manifest.json

Этот файл содержит такие конфигурации, как имя проекта, описание, версия манифеста и т. д.

2. HTML-файл

Этот файл для всплывающего окна, в основном показывает пользовательский интерфейс. Вы можете назвать его как угодно, я назвал его как popup.html, а запись в файл HTML указана в файле manifest.json default_popup.

manifest.json ➝ action ➝ default_popup

В этом файле можно просто поставить <h1>Hello World</h1>

Загрузка расширения в браузере Chrome

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

2.1 Перейдите к chrome://extensions в новой вкладке.

2.2 Включите Developer Mode, если НЕТ.

2.3 Нажмите на Load unpacked в левом углу

2.4 Готово. Теперь перейдите в меню расширений, закрепите свое расширение и нажмите на него. Вы сможете увидеть Hello World во всплывающем окне.

Примечание. Не волнуйтесь, background.js и функции, которые мы скоро рассмотрим, если вы все еще заинтересованы.

Вот документация Google для расширения

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

Это помогает сохранять мотивацию и продолжать создавать контент, и мое путешествие продолжается.