Давайте построим расширение для Chrome

Давайте построим расширение для Chrome

Coding


Недавно я создал свое первое расширение Chrome. Он называется Catify и заменяет каждое изображение на вашей странице изображением кота.

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

Это была моя первая попытка построить расширения для Chrome, и это было веселое путешествие. Хотели бы вы также создать собственное расширение для Chrome? Круто, я покажу тебе как. Давайте сделаем это вместе, так что громко кричите «Я отправляюсь в приключение!». И не волнуйтесь, все будет готово до второго завтрака.

Что такое расширение для Chrome?

Хотя Chrome сам по себе является отличным браузером, вы можете сделать его еще лучше. Добавляя расширения к нему. Чтобы проверить, какие расширения доступны, вы можете зайти в Интернет-магазин Chrome.

Просто зайдите и проверьте все удивительные расширения доступны. А теперь представьте свое собственное расширение в этом магазине. Давайте сделаем это.

Что мы строим?



Хотя у вас, вероятно, уже есть десятки идей для создания замечательных расширений, сначала мы должны взглянуть на основы. 


Итак, для нашего первого расширения мы возьмем один из основных примеров от самих Google - перерисовку страницы и немного оживим его. 


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

Приступая к работе, создайте манифест


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

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

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


{
  "name": "Make it rain(bow)",
  "description": "Embrace the inner unicorn and reflect on the page background.",
  "version": "0.0.1",
  "manifest_version": 2
}


Итак, что мы видим здесь? Во-первых, имя(англ. name). Это то, как расширение отображается в магазине, в обзоре расширений и, если не указано иное, то, что вы видите при наведении курсора на значок внутри браузера.

Затем есть описание(англ. description), это как заголовок, описание, отображаемое в магазине, и обзор расширений. Далее следует версия(англ. version) вашего расширения.

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

Наконец, мы видим manifest_version, это говорит Chrome, что этот файл написан в манифесте версии 2.

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

Изменить заголовок при наведении значка

По умолчанию отображается имя расширения, но оно не должно быть таким же. Давайте изменим это! Добавьте следующее в корень вашего manifest.json.

"browser_action": {
  "default_title": "Unleash the unicorn dust!"
}


Теперь, когда пользователь наведет на пиктограмму значок, на нем появится текст:

Unleash the unicorn dust!

Разрешения и скрипты

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

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

"permissions": [
  "activeTab"
],


Далее нам нужно запустить скрипт, который выполняет фактическое изменение фона. Мы будем выполнять это в фоновом скрипте, который нам нужно определить и в manifest.json. Добавьте это в корень.

"background": {
  "scripts": ["background.js"],
  "persistent": false
},

Мы определим нашу логику в файле с именем background.js. Кроме того, это не будет постоянство, вы должны сделать его постоянным, только если расширение использует API chrome.webRequest для блокировки или изменения сетевого запроса. Время строить актуальную логику!

Изменение цвета фона страницы

Итак, мы сказали Chrome, что логика находится в background.js, поэтому давайте создадим этот файл и создадим логику.

chrome.browserAction.onClicked.addListener(function(tab) {
  const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'violet'];

  const colorPicker = () => {
    const randomIndex = Math.floor(Math.random() * colors.length);
    return colors[randomIndex];
  }

  chrome.tabs.executeScript({
    code: 'document.body.style.backgroundColor="' + colorPicker() + '"',
  });
});
});








Давайте кратко рассмотрим код. Первая строка говорит нам, что мы добавили слушателя к событию onClick в browserAction. Что что что?!?

BrowserAction - это кнопка, которую вы видите в chrome при добавлении расширения, onClick - это событие, которое происходит, когда вы нажимаете эту кнопку, и добавление прослушивателя означает, что это срабатывает, когда выполняется действие щелчка. Таким образом, этот метод выполняется, когда вы нажимаете кнопку внутри Chrome.

Сам код не так уж и хорош. У нас есть список цветов, метод, который выбирает случайный цвет из этого списка, и выполнение скрипта, которое меняет цвет фона. Мы делаем это, выполняя часть javascript на вкладке браузера, которая выполняет это действие на реальной странице.

Добавляем icon

Прежде чем мы попробуем наше расширение, мы дадим ему что-то приятное на вид. Мы собираемся определить значок, который отображается в верхней части браузера для этого расширения. Начните с создания любого изображения 128x128, которое вы хотите. Теперь вы хотите сохранить это изображение в нескольких форматах:

128x128, который используется в магазине Chrome

48х48, который используется при установке

32x32, который часто используется окнами

16x16, который используется в самом Chrome как значок, который отображается в верхней части экрана.

Чтобы добавить эти изображения, мы изменим следующее в нашем manifest.json. Добавьте это в раздел browser_action:

"default_icon": "icon16.png"

Нам нужно только указать изображение 16x16 здесь, так как этот значок всегда 16x16 на любом устройстве. И добавить этот кусок в корень:

"icons": { 
  "16": "icon16.png",
  "32": "icon32.png",
  "48": "icon48.png",
  "128": "icon128.png" 
},

Это значки, которые можно использовать в ваших приложениях и которые имеют все необходимые размеры.

Давайте попробуем!

Ты взволнован? Вы должны быть, потому что мы собираемся протестировать наше расширение в нашем собственном браузере! Запустите Chrome и перейдите к расширениям, нажав кнопку меню и выбрав Дополнительные инструменты> Расширения. Первое, что вы должны сделать, это включить режим разработчика. Вы найдете это в правом верхнем углу.Включите его.

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

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

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

Давайте попробуем! Откройте новую вкладку, перейдите на dev.to и нажмите значок радуги. И нажмите ее снова ... и снова ... и снова ... попробуйте радугу!

Работает, идём дальше

Публикация вашего расширения

Осталось сделать только одну вещь - опубликовать ваше удивительное расширение. Давайте пройдемся по ступеням.

  • Создайте zip-файл, содержащий все файлы, которые вы создали. Таким образом, там должен быть файл manifest.json, background.js и все значки.
  • Перейдите на https://chrome.google.com/webstore/devconsole/ и войдите в свою учетную запись Google.

После того, как вы примете лицензии, вы можете продолжить.

  • Нажмите кнопку с надписью НОВЫЙ ПУНКТ в правом верхнем углу, чтобы открыть диалоговое окно, в котором вы должны выбрать файл .zip, созданный на шаге 1.
  • После загрузки откроется форма, которая требует некоторых деталей, прежде чем вы сможете сделать ваше расширение доступным. Вам, по крайней мере, нужно будет заполнить:
  • Title
  • Summary
  • Detailed description
  • Category
  • Language
  • One screenshot So let's fill these out.

Нажмите «СОХРАНИТЬ ПРОЕКТ» и, если все заполнено правильно, вы теперь сможете нажать «ИЗДАТЬ ИЗДЕЛИЕ». Нажмите на нее, теперь ожидается только подтверждение. 


Заканчиваем

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

Ресурсы

Несмотря на то, что в Интернете есть много информации о расширениях, я в основном использовал документацию Google, поскольку она очень ясная и полная. Там также много рабочих примеров:

https://developer.chrome.com/extensions

И вы можете найти пример кода, используемого здесь:

https://github.com/JHotterbeekx/make-it-rainbow-chrome-extension


Источник (English)

Report content on this page

Report Page

Please submit your DMCA takedown request to dmca@telegram.org