Настройте Chrome под свои нужды
Расширения - это не что иное, как небольшие программы, которые настраивают работу пользователя в Интернете. Они позволяют адаптировать функциональность и поведение Chrome к вашим личным потребностям и предпочтениям.
Недавно я создал расширение Chrome под названием Dodo - the Duck, которое служит цифровым помощником при отладке. Dodo - the Duck полон интересных функций:
- Полезные советы по отладке
- Пятнадцатиминутные будильники - когда вам нужен быстрый перерыв, чтобы не терять счет времени
- Ссылки на удобные для разработчиков сайты, такие как Stack Overflow, GitHub, Reddit и CodePen, а также возможность добавления настраиваемых ссылок.
В этой статье я проведу вас через пошаговый процесс создания собственного расширения Chrome.
1. Создайте манифест
Расширения начинаются с их манифеста. Создайте файл с именем manifest.json, и включите name, description, version, manifest_version и permissions.
Чтобы увидеть изменения, внесенные в код расширения, прямо в браузере, выполните следующие действия:
- Go to
chrome://extensions - Включите режим разработчика, если вы этого не сделали
- Выберите «Загрузить без упаковки».
- Найдите папку, содержащую все файлы, и выберите их
- Та-да. Додо прибыл!
2. Добавление инструкций
Хотя расширение было установлено, оно не содержит инструкций. Фоновые скрипты и многие другие важные компоненты должны быть зарегистрированы в манифесте. Мы сделаем это, создав файл background.js и поместив его в каталог расширений.
Представьте фоновый сценарий, создав файл с названием background.js или загрузив его здесь и поместив в каталог расширений.
3. Представьте пользовательский интерфейс.
Расширения могут иметь множество форм пользовательского интерфейса, но в этом будет использоваться всплывающее окно. Создайте и добавьте в каталог файл с названием popup.html. Это расширение использует:
- Изображение качающейся утки
- Две кнопки для управления будильниками
- Флажок для разрешения воспроизведения звука
- Социальные ссылки
Пользовательский интерфейс выглядит как на изображении ниже. Вы можете попробовать создать его самостоятельно или скачать файл отсюда.
Как и фоновый сценарий, этот файл необходимо обозначить как всплывающее окно в манифесте под browser_action.
Пришло время выбрать и добавить значки в наши расширения - и добавить некоторые команды (необязательно).
Затем включите тег скрипта в popup.js в popup.html.
Настройте пользовательский интерфейс так, как вам нравится, или используйте этот style.css файл.
4. Layer Logic
У нас есть UI расширения, но нам также нужна логика для дальнейшего взаимодействия с пользователем. Для этого обновим файл popup.js. Для этого расширения popup.js файл будет содержать:
- Предложения по отладке, которые предложит Додо (duckTexts)
- Функции для настройки будильника
- Функции для настроек
Вы можете разработать эти функции самостоятельно или загрузить код здесь.
Обновленный код добавляет событие щелчка на утке.
Расширение теперь полностью работоспособно. Перезагрузите расширение, обновите эту страницу, откройте всплывающее окно и щелкните утку!
Однако некоторые пользователи могут захотеть добавить ссылки на удобные для разработчиков сайты, которые они часто используют, помимо четырех веб-сайтов, которые мы добавили в расширение. Для этого мы добавим параметры в наше расширение.
5. Предоставьте пользователям параметры
Включение страницы параметров дает пользователям больше контроля над функциональностью расширения, дополнительно настраивая их работу в Интернете. Начните с создания файла в каталоге с именем options.html, и включите код для добавления пользователем настраиваемых ссылок (или загрузите код отсюда). Затем зарегистрируйте страницу параметров в манифесте.
Перезагрузите расширение и нажмите «ПОДРОБНЕЕ».
Прокрутите страницу сведений вниз и выберите «Параметры расширения», чтобы просмотреть страницу параметров, хотя она будет пустой.
Последний шаг - добавить логику на страницу параметров. Создайте файл с именем options.js в каталоге расширений, чтобы добавить логику для функциональности добавления настраиваемых ссылок пользователем, или загрузите код отсюда.
Ваш окончательный файл манифеста будет выглядеть так.
6. Опубликуйте расширение Chrome в Интернет-магазине Chrome (бонус).
Закончив код, вы можете опубликовать расширение в Интернет-магазине Chrome. Вы можете создать учетную запись разработчика и следовать инструкциям на панели инструментов разработчика.
Вуаля! Вы создали собственное полнофункциональное расширение для Chrome, которое поможет вам в отладке и навсегда останется вашим цифровым спутником.
Если у вас возникли проблемы с приведенным выше кодом. Вы можете сослаться на код здесь.
Спасибо, что прочитали эту статью.
