Создайте свое первое расширение 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, мы используем их для автоматизации работы нашего браузера.