В этом уроке вы узнаете, как создать расширение для Chrome. Пример, который мы рассмотрим сегодня, — это скрыть ваши API-ключи Vonage на панели инструментов. Знания, которые вы получите, следуя шагам этого руководства, дадут вам основу для создания собственных расширений Chrome для различных целей.

Что такое расширение Chrome

Расширение Chrome — это программа, которая позволяет расширить функциональные возможности Chrome и изменить работу браузера. Расширение можно создать с помощью HTML, CSS, JavaScript и файла manifest.json. Последний предоставляет Chrome информацию, необходимую для запуска сценариев, чтобы расширение работало.

Создайте папку расширения Chrome

Создайте новую папку на своем компьютере, которая будет содержать файл manifest.json и файл начальной загрузки, в нашем примере мы назовем ее index.js. В моем примере я назову эту папку chrome-extension.

Создайте файл manifest.json

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

Создайте файл manifest.json. С вашего терминала в Unix вы можете ввести touch manifest.json.

Заполните его необходимой информацией, как вы можете видеть во фрагменте кода ниже.

Давайте рассмотрим каждую строку шаг за шагом вместе.

  • name — это имя расширения, которое будет отображаться в списке расширений Chrome.
  • description — это описание того, что делает ваш Chrome API.
  • version — это текущая версия вашего расширения, если вы внесете изменения, вы можете изменить ее.
  • author должно содержать имя создателя расширения для Chrome.
  • manifest_version относится к версии манифеста, на момент написания этого сообщения в блоге последней была версия 3.
  • content_scripts — это файлы, которые могут вносить изменения в DOM и передавать информацию в расширение. Вы можете узнать больше на официальной странице сценария контента. В этом примере мы хотели бы, чтобы наш скрипт соответствовал веб-странице https://dashboard.nexmo.com/ и любой из ее подстраниц. Мы заявляем, что логика, которой нужно следовать, будет записана в файл index.js.

Создайте загрузочный файл

В своем терминале создайте файл index.js. На машине Unix вы можете сделать это, набрав touch index.js.

Чтобы иметь расширение для Chrome, вы можете создать простую функцию, и она будет применена к браузеру после ее импорта.

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

В этом уроке мы будем использовать приведенный ниже код, чтобы размыть некоторые ключи API.

Давайте создадим функцию с именем blurApiKeys. Мы будем использовать document.querySelector и document.querySelectorAll для поиска элементов HTML, содержащих ключ API и секретный ключ API. Наконец, мы добавим к этим элементам размытие в 20 пикселей с помощью стилей CSS, а setInterval будет вызывать функцию blurApiKeys каждые 10 миллисекунд.

Импортируйте папку, созданную в ваши расширения Chrome

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

  1. Откройте браузер Chrome.
  2. Перейдите к chrome://extensions/.
  3. Нажмите на режим разработчика в правом верхнем углу, чтобы включить его (если он еще не включен).
  4. Нажмите «Загрузить распакованное» в левом верхнем углу, и откроется инструмент для загрузки файлов.
  5. Найдите место, где вы создали папку chrome-extension на своем компьютере, нажмите на нее и, наконец, нажмите кнопку выбора.
  6. Вы можете видеть, что новое расширение Chrome под названием «API Key Hider» было создано, как это было указано в свойстве name файла manifest.json.
  7. Убедитесь, что это расширение Chrome включено (переключено). Если вы когда-нибудь захотите отключить его, вы можете отключить или удалить его из списка расширений Chrome.

Вы можете увидеть вышеуказанные шаги в gif ниже:

Проверьте это

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

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

Поздравления

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

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

Надеюсь, вам понравилось. Не стесняйтесь обращаться ко мне в Twitter или присоединяйтесь к нашему Community Slack Channel.

Первоначально опубликовано на странице https://learn.vonage.com/blog/2021/08/31/create-your-first-chrome-extension-in-javascript-to-hide-your-api-keys/