Как написать расширение для Chrome: пошаговое руководство с примером кода

Опубликовано: 2022-04-10

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

Google Chrome предоставляет множество различных API-интерфейсов разработчикам своих расширений, таких как добавление новой страницы, всплывающее окно, создание уведомлений, настройка поисковой системы по умолчанию или даже создание пункта контекстного меню (меню, которое появляется при щелчке правой кнопкой мыши). на странице).

Возможности безграничны, от расширения, которое отображает «Hello World!» к расширению, позволяющему сделать снимок экрана веб-страницы.

Структура расширения
Загрузка расширения
Добавление всплывающего пользовательского интерфейса
Использование API уведомлений
Добавление пункта контекстного меню
Использование API хранилища для хранения данных
Распространение расширения

Как создать расширение #Google #Chrome: пошаговое руководство для начинающих

Нажмите, чтобы твитнуть

В этом уроке мы покажем вам, как написать расширение Chrome, которое отправляет уведомления браузера из всплывающего меню. Мы также будем использовать контекстное меню и API-интерфейсы хранения данных, чтобы максимально использовать его возможности. Мы называем это уведомлением! с восклицательным знаком!

Код расширения общедоступен на GitHub, поэтому не стесняйтесь использовать его.

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

Прежде чем мы двинемся дальше, вам следует ознакомиться с документацией для разработчиков Google Chrome, чтобы узнать о разработке расширений Chrome в целом.

Кроме того, если вы хотите написать расширение Chrome для Интернет-магазина Chrome, ознакомьтесь с их единственной политикой.

Давайте начнем с создания новой папки с именем notify на вашем устройстве. Эта папка будет содержать все, что будет частью вашего расширения.

Теперь вам нужно создать файл манифеста, который будет содержать всю информацию о нашем расширении. Создайте файл с именем manifest.json и включите в него следующий код:

 { "name" : "Notify!" , "description" : "A Google Chrome extension!" , "version" : "1.0" , "manifest_version" : 3 , "icons" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } }
 Язык кода: JSON / JSON с комментариями ( json )

Как видите, пока он содержит только метаинформацию о вашем расширении, такую как его имя, описание и версия. manifest_version сообщает Chrome, какую версию их API расширений вы используете.

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

После того, как у вас есть файл манифеста, вы можете загрузить расширение в браузере Chrome:

Откройте страницу «Управление расширениями», перейдя по адресу chrome://extensions , или вы также можете открыть ее из меню « Расширения» в настройках.

Оказавшись там, включите режим разработчика и используйте кнопку « Загрузить распакованное », чтобы выбрать каталог расширения.

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

Убедитесь, что вы добавили значок для своего расширения в папку assets/icons/ , иначе появится значок по умолчанию.

Добавление всплывающего пользовательского интерфейса

Давайте продолжим, добавив в расширение некоторый пользовательский интерфейс, из которого люди смогут взаимодействовать с предоставленными параметрами.

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

Чтобы добавить всплывающее окно в расширение, вам нужно будет добавить это в свой файл manifest.json :

 "action" : { "default_popup" : "popup.html" , "default_icon" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } },
 Язык кода: JavaScript ( javascript )

При этом вы сообщаете расширению расположение HTML-файла вашего всплывающего окна и значков по умолчанию. Это просто значок по умолчанию, поскольку API позволяет вам менять значок на ходу. Например, если вы создаете тест Google PageSpeed, на веб-сайте могут отображаться разные значки в зависимости от их рейтинга страниц.

Всплывающее окно расширения Google Chrome

Теперь вы можете добавить HTML-код вашего всплывающего окна в файл, как мы делаем в нашем примере:

 <!DOCTYPE html > < html > < head > < link rel = "stylesheet" href = "assets/css/popup.css" > </ head > < body > < div id = "notify-wrapper" > < div id = "notify-header" > < h1 > Notify! </ h1 > </ div > < div id = "notify-containers" > < div class = "notify-form" > < label for = "text" > Notification </ label > < textarea name = "text" id = "notify-text" placeholder = "Let's notify!" > </ textarea > </ div > < div class = notify-buttons > < p > Total: < span id = "notify-count" > </ span > </ p > < button class = "button" id = "notify-reset" > Reset </ button > < button class = "button primary" id = "notify-button" > Notify! </ button > </ div > </ div > </ div > < script src = "assets/js/popup.js" > </ script > </ body > </ html >
 Язык кода: HTML, XML ( xml )

Этот файл HTML также ссылается на таблицу стилей и скрипт, чтобы добавить стиль и функциональность нашему всплывающему окну.

Если вы следите за этим, вы можете получить код CSS отсюда. Позже в этом руководстве мы добавим JavaScript в файл.

До сих пор вы создали расширение Google Chrome со всплывающим окном, и нам потребовалось всего несколько строк кода. Как мы уже говорили в начале, создать расширение для Google Chrome очень просто!

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

Использование API уведомлений

Как следует из названия расширения, это расширение уведомлений, поэтому давайте добавим его!

Прежде чем использовать некоторые API, необходимо указать для них разрешения в файле manifest.json . Одна из причин сделать это заключается в том, чтобы пользователи вашего расширения знали, какие разрешения запрашивает ваше расширение перед их установкой.

Для уведомлений вы делаете это так:

 "permissions" : [ "notifications" ],
 Язык кода: JavaScript ( javascript )

Вам также необходимо добавить сервис-воркера в расширение для отправки уведомлений. Для этого вам нужно добавить это в свой манифест:

 "background" : { "service_worker" : "background.js" },
 Язык кода: JavaScript ( javascript )

Вам нужен сервис-воркер для API уведомлений, так как его нельзя использовать напрямую из файла popup.js .

