Создайте свое первое расширение Chrome
Я думал о том, как работают расширения Chrome, после нескольких часов копания в документации и учебниках я понял, что это самое простое, следуя этой статье, вы сможете создать свое первое расширение Chrome.
Предпосылки:
- Базовые знания HTML и CSS
- Базовые знания Javascript и программирования.
Прежде чем углубляться в технические детали, давайте рассмотрим расширения Chrome и почему мы их используем.
«Расширения — это небольшие программы, которые настраивают работу в Интернете. Они позволяют пользователям настраивать функциональность и поведение Chrome в соответствии с индивидуальными потребностями или предпочтениями. Они построены на веб-технологиях, таких как HTML, JavaScript и CSS».
Я расскажу об основах на нашем знаменитом примере «Список дел».
Базовая структура
- index.html
- минфест.json
- script.js
- стиль.css
manifest.json: это простой JSON, который содержит такую информацию, как разрешения, авторская версия и т. д.
поля chrome doc manifest.json
index.html: содержит макет расширения.
script.js: здесь мы определяем логику нашего примера.
style.css: обычный файл CSS.
Если вы знакомы с javascript, вы, вероятно, получите представление об этом коде, единственное, что здесь добавлено, — это работа с chrome API, особенно с объектами хранилища.
Мы устанавливаем и получаем список дел в хранилище браузера, чтобы сохранить его даже после перезагрузки браузера.
set: chrome.storage.sync.set({"todo": todo}, function(){});
получить: chrome.storage.sync.get («дело», функция (элемент) {
Последний шаг, чтобы протестировать наше расширение, давайте загрузим его в браузер,
Зайдите в настройки › дополнительные инструменты › Расширения
1. включить режим разработчика
2. загрузите свое приложение
после этих шагов вы сможете увидеть добавленное расширение и угадать, какое вы создали свое первое расширение для Chrome.
Репозиторий Github
https://github.com/skiod/todo-extension
заключение
расширение — это просто веб-приложение + manifest.json, мы используем их для автоматизации работы нашего браузера.