Как загрузить свое расширение в google chrome
Перейти к содержимому

Как загрузить свое расширение в google chrome

  • автор:

Делаем своё расширение для браузера за 10 минут

В конце 2020 года мы делали проект со снежинками — писали специальный скрипт, который запускал падающий снег на сайтах. Если бы мы хотели сделать такой снег на любом своём сайте, это не составило бы труда: добавляешь скрипт в код страницы, и готово.

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

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

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

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

Примеры того, что может сделать расширение:

  • Сохранить ваши пароли и другие личные данные,
  • Выдрать из страницы скрытые данные (например, ссылку на скачивание музыки).
  • Менять что-то на странице, например, отключать рекламу, переводить текст, удалять ненужное.
  • Собирать статистику вашей работы в интернете.
  • Подключаться к другим сервисам (почте, чатам, файлообменникам) и взаимодействовать с ними из браузера.

В этой статье

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

Манифест

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

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

Манифест задаёт общие правила для всего расширения, поэтому манифест — единственный обязательный компонент. Можно обойтись без иконок и скриптов, но манифест обязательно должен быть.Каждый манифест хранится в файле manifest.json — создадим пустой файл с таким именем и напишем внутри такое:

«name»: «Запускаем снежинки на любом сайте»,
«description»: «Проект журнала Код»,
«version»: «1.0»,
«manifest_version»: 3
>

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

Сохраняем файл и всё, расширение готово. Оно ничего не умеет, ничего не делает, зато мы уже можем добавить его в браузер. Для этого запускаем Хром и в адресной строке пишем:

Мы попадаем на страницу, которая нам покажет все установленные расширения:

Делаем своё расширение для браузера за 10 минут

Чтобы добавить своё расширение, в правом верхнем углу включаем режим разработчика, а затем нажимаем «Загрузить распакованное расширение»:

Делаем своё расширение для браузера за 10 минут

Теперь выбираем папку, в которой лежит наш манифест:

Делаем своё расширение для браузера за 10 минут

Отлично, мы только что добавили в браузер новое расширение:

Делаем своё расширение для браузера за 10 минут

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

Чтобы было проще работать и тестировать расширение, закрепим его на панели браузера:

Делаем своё расширение для браузера за 10 минут

Иконки

У расширения есть две иконки, которыми мы можем управлять:

  1. Картинка в карточке расширения на странице настроек.
  2. Иконка на панели браузера.

Чтобы не рисовать всё с нуля, скачаем папку с иконками из того же руководства Google и положим её в ту же папку, что и манифест:

Теперь добавим иконки в манифест. За картинку в карточке отвечает блок icon, а за иконку на панели — блок action. Разные размеры картинки нужны для того, чтобы на разных мониторах с любой плотностью пикселей иконки выглядели хорошо:

 < "name": "Запускаем снежинки на любом сайте", "description": "Проект журнала Код", "version": "1.0", "manifest_version": 3, "action": < "default_icon": < "16": "/images/get_started16.png", "32": "/images/get_started32.png", "48": "/images/get_started48.png", "128": "/images/get_started128.png" >>, "icons": < "16": "/images/get_started16.png", "32": "/images/get_started32.png", "48": "/images/get_started48.png", "128": "/images/get_started128.png" >>

Сохраняем манифест, обновляем расширение на странице настроек и смотрим результат:

Добавляем иконки в манифест

Настраиваем разрешения

Разрешения — это то, что браузер позволяет делать расширению со страницами и с их содержимым. Для запуска снежинок нам нужно сделать две вещи:

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

Чтобы получить доступ к активной вкладке и к запуску скриптов, добавим в манифест такую строку:

«permissions»: [«activeTab», «scripting»],

Показываем меню

Если мы сейчас нажмём на иконку расширения на панели браузера, то ничего не призойдёт, потому что мы ничего не запрограммировали. Исправим это — сделаем так, чтобы при нажатии расширение показывало кнопку запуска. Когда расширение будет уметь больше, вместо одной кнопки можно будет показать целое меню.

Чтобы сделать всплывающее меню, добавим в манифест в раздел action такую строку:

Она означает, что при нажатии на иконку мы увидим рядом с ней мини-страничку, на которой что-то будет.Создадим в той же папке расширения файл popup.html и добавим в него такой код:

     /* задаём размеры кнопки и размер текста на кнопке */ button   

Чтобы браузер не ругался, что у нас нет файла popup.js , создадим пустой файл с таким названием и положим его в ту же папку:

Показываем меню расширения

Сохраняем манифест, обновляем его на странице настроек и видим, что у нашего расширения появилось меню с кнопкой:

Показываем меню расширения

Запускаем снежинки

Вся магия будет происходить в файле popup.js — откроем его и добавим такой код:

// получаем доступ к кнопке let snow = document.getElementById("snow"); // когда кнопка нажата — находим активную вкладку и запускаем нужную функцию snow.addEventListener("click", async () => < // получаем доступ к активной вкладке let [tab] = await chrome.tabs.query(< active: true, currentWindow: true >); // выполняем скрипт chrome.scripting.executeScript(< // скрипт будет выполняться во вкладке, которую нашли на предыдущем этапе target: < tabId: tab.id >, // вызываем функцию, в которой лежит запуск снежинок function: snowFall, >); >); // запускаем снег function snowFall()

Последнее, что нам осталось сделать, — положить в функцию snowFall() полный код скрипта из проекта со снежинками и сохранить файл.

Проверка

В прошлый раз мы не смогли запустить скрипт на любой странице Яндекса — мешала политика безопасности. Теперь всё работает:

Проверяем расширение

Скачать упакованное расширение. Перед установкой его нужно распаковать в любую папку.

Создаём расширения для Google Chrome

Можно не только устанавливать готовые расширения для браузера Chrome, но и создавать собственные.

Список установленных расширений можно увидеть по адресу chrome://extensions/. Если вы забудете адрес, то можно открыть эту страницу через меню More tools | Extensions (в англ. версии).

Домашняя страница для подписанных расширений — https://chrome.google.com/webstore/category/extensions

При создании расширения используются технологии HTML, CSS, JavaScript, а также иногда JSON.

Создание первого расширения

На основе книги Introduction to Google Chrome Extensions.

Создадим первое собственное расширение ShowTime, которое добавит кнопку (Browser-Action button) на панель браузера. При щелчке откроется всплывающее окно, в котором будет отображаться текущее время и дата.

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

Для первого примера понадобятся файлы popup.html, popup_script.js, icon.png (несколько версий), manifest.json.

Внутри файла manifest.json размещаются обязательные и необязательные параметры.

К числу обязательных относятся параметры manifest_version, name, version.

Параметр manifest_version указывает на версию манифеста и должно содержать целочисленное значение больше 0. На данный момент актуальной считается версия 2. Параметр name указывает на имя расширения в виде строки. К параметру name можно добавить дополнительный атрибут description для описания расширения. Параметр version указывает на версию расширения в виде строки, которая должна содержать число.

Если мы хотим добавить кнопку на панель браузера, то в манифесте следует прописать данное поведение. Кнопка имеет название Browser-Action и в манифесте прописывается как browser_action с необходимыми атрибутами.

Пропишем данные в манифесте.

 < "manifest_version" : 2, "name" : "ShowTime", "description" : "Extension to show the current time and date", "version" : "1.2", "browser_action" : < "default_title" : "ShowTime", // в т.ч. подсказка при наведении мыши "default_icon" : "icon.png", // значок на панели "default_popup" : "popup.html" >, "icons" : < "16" : "icon16.png", //Used as the favicon for an extension's pages "48" : "icon48.png", //Used on the extension management page "128" : "icon128.png" //Used during installation & in the Chrome Web Store >> 

С манифестом разобрались. Теперь можно написать код для расширения. Для этого используется стандартный JavaScript. Откроем файл popup_script.js и добавим код.

 //region var timeId = "time"; var dateId = "date"; var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct","Nov", "Dec"]; var consoleGreeting = "Hello World! - from popup_script.js"; function setTimeAndDate(timeElement,dateElement) < var date = new Date(); var minutes = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes(); var time = date.getHours() + ":" + minutes; //In "date.getMonth", 0 indicates the first month of the year //In "date.getDay", 0 represents Sunday var date = days[date.getDay()] + ", " + months[date.getMonth()] + " " + date.getDate() + " " + date.getFullYear(); timeElement.innerHTML = time; dateElement.innerHTML = date; >//end-region //region console.log(consoleGreeting); document.addEventListener("DOMContentLoaded",function(dcle) < var timeElement = document.getElementById(timeId); var dateElement = document.getElementById(dateId); setTimeAndDate(timeElement,dateElement); >); //end-region 

Теперь создадим страницу popup.html.

     ShowTime (Custom) // Inline scripts are not allowed alert('Hello World'); -->  body < padding:0px; margin:0px; width:300px; height:200px; >div < height:100%; width:100%; display:table; font-family:"Tahoma","Verdana"; font-size:15px; font-weight:bold; text-shadow:0px 0px 1px #000000; background-color:#555; color:#fff; >h1,h2 < display:table-row; vertical-align:middle; text-align:center; >h2 < background-color:#777; >.unselectable Путь к скрипту всегда должен быть относительным. Можно создать несколько js-файлов, если скрипты сложные и требуется разделение по логике поведения. CSS-свойства также можно вынести в отдельный файл.

Приготовления закончены. Можно загрузить расширение в браузер и протестировать его. Откройте страницу chrome://extensions и включите режим разработчика Developer mode. В этом режиме будут доступны кнопки LOAD UNPACKED, PACK EXTENSION, UPDATE.

Щёлкните по кнопке LOAD UNPACKED и загрузите своё первое расширение. Оно появится в списке расширений, а также появится значок на панели. Щёлкните по значку, чтобы увидеть работу расширения в действии.

Вы можете использовать DevTools для отладки и тестирования как для обычных страниц и скриптов. Один из примеров для вывода в лог специфичных функций расширений (режим Инкогнито).

 chrome.extension.isAllowedIncognitoAccess(function(isAllowed) < console.log(isAllowed); >); 

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

Можно разместить своё расширение в специальном магазине расширений. Для этого заходим на страницу https://chrome.google.com/webstore/developer/dashboard. При первом заходе вам будет предложено войти в свою учётную запись и оплатить регистрацию (5$). После оплаты вам будет доступен весь функционал. Вам нужно будет упаковать свою папку в zip-файл и загрузить его на сервер. В успешном случае вы подтверждаете публикацию и ваше расширение будет доступно в магазине.

Компоненты расширений

В первом примере мы познакомились с компонентом Browser-Action. Доступны и другие компоненты.

  • Browser-Action
  • Page-Action
  • Shortcut-Key
  • Context-Menu-Item
  • Omnibox-Input
  • Content-UI
  • Popup (доступен из Browser-Action и Page-Action)

Также доступны скриптовые компоненты со своими областями видимости.

  • Event scripts (Background scripts)
  • Popup scripts
  • Content scripts

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

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

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

В этой статье мы рассмотрим создание самого простого расширения — запускатора избранных сайтов. Хотя приложение и будет примитивным, оно всё-таки раскроет процесс создания и загрузки расширения для google Chrome.

Желательно знать HTML, CSS и JS (если придётся расширить набор функций) на самом базовом уровне, чтобы понимать материал лучше, но в любом случае мы будем объяснять код.

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

Давайте же внесём свой вклад в развитие web

Здесь всё очень просто:

< "manifest_version": 2, "name": "Tproger Launcher", "description": "Запускатор представительств Tproger", "version": "1.0.0", "icons": , "browser_action": < "default_icon": "icon.png", "default_popup": "popup.html" >, "permissions": ["activeTab"] > 

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

Для начала давайте напишем базовый HTML-код:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *