Как создать простое расширение для Chrome

Введение

Я писал о «как я создал расширение для Chrome всего за один день» — теперь я покажу вам технические детали и части кодирования. Расширение, которое я создал, имело функции get, post(upload) и del. Я создал эти функции всего несколькими строками кода JS, так что не беспокойтесь. Хорошая часть разработки в Chrome — это хранилище — вам не нужно использовать базу данных для мини-функций. В Chrome есть пакет локального хранилища (chrome.storage).

Мое первое приложение:

Собственно, мое первое расширение было не для новичков (я начинал с харда). Поток расширения был похож.

Откройте и активируйте расширение
Нажмите на знак — всплывающее окно появится на экране
Введите слово, которое вы не знаете, в поле ввода
Введите значение
Сохранить (вы также можете сохранить слова, просто выделив их на веб-страницах с помощью ContextMenus)
Хочешь — редактируй или удаляй
Вот и все

пример изображения

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

В следующих частях мы рассмотрим manifest.json,всплывающий HTML-файл и пакеты Chrome. Итак, начнем

Что такое Manifest.json

Файл manifest.json необходим для любого расширения Chrome. Файл manifest.json содержит информацию, определяющую расширение. Формат информации в файле — JSON.

{"manifest_version": 3,"name":"App","version":"1.0.0","description":"Nothing","icons":{"128":"./icons/logo_128.png","32":"./icons/logo_32.png","16":"./icons/logo_16.png"},"action":{"default_icon":"./icons/logo_16.png","default_popup":"./popup.html"},"permissions": ["contextMenus",]}

Что такое всплывающий HTML

Это базовый HTML-файл, связанный с manifest.json. Всплывающий HTML-файл появляется при нажатии на значок приложения.

<!DOCTYPE html>
<html>
<body><h1>My First Heading</h1><p>My first paragraph.</p></body>
</html>

Хахаха, вот и все!😎

Что такое chrome.storage

Описание:

Используйте chrome.storage API для хранения, извлечения и отслеживания изменений пользовательских данных.

установить с .sync:

chrome.storage.sync.set({key: value}, function() {
  console.log('Value is set to ' + value);
});

или локально:

chrome.storage.local.set({key: value}, function() {
  console.log('Value is set to ' + value);
});

получить с .sync:

chrome.storage.sync.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

или локально:

chrome.storage.local.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

Что такое chrome.contextMenus

Описание:

Используйте chrome.contextMenus API для добавления элементов в контекстное меню Google Chrome. Вы можете выбрать, к каким типам объектов будут применяться ваши дополнения контекстного меню, например к изображениям, гиперссылкам и страницам.

chrome.contextMenus.create(
 createProperties: object,
 callback?: function,
)

Как начать

Создайте эту структуру папок в своем редакторе и поместите коды в файлы. Для иконок смотрите документацию, необходимо создать структуру иконки.

Чтобы узнать об ошибках и прочем, посетите https://developer.chrome.com/docs/extensions/mv3/getstarted/

Закрытие

Это все, не забудьте подписаться на меня в LinkedIn и Medium!

Как создать простое расширение для Chrome — с примерами кода