Нам всем нравится серфить в Интернете. И всем нам нравится, чтобы все было у нас под рукой. Почему бы не создать что-то, что соответствует этим двум абсолютным истинам?

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

Почему Хром?

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

⚠️ Чтобы иметь возможность опубликовать расширение Chrome, у вас должна быть учетная запись разработчика, за которую взимается единовременная плата за регистрацию в размере 5 долларов США.

Каждое расширение Chrome должно иметь следующие компоненты: файл манифеста, popup.html и popup.js и фон. сценарий. Давайте посмотрим на них.

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

Файл манифеста

Что такое файл манифеста? Это текстовый файл в формате JSON (JavaScript Object Notation), который содержит определенные сведения о расширении, которое вы будете разрабатывать.

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

Необходимый

  • manifest_version - версия формата файла манифеста. Начиная с Chrome 18, версия 1 устарела.
  • name - Может содержать до 45 символов. Используется для отображения имени вашего расширения в следующих местах: диалоговое окно установки, пользовательский интерфейс управления расширениями, Интернет-магазин Chrome.
  • version - Версия вашего расширения Chrome. Может содержать до четырех цифр, разделенных точками (например, 1.0.0.0)
  • default_locale - эта папка находится внутри папки _locals и содержит строковые литералы по умолчанию. Папка _locals используется для интернационализации (что позволяет вашему расширению поддерживать несколько языков). Это обязательное поле, если папка _locals существует, в противном случае ее не должно быть.

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

рекомендуемые

  • description - Вы можете использовать до 132 символов для описания расширения.
  • short_name - не более 12 символов, используется в случаях, когда недостаточно места для отображения полного имени расширения (панель запуска приложений и страница новой вкладки)
  • icons - значки, представляющие расширение. Всегда добавляйте значок 128X128, потому что он используется Интернет-магазином Chrome и во время установки вашего расширения.

Необязательные поля зависят от регистра, поэтому мы не будем вдаваться в них в этой статье.

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

Всплывающее окно и фон

Всплывающее окно относится к главной странице, которую пользователи видят при использовании вашего расширения. Он состоит из двух файлов: Popup.html и файла JavaScript, Popup.js.

Popup.html - это файл макета, показывающий, как будет выглядеть ваше расширение. В зависимости от того, что будет делать ваше расширение, разметка этого файла будет меняться.

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

Ключ scripts имеет значение массива имен скриптов.

persistent - это ключ с логическим значением, который обозначает использование вашего расширения с API chrome.webRequest для блокировки или изменения сетевых запросов. API Chrome.webRequest не работает с непостоянными фоновыми страницами.

Как ваше расширение откроется

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

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

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

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

Ниже приведен код, необходимый для реализации каждого из вариантов. Оба они будут использовать один и тот же файл popup.html, описанный ниже:

Собираем все вместе

Переопределить новую вкладку

Открыть в текущей вкладке

Обратите внимание, как мы переопределили ключ browser_action в обоих примерах.

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

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

В расширениях Chrome есть гораздо больше (обмен сообщениями, контекстные меню и хранилище). Надеюсь, я дал вам некоторое представление о расширениях Chrome. Может быть, достаточно, чтобы заинтриговать вас, чтобы сделать свой собственный!

И пока вы занимаетесь этим, проверьте тот, который я сделал здесь.

Если вам понравилась эта статья, хлопайте в ладоши, чтобы другие тоже могли ею насладиться! 👏