Для начала немного о том, из себя представляет расширение: расширение – это небольшое дополнение для браузера, расширяющее его функционал. Выполнять расширения могут самые разнообразные функции: дают возможность скачивать музыку или видео там, где просто так скачать не получится, к примеру, вконтакте или на Youtube. Упрощают работу с документами, изображениями, дают возможность выбора, какой поисковой системой воспользоваться в конкретной ситуации без перехода на сайт поисковика, изменяют внешний вид сайта.
Расширения в Google Chrome устанавливаются из официального магазина приложений, пусть название вас не смущает – покупать ничего не придется. Чтобы попасть в магазин расширений, перейдите по ссылке
Или перейдите в магазин, воспользовавшись меню браузера: в правом верхнем углу браузера нажмите на кнопку с тремя точками. Откроется меню браузера, в нем нужно выбрать «Дополнительные инструменты». Появится еще одно окно, в котором нужно найти пункт «Расширения» и нажать на него:
Теперь вы находитесь во вкладке с расширениями, установленными в браузере. Если до этого никаких расширений установлено не было, то здесь не будет ничего, или же будут отображены предустановленные расширения Google Chrome – документы, презентации, таблицы. Зависит от версии браузера. Нажмите слева сверху на пункт меню «Расширения» , затем внизу на «Открыть интернет-магазин Chrome»:
после чего вы попадете в магазин расширений. Здесь можно просмотреть все доступные, отсортировать их по категориям, возможностям, оценкам. Единственный минус – язык, не все расширения имеют описание и интерфейс на русском языке.
Если вы знаете, какое именно расширение вам нужно, то достаточно вписать его название в «Поиск по магазину» и нажать Enter. Обратите внимание, в результатах поиска могут присутствовать не только расширения, но и приложения. Чтобы не ошибиться, выберите в результатах поиска «Расширения» . Из найденных результатов выберите необходимое расширение и нажмите кнопку «Установить» :
После установки в правом верхнем углу должна появиться иконка, с помощью которой осуществляется управление расширением, его настройка, включение или отключение каких-либо функций:
Настройки активируются нажатием правой кнопки мыши по иконке. В некоторых случаях иконки может и не быть, все зависит от устанавливаемого расширения и его возможностей.
Как установить стороннее расширение в Google Chrome
Если у вас есть стороннее расширение или юзерскрипт из источника, которому вы доверяете, но по какой-либо причине в магазине Google Chrome это расширение отсутствует, установить обычным способом его не получится. Для обеспечения безопасности установка сторонних расширений, т. е. расширений не из магазина, в хроме запрещена. Ниже представлены способы, с помощью которых это ограничение можно обойти.
Установка скачанного расширения в формате.crx
- Вначале нужно открыть страницу расширений в браузере, как это сделать было описано выше: Меню браузера в правом верхнем углу > Дополнительные инструменты > Расширения. Или скопируйте chrome://extensions/ вставьте в адресную строку браузера и нажмите Enter.
- В верхней части страницы есть переключатель «Режим разработчика», активируйте его. Ниже появятся 3 дополнительные кнопки: «Упаковать расширение» и «Обновить расширения» :
- Файл расширения, оканчивающийся на .crx , переименовать так, чтобы он оканчивался на .zip и открыть его с помощью архиватора как обычный архив. Распаковать его в подготовленную для этого папку (например, создать на диске «C» папку с названием Extensions, или любым другим названием).
- В браузере, на странице с расширениями, нажать на кнопку «Загрузить распакованное расширение» и в появившемся окне выбрать созданную папку, после чего нажать ОК.
Расширение будет установлено в браузер, теперь осталось лишь активировать его, переведя переключатель рядом с расширением в положение «Включено».
Установка юзерскрипта – файла вида.user.js в Google Chrome
Способ первый , более простой, но требующий установки дополнительного расширения. Расширение называется tampermonkey, его нужно установить из магазина Google Chrome. После установки оно будет доступно в правом верхнем углу браузера. При нажатии левой кнопкой мыши на значок расширения появится вот такое окно:
в котором нужно выбрать пункт «Создать новый скрипт» . Обратите внимание, напротив пункта «Включено» должна стоять зеленая галочка.
Откроется окно для создания нового скрипта. Теперь нужно скаченный юзерскрипт открыть с помощью текстового редактора, код из него скопировать и вставить в это окно в браузере. После чего нажать на « Файл -> Сохранить» :
Скрипт готов к работе.
Второй способ установки юзерскрипта – без использования расширений. Для этого скрипт придется немного доработать, создать для него файл manifest.json, благодаря которому скрипт можно будет установить как распакованное расширение.
- Для начала нужно скачать сам файл скрипта с названием *.user.js.
- Теперь создайте папку и положите в нее скрипт (например, создайте на диске «C» папку с названием Extensions, или любым другим названием).
- Откройте скрипт с помощью текстового редактора. Обратите внимание! Обычный блокнот Windows может не подойти – желательно использовать текстовый редактор с возможностью изменения кодировки, например Notepad++. Текст двух этих файлов должен быть в кодировке UTF-8, иначе установить не получится. В файле скрипта, в самом начале, найдите следующие строки:
// @name ... // @version ... // @description ... // @include ... (может быть несколько) // @exclude ... (может быть несколько)
- В той же папке создайте файл manifest.json и вставьте в него этот шаблон (или скачайте готовый файл):
{ "content_scripts": [ { "exclude_globs": [ "все_домены_и_пути_из_exclude_директив" ], "exclude_matches": , "include_globs": [ "все_домены_и_пути_из_include_директив" ], "js": [ "имя_файла_юзерскрипта.js" ], "matches": [ "http://*/*", "https://*/*" ], "run_at": "document_idle" } ], "converted_from_user_script": true, "description": "описание_вашего_юзерскрипта", "name": "имя_вашего_юзерскрипта", "version": "номер_версии_юзерскрипта", "manifest_version": 2 }
"content_scripts" : [ { "exclude_globs" : [ "все_домены_и_пути_из_exclude_директив" ] , "exclude_matches" : , "include_globs" : [ "все_домены_и_пути_из_include_директив" ] , : "описание_вашего_юзерскрипта" ,"name" : "имя_вашего_юзерскрипта" , "version" : "номер_версии_юзерскрипта" , "manifest_version" : 2 |
Заполните его данными юзерскрипта, которые искали в пункте 3.
номер_версии_юзерскрипта - до 4 чисел, разделенных точками. Например, 2.1.3
имя_файла_юзерскрипта.js - имя файла скрипта, лежащего рядом с файлом manifest.json
все_домены_и_пути_из_include_директив - каждый в кавычках, разделять запятыми, со всеми метасимволами типа «*» - все пути из директив @include, которые пишутся в начале файла юзерскрипта (например, [ «http://site1.ru/*»,» http://site2.ru/*» ]);
все_домены_и_пути_из_exclude_директив - то же, для директив @exclude
После того, как все будет готово, юзерскрипт устанавливается как стороннее расширение. Меню браузера в правом верхнем углу > Дополнительные инструменты > Расширения. Отметить галочкой «Режим разработчика», затем выбрать «Загрузить распакованное расширение…» и в открывшемся окне выбрать папку с только что созданными файлами. Если все сделано правильно, юзерскрипт добавится в браузер и активируется. Единственный минус данного способа в том, что каждый раз при запуске браузер будет выдавать вот такое окно:
уведомляя о том, что в нем установлено стороннее расширение, которое может быть небезопасно. Достаточно нажать «Отмена» и все будет работать.
0. Введение
Механизм расширения конфигурации появился в платформе 8.3.6 и соответственно может применяться в конфигурациях с отключенной совместимостью. На текущий момент все типовые конфигурации на управляемых формах поддерживают работу с расширениями. Рассмотрим подробнее, что это за механизм.
Согласно документации:
"Механизм расширения конфигурации - это специальный механизм, предназначенный для доработки расширяемой конфигурации без изменения этой конфигурации (в том числе без снятия с поддержки).
Основное назначение расширения конфигурации - это доработка прикладного решения при внедрении (или в «облаке») под нужды клиента. При этом дорабатываемую конфигурацию не надо снимать с поддержки. В результате сохраняется простота обновления типового прикладного решения, стоящего на поддержке, с необходимостью выполнять доработки. При разработке расширения следует понимать некоторые особенности функционирования расширения конфигурации. Так, расширяемая конфигурация в любой момент может быть изменена, например, в результате обновления. При этом разработчик расширения не может никак повлиять на возможность или невозможность обновления. Также следует учитывать тот факт, что в системе могут функционировать более одного расширения и автор каждого расширения (в общем случае) не знает, как функционирует другое расширение."
Более подробно о расширениях можно почитать и посмотреть здесь:
Заметки в зазеркалье
Курсы Гилёва и Насипова
Расширения в 8.3.9
Ниже я приведу полезные советы для работы с расширениями.
Возможно некоторые покажутся слишком простыми или очевидными, но они могут быть полезны тем, кто только начинает свою работу с расширениями.
Также с удовольствием дополню вашими советами из комментариев.
Итак, поехали!
1. Показать/скрыть неизмененные объекты
При добавлении новых объектов в расширение также автоматически добавляются связанные объекты. В результате в метаданных расширения скапливается много служебных объектов.
Для того, чтобы показать только измененные объекты есть кнопка “Измененные и добавленные в расширении”. При нажатии отображаются только добавленные вручную и измененные объекты расширения.
Принцип её работы показан ниже:
2. Последовательность выполнения обработчиков
Если в расширении переопределить событие или команду, то по умолчанию сначала выполняется обработчик из расширения, а затем обработчик типовой конфигурации.
Это не всегда удобно, например, когда какие-то операции следует выполнить после типовых обработчиков.
Рассмотрим примеры, которые позволяют изменить эту последовательность:
а) Выполнить сначала типовой код, затем код из расширения:
&НаСервере Процедура Учеб_ПриСозданииНаСервере(Отказ, СтандартнаяОбработка) ДополнительныеПараметры = Новый Структура; ДополнительныеПараметры.Вставить("Сообщение", "ПослеТиповогоОбработчика!"); УстановитьВыполнениеПослеОбработчиковСобытия("ВыполнитьПослеТиповогоОбработчика", ДополнительныеПараметры); КонецПроцедуры &НаСервере Процедура ВыполнитьПослеТиповогоОбработчика(Отказ, СтандартнаяОбработка, ДополнительныеПараметры) Сообщить(ДополнительныеПараметры.Сообщение); КонецПроцедуры
б) Выполнить сначала код из расширения, затем типовой код, затем опять код из расширения
&НаСервере Процедура Учеб_ПриСозданииНаСервере(Отказ, СтандартнаяОбработка) // Процедуры до типовых обработчиков Сообщить("До типового обработчика!"); // Устанавливаем обработчик после типового обработчика событий УстановитьВыполнениеПослеОбработчиковСобытия("ВыполнитьПослеТиповогоОбработчика"); // Дальше будет выполнен код из типового обработчика КонецПроцедуры &НаСервере Процедура ВыполнитьПослеТиповогоОбработчика(Отказ, СтандартнаяОбработка, ДополнительныеПараметры) // Код после типового обработчика из расширения Сообщить("После типового обработчика!"); КонецПроцедуры
в) Выполнить сначала типовой код, затем код из расширения, затем снова типовой код
Можно прибегнуть к хитрости:
- Отменяем выполнение обработчиков из типовой конфигурации.
- В расширении вызываем нужные процедуры из типового кода в перемешку с процедурами из расширения.
&НаСервере Процедура Учеб_ПриСозданииНаСервере(Отказ, СтандартнаяОбработка) // Процедуры до типовых обработчиков Сообщить("ДоТиповогоОбработчика!"); // Процедуры из типового обработчика Если НЕ ЗначениеЗаполнено(БанковскийСчет.ВалютаДенежныхСредств) Тогда БанковскийСчет.ВалютаДенежныхСредств = ОбщегоНазначенияБПВызовСервераПовтИсп.ПолучитьВалютуРегламентированногоУчета(); КонецЕсли; РазместитьКонтактнуюИнформацию(); Если Параметры.Ключ.Пустая() Тогда ПодготовитьФормуНаСервере(); КонецЕсли; УправлениеФормой(ЭтаФорма); // Процедуры после типовых обработчиков Сообщить("ПослеТиповогоОбработчика!"); // Остановим выполнение типовых обработчиков УстановитьВыполнениеОбработчиковСобытия(Ложь); КонецПроцедуры
г) Отменить типовые обработчики
&НаСервере Процедура Учеб_ПриСозданииНаСервере(Отказ, СтандартнаяОбработка) // Остановим выполнение типовых обработчиков УстановитьВыполнениеОбработчиковСобытия(Ложь); КонецПроцедуры
3. Создание и использование общего модуля, модуля менеджера или модуля объекта
На текущий момент механизм расширений не позволяет создавать или заимствовать общие модули, модули менеджера и модули объектов. Но в обработке, включенной в состав конфигурации, доступен модуль менеджера и к нему можно обращаться:
&НаСервере Процедура СообщитьДиректораНаСервере() Должность = "Директор"; ФИОРуководителя = "Иванов И.И."; Обработки.Учеб_Обработка.СообщитьДиректора(Должность, ФИОРуководителя); КонецПроцедуры
Модуль менеджера обработки:
Процедура СообщитьДиректора(Знач Должность, Знач ФиоРуководителя) Экспорт ТекстСообщения = СтрШаблон(НСтр("ru="%1 %2""), Должность, ФиоРуководителя); Сообщить(ТекстСообщения); КонецПроцедуры
Таким же образом можно организовать собственное подобие общего модуля, в котором можно хранить общие процедуры и функции, требующиеся для работы расширения, . Также можно включать в состав расширения внешние обработки. Напомню, что во внешней обработке модуль менеджера не доступен.
4. Как подключить отладку
В типовых конфигурациях на основе библиотеки стандартных подсистем (БСП) при отладке расширений встречается вот такое страшное сообщение:
Оно возникает если в конфигураторе открыто наше расширение и лечится только закрытием окна расширения.
Для того, чтобы подключить отладку в расширении следует и спользовать ключ командной строки - “РежимОтладки”
Это упрощает отладку кода. В частности:
- Все длительные операции выполняются сразу, без запуска фонового задания;
- При разработке расширений конфигурации, возможен запуск с установленными расширениями конфигурации, которые в данный момент открыты в конфигураторе (при условии, что версия конфигурации и версии расширений не менялись).
Для того чтобы его установить:
- Запустить предприятия с ключом командной строки - " /C РежимОтладки "
- В режиме конфигуратора установить параметр запуска:
Сервис -> Параметры -> Запуск 1С:Предприятия -> Параметр запуска: ввести строку < РежимОтладки >
При первом подключении расширения или при изменении в версии расширения или поставщика, отладка может не подключится с таким же сообщением.
Для того, чтобы исправить эту ситуацию можно попробовать следующие действия:
1. В конфигураторе закрыть это расширение
2. Запустить конфигурацию в режиме предприятие и открыть форму, связанную с расширением
3. Открыть расширение в конфигураторе
4. Перезапустить отладку.
5. Как писать запросы
Расширение видит и работает только с теми объектами, которые заимствованы из основной конфигурации.
Объекты, которые не заимствованы, в расширении не видны и при попытке обращения к ним, например, в тексте запроса, в режиме “Конфигуратор” вызывают ошибку. Хотя в пользовательском режиме код выполняется без проблем.
Для того чтобы писать или редактировать запросы с большим количеством метаданных лучше воспользоваться любой внешней обработкой. В ней доступны все метаданные из основной конфигурации:
6. Как сохранять данные
Расширение не предназначено для хранения важных данных и тем более данных, влияющих на учет. Но настройки сохранять нужно.
Для этого можно воспользоваться хранилищем общих настроек или сохранением данных формы:
а) Сохранение данных формы
В редактируемой форме можно установить свойство - “АвтоматическоеСохранениеДанныхВНастройках” в "Использовать" и поставить флаг "Сохранение" над нужными реквизитами. Это позволит сохранять значения реквизитов типовым механизмом платформы:
Такое сохранение данных .
б) Хранилище общих настроек
В этом хранилище можно хранить любые данные. Подробнее можно .
Рассмотрим пример хранения произвольных данных.
Сохранение данных:
&НаСервере Процедура ПередЗакрытиемНаСервере() // Подготовим структуру хранения данных СтруктураНастроек = Новый Структура; СтруктураНастроек.Вставить("Всем", Всем); СтруктураНастроек.Вставить("Близким", Близким); СтруктураНастроек.Вставить("Друзьям", Друзьям); // Сохраним данные в хранилище общих настроек ОбщегоНазначения.ХранилищеОбщихНастроекСохранить("Учеб_СделатьВсёХорошо", "Настройки", СтруктураНастроек); КонецПроцедуры
Восстановление данных:
&НаСервере Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка) // Инициализируем структуру СтруктураНастроек = Новый Структура; // Восстановим сохраненные данные СтруктураНастроек = ОбщегоНазначения.ХранилищеОбщихНастроекЗагрузить("Учеб_СделатьВсёХорошо", "Настройки", СтруктураНастроек); // Заполним значения реквизитов формы ЗаполнитьЗначенияСвойств(ЭтаФорма, СтруктураНастроек); КонецПроцедуры
7. Как добавить свой макет
К сожалению, в заимствованных документах нельзя добавлять или изменять макеты. Но макеты можно добавлять к обработкам, также можно вставлять внешние обработки, в которых уже существуют макеты. Эти макеты можно использовать для создания или изменения печатных форм, .
8. Как подменить кнопку заполнения табличной части
Иногда может потребоваться и добавить свою кнопку заполнения и оставить типовую кнопку.
Для того, чтобы убрать типовую кнопку подальше, но не удалять её совсем можно установить свойство - “Только во всех действиях” - "Да":
В этом случае кнопка будет доступна из подменю “Еще”. Это позволит в случае непредвиденных ситуаций продолжить работу с типовой функциональностью.
9. Расширение как багфикс
Бывают такие ситуации, когда у клиента обнаруживается ошибка, но конфигурация на замке. Снимать с поддержки ради исправления ошибки не хочется. В таких ситуациях можно создать небольшое расширение, которое исправляет именно эту конкретную ошибку. Создав такое расширение один раз, можно легко подключать его у всех своих клиентов.
К тому же разработчики типовых иногда выкладывают текст исправления ошибки на партнерском форуме. Это позволит создать такое расширение еще проще.
Если ошибку исправить не легко, то можно сделать её хотя бы менее критичной, например, поставив в проблемном месте заглушку.
И не забываем отключить это расширение после того, как ошибка будет исправлена в типовой конфигурации.
10. Как вывести свою обработку в интерфейс
Для того, чтобы вывести свою обработку в интерфейс конфигурации необходимо включить её в состав требуемой подсистемы:
Также можно создать свою подсистему в расширении и складывать нужные объекты в неё.
Например, можно поместить в расширение внешние обработки или отчеты и просто подключать их к любым конфигурациям:
11. Как перевести расширение на 8.3.8
Чтобы перевести расширение на 8.3.8 следует выполнить следующие действия:
1. Снять режим совместимости в расширении.
Установить свойства совместимости такими же как и у основной конфигурации.
2. Устранить проблемы подключения.
Необходимо проверить, что на новой версии расширение подключается. Причину ошибок можно посмотреть в журнале регистрации.
3. Обновить формы в расширении.
Следует обновить формы расширений из основной конфигурации. Чтобы и в расширении и в конфигурации формы были одинаковыми.
4. Привести компоновку формы к новым правилам движка.
С рекомендациями по адаптации форм к новой платформе можно ознакомиться по этой ссылке .
5. Проверить, что расширение выглядит и работает правильно.
Более подробно по каждому пункту описано в . Там же приведены полезные материалы по теме.
12. Как подключить расширение
1. Администрирование - "Печатные формы и обработки"
3. Кнопка "Добавить" - Выбираем файл
4. Кнопка "Перезапустить"
5. Готово!
13. Как обновить расширение
1. Администрирование - "Печатные формы и обработки"
3. Встаем на нужное расширение
4. "Еще" - Команда "Обновить из файла на диске"
5. Кнопка "Перезапустить"
6. Готово!
Пока на этом всё!
Благодарность можно выразить денежно, а то кризис, сами понимаете!
Расширения добавляют новые функциональные фозможности в браузер.
Добавить расширение в хром в целом несложно.
Вся работа выполняется в браузере Google Chrome.
Итак, чтобы добавить расширение в хром, входим в Настройки и управление Google Chrome .
Найти вход в настройки несложно. Наведите курсор на три горизонтальные полоски в правом верхнем углу браузера Google Chrome. Появится подсказка – Настройка и управление Google Chrome.
Щелкаем по кнопке с тремя полосками. Откроется контекстное меню (рис.1).
Рис.1 Добавление расширения в хром – Настройки и управление Google Chrome
Сделать это можно двумя способами.
Первый: в контекстном меню Настройки и управление Google Chrome щелкаем Настройки , затем в открывшемся окне щелкаем Расширения .
Второй: в контекстном меню Настройки и управление Google Chrome выбираем Дополнительные инструменты , затем в открывшемся меню щелкаем Расширения .
Результат будет один и тот же. Мы попадем в раздел с уже установленными расширениями в хроме.
Если сравнивать, то второй способ быстрее и предпочтительнее, но в целом это дело любительское.
Можно также войти в расширения через адресную строку хрома, введя адрес - chrome://extensions/ .
Как уже говорилось, здесь мы увидим все установленные расширения.
Чтобы добавить новое расширение в хром нужно щелкнуть по ссылке - Еще расширения .
Она располагается внизу под списком установленных расширений.
Расширений здесь достаточно много и в первое время проблематично быстро добавить нужное.
Для облегчения поиска нужного расширения слева вверху находится строка Поиск по магазину . Она вам очень поможет, если вы знаете название расширения.
Например, чтобы найти расширение для кнопки проверки ТИЦ сайта достаточно ввести фразу yandex tyc google pr indicator.
Откроется нужное расширение.
Щелкаем по кнопке Бесплатно . Пойдет процесс проверки расширения.
Затем появится диалоговое окно Подтверждения нового расширения .
Щелкаем Добавить . Снова идет проверка и появится диалоговое окно, с просьбой активации добавленного расширения в хроме.
Бывают случаи, когда при попытке добавить расширение в хром при проверке выдается ошибка.
Тогда можно попробовать добавить расширение в хром, щелкнув в любом другом месте выбранного расширения, а не на кнопке Бесплатно .
В этом случае откроется новое диалоговое окно и уже в нем для добавления щелкаем по кнопке Бесплатно и далее процесс проверки и добавления как обычно.
Иногда это помогает.
Или можно просто в диалоговом окне с ошибкой щелкнуть обновить и повторить процесс добавления расширения в хром.
Обычно все заканчивается благополучно. Новое расширение добавляется в хром.
Увидеть его можно сразу же, перейдя в раздел Расширения .
Добавленное расширение будет уже включенным.
Итак, мы рассмотрели весь процесс, добавления расширения в хром (google chrome).
Но путь поиска и добавления расширения можно значительно сократить.
Чтобы добавить расширение в хром, можно просто ввести в адресной строке:
https://chrome.google.com/webstore/category/extensions?hl=ru
Вы когда-нибудь задумывались над тем, как сделать расширение для Chrome? Ну, я здесь, чтобы рассказать вам, насколько это просто. Выполните следующие действия, ваша идея станет реальностью и вы сможете мгновенно опубликовать реальное расширение в интернет-магазине Chrome.
Что такое расширение Chrome?
Расширения Chrome позволяют добавлять функциональные возможности в веб-браузер Chrome без глубокого погружения в нативный код. Это потрясающе, потому что вы можете создавать новые расширения для Chrome на основе технологий, с которыми хорошо знакомы веб-разработчики: HTML, CSS и JavaScript. Если вы когда-либо создавали веб-страницу, то сможете и создать расширение - быстрее, чем пообедаете. Единственное, что вам нужно узнать – это как добавить некоторые функции в Chrome с помощью JavaScript API, которые предоставляет Chrome.
Что вы хотите создать?
Прежде чем начать, вы должны иметь общее представление о том, что вы хотите сделать. Это не должно быть какой-то новой прорывной идеей, с начала мы можем просто сделать проект для удовольствия. В этой статье я расскажу вам о своей идее и о том, как я реализовал ее виде расширения Chrome.
План
Некоторое время назад я использовал расширение Unsplash – оно показывало хорошие фоновые изображения на открываемой по умолчанию пустой вкладке. Позже я заменил его расширением Muzli , которое превращает вкладку по умолчанию в ленту материалов о дизайне и новостей со всего Интернета.
Давайте использовать эти два расширения как вдохновение для создания чего-то нового, но на этот раз для любителей кино. Моя идея – показать случайное фоновое изображение фильма каждый раз, когда вы открываете новую вкладку. При прокрутке расширение должно превращаться в хороший канал о популярных фильмах и телешоу. Давайте начнем.
Шаг первый: настройка
Первый шаг – создать файл манифеста с именем manifest.json. Это файл метаданных в формате JSON, который содержит такие свойства, как имя вашего расширения, описание, номер версии и так далее. В этом файле мы сообщаем Chrome, что расширение будет делать, и какие разрешения он требует.
Для расширения нам нужно иметь разрешение на управление activeTab, поэтому наш файл manifest.json выглядит примерно так:
{ “manifest_version”: 2, “name”: “RaterFox”, “description”: “The most popular movies and TV shows in your default tab. Includes ratings, summaries and the ability to watch trailers.”, “version”: “1”, “author”: “Jake Prins”, "browser_action": { "default_icon": "tab-icon.png", “default_title”: “Have a good day” }, “chrome_url_overrides” : { “newtab”: “newtab.html” }, “permissions”: [“activeTab”] }
Как вы можете видеть, мы указываем, что newtab.html будет HTML-файлом, который должен отображаться каждый раз, когда открывается новая вкладка. Для этого нам нужно иметь разрешение на управление activeTab, поэтому, когда пользователь пытается установить расширение, они будут предупреждены обо всех разрешениях, которые необходимы расширению.
Еще одна интересная вещь внутри manifest.json – это действия браузера. В этом примере мы используем его, чтобы установить заголовок, но вообще есть больше параметров. Например, чтобы показывать всплывающее окно, когда вы нажимаете значок приложения внутри адресной строки, все, что вам нужно сделать, это что-то вроде этого:
“browser_action”: { “default_popup”: “popup.html”, },
Теперь popup.html будет отображаться внутри всплывающего окна, которое создается в ответ на щелчок пользователя на действии браузера. Это стандартный HTML-файл, поэтому он дает вам свободу действий над тем, что отображает всплывающее окно. Просто поместите часть своей магии в файл с именем popup.html.
Шаг второй: проверьте, работает ли оно
Следующий шаг – создать файл newtab.html и поместить в «Hello world»:
Hello World!
Чтобы проверить, работает ли он, посетите chrome://extensions в вашем браузере и убедитесь, что флажок «Режим разработчика» установлен в верхнем правом углу.
Нажмите Load unpacked extension и выберите каталог, в котором живут ваши файлы расширений. Если расширение действует, оно будет активным сразу, чтобы вы могли открыть новую вкладку и увидеть свой «Hello world».
Шаг третий: сделайте приятный дизайн
Теперь, когда у нас появилась наша первая функция, пришло время сделать ее красивой. Мы можем просто создать новую вкладку, создав файл main.css в нашем каталоге расширений и загрузив его в наш файл newtab.html. То же самое происходит с включением файла JavaScript для любых активных функций, которые вы хотели бы использовать. Предполагаю, что вы создавали веб-страницы раньше, и теперь вы можете использовать свои навыки, чтобы показать своим пользователям все, что захотите.
Окончание плана
Все, что мне понадобилось для завершения расширения – это HTML, CSS и JavaScript, поэтому я не думаю, что важно глубоко погрузиться в код, поэтому я расскажу об этом быстро.
Вот что я сделал:
Для моей идеи мне нужны были хорошие фоновые изображения, поэтому в файле JavaScript я использовал TMDb API для получения списка популярных фильмов, взял их фоновые изображения и поместил их в массив. Всякий раз, когда страница загружает его, он случайным образом выбирает одно изображение из этого массива и задает его как фон страницы. Чтобы сделать эту страницу более интересной, я также добавил текущую дату в верхнем правом углу. И для получения дополнительной информации, он позволяет пользователям кликнуть на фон, который приводит к посещению страницы IMDb фильма.
Я создал экран с хорошей лентой популярных фильмов, когда пользователь пытается прокрутить вниз. Я использовал тот же API для создания карточки фильма с изображением, заголовком, рейтингом и количеством голосов. По клику на карточке показывается обзор с кнопкой для просмотра трейлера.
Результат
Теперь с этим маленьким файлом manifest.json и некоторыми HTML, CSS и JavaScript, каждая новая вкладка, которую вы открываете, выглядит намного интереснее:
Шаг 4. Публикация расширения
Когда ваше первое расширение Chrome выглядит красиво и работает так, как должно, пришло время опубликовать его в магазине Chrome. Просто перейдите по этой ссылке , чтобы перейти на панель инструментов Chrome Web Store (вам будет предложено войти в свою учетную запись Google, если это не так). Затем нажмите кнопку «Add new item», примите условия, и вы перейдете на страницу, где вы можете загрузить расширение. Теперь сжимаем папку, содержащую ваш проект, и загружаем этот ZIP-файл.
После успешной загрузки файла вы увидите форму, в которой вы должны добавить некоторую информацию о своем расширении. Вы можете добавить иконку, подробное описание, загрузить некоторые скриншоты и так далее.
Убедитесь, что вы предоставили несколько хороших изображений, чтобы показать свой проект. Магазин может использовать эти изображения для продвижения вашего новаторского проекта. Чем больше изображений вы предоставите, тем более заметным будет ваше расширение. Вы можете просмотреть, как ваше расширение показывается в веб-магазине, нажав кнопку «Предварительный просмотр». Когда вы довольны результатом, нажмите «Опубликовать изменения». Готово!
Осталось только получить пользователей!
Вывод
Веб-разработчику очень легко создать расширение Chrome. Все, что вам нужно, это HTML, CSS, JavaScript и базовые знания о том, как добавить функциональность с помощью некоторых JavaScript API, которые предоставляет Chrome. Ваше первое расширение может быть опубликовано в Интернет-магазине Chrome всего за 20 минут. Создание нового, стоящего и красивого расширения займет, конечно, немного больше времени. Но все зависит от вас!
Используйте свое творческое мышление, чтобы придумать что-то интересное, но если вы когда-нибудь застрянете, есть отличная документация по расширениям Chrome - вероятно, она сможет вам помочь.
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать .
