Создаём расширения для 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
Как написать расширение для браузера Google Chrome
22.06.18 ИТ / Расширения 3478
Что такое расширение для браузера? Это некоторый пакет программного кода, который расширяет базовые возможности браузера. Для чего это нужно? Это может быть использовано для решения любых пользовательских задач. Например, широко используемые блокировщики рекламы поставляются в виде расширений для браузеров, хотя в последнее время их стали внедрять в базовый функционал.
Расширение для браузера состоит из определенной структуры, для разных браузеров она может быть разной. Сегодня наибольшей популярностью пользуются расширения для Google Chrome. Оно и понятно, ведь это самый используемый браузер. Разработка расширений для него – простой процесс, не требующий особой подготовки, если Вы владеете навыками разработки на HTML, CSS и JavaScript.
В начале создается папка расширения, необходимо придумать имя для него и назвать папку таким именем. Далее потребуется создать файл манифеста расширения. Обязательным для любого Google Chrome расширения является файл манифеста с названием — manifest.json. В нем описываются всевозможные свойства расширения — задается имя, версия, описание, путь к файлу иконки, права, ресурсы, а также скрипты, которые могут быть выполнены на странице. В таком манифесте можно задать и прочие свойства, например, перечислить страницы сайтов, на которых может работать расширение. Одним словом, файл манифеста – неотъемлемая часть любого расширения.
В папке с расширением также можно разместить любые ресурсы, которые потребуются в ходе его работы. Это может быть любой контент и данные, скрипты, рисунки, звуки и т.д. Естественно в такой папке необходимо разместить все ресурсы, указанные в файле манифеста. Можно создавать подпапки и размещать файлы там. Также расширение может получать данные из удаленных серверов по технологии AJAX, что может пригодится при реализации разных проектов.
Любое расширение – это набор файлов, включая JS. Это значит, что можно использовать в работе любые библиотеки на этом языке, например, jQuery. Это значительно может облегчить реализацию функционала. Что касается оформления и внешнего вида расширения, то тут можно подключить CSS файлы и применить стили. Основной функционал расширения реализуется в файле с кодом JS, а для создания интерфейса и элементов применяется HTML.
По окончанию разработки такое расширение может установлено в браузер только в режиме разработчика, для этого нужно перейти во вкладку расширения в браузере и включить соответствующий режим, после можно будет выбрать папку с расширением – расширение будет загружено и доступно к использованию. Чтобы иметь возможность загружать расширения без этого режима, достаточно опубликовать его в магазине расширений.
Какие задачи может решить расширение? Самые разнообразные, ведь расширению будет доступна вся страница, поэтому можно изменять контент как угодно. Все это дает неограниченные возможности для разработки действительно полезных инструментов. Например, можно автоматизировать работу по отправки почты, удалить из исходного кода страницы любые рекламные элементы, реализовать скачивание файлов и т.д.
Таким образом, разработка расширения для Google Chrome – это несложный процесс, но при этом можно реализовать отличные инструменты, которые будут полезны множеству пользователей браузеров.
Не скачиваются расширения с интернет-магазина Chrome
Зачастую для работы сервисов, в том числе государственных в процессе настройки необходимо скачать расширение (дополнение) с магазина расширений Google Chrome, но при скачивании сайт выдает ошибку с предложением обновить страницу.
1. Причина
Причины довольно банальны — это блокировка адресов сервиса Google Роскомнадзором. Подобные ситуации не редкость, т.к. роскомнадзор при блокировке не учитывает как именно блокировка повлияет на остальные сервисы, а так же не отчитывается о причинах блокировки.
Начиная с 5 сентября 2022 года, пользователи из России начали сталкиваться и проблемами доступа к сайтам и сервисам Google, а также ошибками в работе магазина расширений Chrome (Интернет-магазин Chrome) и Google Play Market.
Пользователи отмечают следующие проблемы:
- Перестал работать сайт chrome.google.com .
- Не загружается Google-контент и сбрасывается соединение в браузере.
- Не устанавливаются расширения в Интернет-магазине Chrome. Также не загружается картинки.
- Веб-версия photos.google.com не грузит фото.
- Не грузятся обложки в Youtube Music.
- Не грузятся lh3.googleusercontent.com , lh4.googleusercontent.com , lh5.googleusercontent.com и lh6.googleusercontent.com
- В Google Play Games нет иконок игр.
- Не грузится изображение профиля в любом из сервисов Google.
- Не загружаются обои из интернета на телефонах Google Pixel.
Выглядит проблема вот таким образом: при попытке скачать расширение ля браузера какое-то время ничего не происходит, а потом появлется окно с текстом:
Произошла ошибка.
При добавлении продукта в Chrome произошла ошибка. Обновите страницу и повторите попытку.
Image decode failed
2. Решения
Все предлагаемые решения работают на момент публикации материала и отсортированы от простого к сложному. Учтите, что каждое решение имеет свои плюсы и минусы, поэтому выбирайте мудро.
2.1 Скачивание с другого магазина расширений
Помимо Chrome Market есть ещё и другие магазины расширений для браузеров на основе проекта Chromium. как то:
- Дополнения Opera — используется как основной для Яндекс.браузера
- Надстройки Edge — Работает только в актуальной версии браузера Edge, либо через маскировку под браузер Edge
Примеры популярных расширений:
- Госуслуги — (только в Google Chrome Market на момент публикации материала) Chrome
- КриптоПро (CryptoPro Extension for CAdES Browser Plug-in) — Chrome, Opera
- Контур
- Контур.Плагин — Chrome, Opera
- Контур.Расширение — Chrome, Edge, Opera
Распакованные версии плагинов и способ их установки описан в пункте 2.3. Дублирующие ссылки на скачивание в конце статьи.
2.2 Обход блокировок
Не законен в РФ, применять на свой риск.
Для обхода блокировок можно использовать VPN любой другой страны, либо расширение для браузера.
Не все VPN могут быть безопасны, поэтому могу рекомендовать только те, что указаны на сайте VPNlove.me, а так же те, что имеют хорошую репутацию без утечек персональных данных, информацию о которых можно проверить в телеграм-боте найдя интересующий вас сервис.
Рекомендуемые расширения для браузера:
- Censor Tracker — Сайт, Chrome, GitHub (ручная установка)
- Обход блокировок Рунета — Chrome
- Обход блокировок Рунета МИНИ — Chrome
Распакованные версии плагинов и способ их установки описан в пункте 2.3. Дублирующие ссылки на скачивание в конце статьи.
2.3 Установка расширений в режиме разработчика
- сложнее
- при необходимости, обновления производятся вручную
Скачать расширение для браузера chrome в виде crx-файла или zip-архива.
Скачать все необходимые расширения можно заранее через способ 2.2 в Chome Market использовав расширение CRX Extractor/Downloader.
Распаковать содержимое архива (в случае crx-файла сменить расширение на 7z или использовать архиватор 7zip) в любую удобную вам папку. Если вы планируете работать с расширением подобным образом на постоянной основе, то лучше всего разместить папку с распакованным расширением туда, где вы её не удалите случайным образом.
В браузере Google Chrome зайти в Меню — Дополнительные инструменты — Расширения, либо по ссылке browser://extensions/ (актуально для Яндекс Браузера)
Справа вверху включить Режим разработчика
Нажать на появившуюся кнопку Загрузить распакованное расширение и указать папку, в которую распаковали расширение.
Приложения к статье
Как вручную установить стороннее расширение в Google Chrome
Обычно, когда вы устанавливаете расширение Chrome, вы делаете это из Интернет-магазина Chrome. Однако некоторые расширения не публикуются в интернет-магазине. Это может быть связано с тем, что они используют дополнительные функции, не поддерживаемые правилами интернет-магазина, разрабатываются независимо или являются бета-версиями.
С годами Google увеличил свои ограничения на установку сторонних расширений Chrome, чтобы помочь защитить пользователей Chrome от вредоносного кода. Несколько лет назад вы могли просто установить расширение с сайта разработчика без каких-либо хлопот. В прошлом году вам нужно было только включить режим разработчика перед установкой файла CRX (расширение Chrome). Теперь, по словам Google, «чтобы защитить вас во время просмотра, Chrome позволяет использовать только те расширения, которые были опубликованы в Chrome Web Store».
Если вы готовы взять на себя риск, Google предоставит разработчикам возможность приоткрыть дверь, чтобы протестировать их расширения, которые вы можете использовать для установки расширений, которых нет в Chrome Web Store. И здесь я снова говорю, что установка непроверенных расширений из неизвестных источников опасна и может подвергнуть ваш компьютер вредоносному коду. Действуйте на свой страх и риск.
Как установить расширение не из магазина Chrome
- Скачайте расширение. Обычное стороннее расширение находится в архиве.
- Распакуйте расширение с помощью архиватора.
- Запустите браузер Google Chrome.
- Откройте меню браузера. Три вертикальные точки в правом верхнем углу.
- Перейдите «Дополнительные инструменты» > «Расширения».
- Переключите тумблер «Режим разработчика» в положение «включено», который находится в правом верхнем углу на страницу «Расширения».
- Нажмите на кнопку «Загрузить распакованное расширение».
- Найдите распакованную папку со сторонним расширением, выделить её и нажмите «Выбор папки».
- Готово. Мы вручную установили стороннее расширение в браузер Google Chrome.