В файле background.js вам нужно добавить следующий код для отправки уведомления:

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : data.message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); } });
 Язык кода: JavaScript ( javascript )

Здесь мы используем прослушиватель событий onMessage , чтобы получить триггер для push-уведомлений из всплывающего окна.

Мы также используем метод create для создания нового уведомления. Уведомления могут быть разных типов, но здесь используется «базовый» тип. Вы должны рассмотреть все доступные варианты.

Теперь, когда создан метод create , вы можете запустить его из файла popup.js следующим образом:

 const text = document .getElementById( 'notify-text' ); const notify = document .getElementById( 'notify-button' ); notify.addEventListener( 'click' , () => { chrome.runtime.sendMessage( '' , { type : 'notification' , message : text.value }); } );
 Язык кода: JavaScript ( javascript )

Здесь действие sendMessage используется для запуска уведомления. И вуаля! У нас есть расширение, которое вызывает уведомление.

Убедитесь, что вы используете последнюю версию Google Chrome и предоставили ему разрешение на запуск уведомлений. Короче, не уподобляйтесь мне, который часами пытался понять, почему не появляются уведомления.

Добавление пункта контекстного меню

Как упоминалось во введении, контекстное меню — это меню, которое появляется при щелчке правой кнопкой мыши:

Может быть много причин, по которым ваше расширение может иметь пункт контекстного меню. Одним из ярких примеров является выбор текста с помощью курсора, а затем поиск его в Google.

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

Для этого вам также необходимо добавить разрешения в файл манифеста:

 "permissions" : [ "contextMenus" , "notifications" ],
 Язык кода: JavaScript ( javascript )

Теперь, когда вы добавили разрешения для contextMenus , вы можете добавить это в свой файл background.js :

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { notify( data.message ); } }); chrome.runtime.onInstalled.addListener( () => { chrome.contextMenus.create({ id : 'notify' , title : "Notify!: %s" , contexts :[ "selection" ] }); }); chrome.contextMenus.onClicked.addListener( ( info, tab ) => { if ( 'notify' === info.menuItemId ) { notify( info.selectionText ); } } ); const notify = message => { return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 Язык кода: JavaScript ( javascript )

Приведенный выше код также включает код из предыдущего шага для запуска уведомления, которое теперь абстрагируется в функцию notify , чтобы его можно было использовать повторно.

Действие contextMenus.create используется для добавления элемента в контекстное меню. Он подключен к onInstalled , так как его нужно инициализировать только один раз.

После этого, как и в предыдущем шаге, мы используем contextMenus.onClicked для захвата клика и запуска уведомления.

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

Использование API хранилища для хранения данных

Теперь, когда у вашего расширения есть несколько функций, которыми можно похвастаться, давайте взглянем на Storage API. Storage API полезен, когда вы хотите сохранить некоторые пользовательские данные в своем расширении.

Существует два типа Storage API: локальный и синхронный. Локальное хранилище, как следует из названия, сохраняется в вашем браузере и остается локальным. Для сравнения, хранилище синхронизации позволяет синхронизировать данные между браузерами с использованием одной и той же учетной записи Google. Для наших целей мы используем локальное хранилище.

Во-первых, вам нужно добавить разрешение на хранение в файл манифеста:

 "permissions" : [ "contextMenus" , "notifications" , "storage" ],
 Язык кода: JavaScript ( javascript )

После этого вы можете использовать хранилище, storage.local.get и storage.local.set для извлечения или сохранения данных.

Вы можете добавить следующий код в файл popup.js :

 const reset = document .getElementById( 'notify-reset' ); const counter = document .getElementById( 'notify-count' ); chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; counter.innerHTML = value; } ); chrome.storage.onChanged.addListener( ( changes, namespace ) => { if ( changes.notifyCount ) { let value = changes.notifyCount.newValue || 0 ; counter.innerHTML = value; } }); reset.addEventListener( 'click' , () => { chrome.storage.local.clear(); text.value = '' ; } );
 Язык кода: JavaScript ( javascript )

Этот код делает две вещи:

Он обновляет счетчик уведомлений во всплывающем окне, когда мы открываем всплывающее окно или изменяется значение хранилища. Для прослушивания изменения хранилища используется storage.onChanged .
Частично мы очищаем хранилище, когда пользователь нажимает кнопку сброса.

Приведенный выше код выполняет работу по получению последнего счетчика и обновляет его. Теперь осталось настроить данные. Для этого вы можете обновить нашу функцию notify следующим образом:

 const notify = message => { chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; chrome.storage.local.set({ 'notifyCount' : Number ( value ) + 1 }); } ); return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 Язык кода: JavaScript ( javascript )

Здесь мы получаем последние данные хранилища, а затем обновляем их с помощью последнего счетчика.

Точно так же вы можете использовать API chrome.storage.sync для синхронизации параметров между браузерами.

Распространение расширения

Поздравляем! Вы сделали это! Вы успешно создали расширение Google Chrome, которое использует множество различных функций Google Chrome, в том числе:

Всплывающие окна
API уведомлений
Контекстное меню
API хранилища

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

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

Если вы хотите изучить другие варианты, которые Google Chrome предлагает разработчикам расширений, рекомендуем ознакомиться с официальной документацией.

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

Вас также могут заинтересовать:

18 лучших агентств WordPress для веб-разработки, дизайна, маркетинга и многого другого
15 лучших программ для дизайна веб-сайтов, доступных на рынке прямо сейчас
Сравнение и тестирование 9 лучших решений для создания веб-сайтов

Как создать расширение Google #Chrome #extension: пошаговое руководство для начинающих