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

Обновлено: 06.07.2024

Расширения – очень удобная функция, которая предусматривается практически во всех современных браузерах, в том числе в Microsoft Edge. В начальной версии их не было, и уже после выпуска нескольких значительных обновлений возможность установки была встроена. И, как полагается во всех продуктах от корпорации Microsoft, действовать приходится нестандартными способами. Поговорим о том, как установить и удалить расширение в браузере Edge.

Как установить расширения в Edge?

Ресурс для скачивания расширений лишь один – это Microsoft Store. И если открыть категорию «Приложения» и прокрутить чуток вниз, то можно найти подраздел «Расширения для Microsoft Edge».

Все расширения для браузера Edge скачиваются с официального онлайн-магазина Microsoft Store Все расширения для браузера Edge скачиваются с официального онлайн-магазина Microsoft Store

Нажимаю на ссылку «Показать все…» и просматриваю список доступных на данный момент дополнений для браузера Edge. Нахожу то, что мне нравится, и жму по этому элементу. Должно открыться новое окно с описанием возможностей и ссылкой на скачивание. Как полагается любому продукту в этом официальном магазине, сначала мне необходимо получить его – жму на соответствующую кнопку.

Сначала нужно получить расширение, только после этого начнется установка Сначала нужно получить расширение, только после этого начнется установка

После этого выйдет окно о необходимости входа в учетную запись – это не обязательно, так что можно отклонить. Дальше дополнение автоматически начнет скачиваться, появится кнопка «Запустить», при нажатии на которую будет открыт Edge и дан запрос на включение.

После получения выйдет окно с прогрессом скачивания После получения выйдет окно с прогрессом скачивания

Как удалить расширения в Edge?

С того же онлайн-магазина Microsoft Store удалить расширения не получится никак – нужно либо открывать браузер, либо раздел с установленными приложениями в параметрах системы. Начну с первого: при открытии браузера Edge в правом верхнем углу высвечивается иконка дополнения. Жму по ней правой кнопкой мыши для вызова контекстного меню и выбираю элемент «Управление».

Откроется отдельное небольшое окошко с настройками, а дальше я могу действовать двумя способами – просто отключить расширение или же вообще удалить его из памяти компьютера. В первой ситуации я просто переключу первый синий тумблер, а во второй – нажму на кнопку «Удалить» в самом низу.

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

Второй метод удаления расширения из браузера: открываю параметры системы, нажав на комбинацию клавиш Win + I или на иконку в меню «Пуск» с изображением шестеренки.

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

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

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

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

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

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

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

В этой статье

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

Манифест

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

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

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

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

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

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

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

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

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

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

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

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

Иконки

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

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

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

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

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

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

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

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

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

"permissions": ["activeTab", "scripting"],

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

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

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

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

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

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

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

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

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

Проверка

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

Целью этого руководства является создание расширения Microsoft Edge, начиная с пустого каталога. Вы строите расширение, которое всплывающее изображение ДНЯ НАСА. В этом руководстве вы узнаете, как создать расширение с помощью:

• Создание manifest.json файла.
• Добавление значков.
• Открытие всплывающее диалоговое окно по умолчанию.

Перед началом работы

Чтобы проверить завершенное расширение, которое вы строите в этом учебнике, скачайте исходный код.

Шаг 1. Создание файла manifest.json

Каждый пакет расширения должен manifest.json иметь файл в корне. Манифест содержит сведения о расширении, версии пакета расширения, имени и описания расширения и так далее.

В следующем фрагменте кода описаны основные сведения, необходимые в manifest.json файле.

Шаг 2. Добавление значков

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

Значок на панели инструментов для открытия расширения

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

• PNG формат для значков, но вы также можете использовать BMP GIF , или ICO JPEG форматы.
• Изображения размером 128 x 128 px, которые при необходимости будут повторно размера в браузере.

Каталоги проекта должны быть похожи на следующую структуру.

Затем добавьте значки в manifest.json файл. Обновите файл с помощью иконок, чтобы он совпадал со manifest.json следующим фрагментом кода. Файлы, png перечисленные в следующем коде, доступны в файле загрузки, упомянутом ранее в этой статье.

Шаг 3. Откройте всплывающее окно по умолчанию

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

Добавьте код из следующего фрагмента кода, чтобы popup.html отобразить изображение звезд.

Убедитесь, что файл изображения images/stars.jpg добавляется в папку изображений. Каталоги проекта должны быть похожи на следующую структуру.

Наконец, убедитесь, что вы зарегистрируете всплывающее всплывающее в соответствии с , как показано в следующем фрагменте manifest.json browser_action кода.

Дальнейшие действия

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

Компания Microsoft 15 января 2020 года выпустила браузер Microsoft Edge для Windows, MacOS и для мобильных операционных систем. А в октябре 2020 года, разрабатываемую версию Microsoft Edge Dev для Linux, которая обновляется каждую неделю.

Вот что пишут о браузере Microsoft Edge его разработчики:

Я не фанат Google Chrome и других браузеров основанных на платформе Chromium. Предпочитаю Palemoon, форк Firefox, но потребляющий намного меньше ресурсов компьютера, чем его старший брат.

Но я всё-таки решился на установку Microsoft Edge Dev из простого любопытства.

Браузер шустрый, быстрее Google Chrome, легко настраиваемый за счёт расширений Chrome и потребляет меньше ресурсов.

Но меня заинтересовала одна фишка в Настройках Microsoft Edge, а именно предложение создать из любой веб-страницы веб-приложение в два клика.

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

Примечание. Хотелось бы отметить, что значки запуска созданных приложений автоматически создаются из фавикона (favicon) веб-сайта, который отображается на каждой вкладке:

Итак, нерейдём к созданию приложения в Microsoft Edge.

1. Откройте станицу в Microsoft Edge, которую хотите преобразовать в приложение.

2. Войдите в Настройки - Приложения - Установить этот сайт как приложение.

3. После чего откроется окно подтверждения - Установить приложение, где пользователь может изменить название данного приложения на своё усмотрение и нажать Установить.

Вот и всё. Приложение создано. Запустить его можно как из системного Меню приложений, так и с рабочего стола, а также добавить на панель быстрого запуска.

Я сделал небольшой эксперимент. Открыл канал YouTube в браузере и одновременно приложение YouTube, чтобы посмотреть на потребление ресурсов в Системном мониторе. И вот что показывает сисмонитор.

Удаление созданных веб-приложений осуществляется двумя способами.

1. Если вы решили удалить созданное приложение, откройте Настройки браузера - Приложения - Управление приложениями.

Правый клик на приложении, которое хотите удалить и Удалить.

2. Откройте веб-приложение, перейдите в Настройки - Удалить.

Вот так просто создание и удаление веб-приложений в Microsoft Edge.

Установить Microsoft Edge Dev для Linux можно по следующей ссылке:

В этой статье я расскажу как при помощи HTML и JavaScript сделать своё собственное расширение для Photoshop, Illustrator, Premier, Flash, Prelude или InDesign.

С июня 2013-го года Adobe добавила поддержку HTML5 для расширений, тем самым упростив их создание.

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

Инструменты

Для работы нам понадобятся любимый текстовый редактор и базовые знания HTML, CSS и JavaScript.
Да-да, теперь никаких Adobe Configurator и Flash.

Автоматизировать создание базового набора нужных файлов помогут Eclipse и Brackets/Edge Code CC.

Из чего состоит

Создадим простейшее расширение для Photoshop.

Минимальный набор файлов и их структура такие:

где manifest.xml — файл с описанием всех его параметров,
а index.html — само расширение.

Manifest.xml содержить примерно следуюшее

а в index.html, всё что душе угодно. Например:

Вот и всё.
Наше первое расширение готово.

Запуск

Для запуска неподписанных приложений нужно включить PlayerDebugMode.
Для этого нужно добавить ключ PlayerDebugMod со значением String равным 1

Далее папку с созданным расширением нужно положить сюда

Запустить Фотошоп и выбрать в меню Window > Extensions > наше расширение

Все дальнейшие изменения можно вносить прямо в папке CEPServiceManager4\extensions.
О том как вносить изменения без перезапуска Фотошопа ниже

Debugging

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

содержание которого примерно следующее

где Extension — ID нашего расширения,
а Port=«8088» — порт для подключения.

выберем наш index.html.
И вот они Developer Tools

Проверено в Safari и Chrome

Инструменты упрощающие жизнь

Adobe Edge Code CC/Brackets

• все нужные файлы в нужном месте для Photoshop, Illustrator, Premier, Flash, Prelude или InDesign на выбор
• библиотеки jQuery и CSInterface
• шаблон для иконки
• свою библиотеку оформления всех элементов интерфейса в стиле Adobe
• скрипт автоматического перекрашивания панели в цвет интерфейса приложения
• кнопочку «Refresh»
• .debug со всеми прописанными данными

После установки расширения в Edge Code CC выбираем File > New Creative Cloud Extension

Вносим нужные правки в index.html

Сохраняем. Запускаем фотошоп и открываем то, что получилось.

Обратите внимание на маленькую кнопочку «Rf» в правом верхнем углу — она позволяет перезагружать расширение без перезагрузки фотошопа.

Кстати, все скрипты работающие непосредственно с функциональностью фотошопа хранятся в папке jsx папки расширения.

Eclipse

Для этого редактора скачиваем это дополнениеAdobe Extension Builder 3 и устанавливаем его.

• шаблоны для Photoshop, Illustrator, Premier, Flash, Prelude или InDesign
• библиотеки jQuery и CSInterface
• свою библиотеку оформления всех элементов интерфейса в стиле Adobe
• скрипт автоматического перекрашивания расширения в цвет интерфейса приложения

Суть примерно такая же как и в первом случае.
Только вот очень неудобно, что для просмотра внесённых изменений нужно каждый раз перезапускать фотшоп.
Также нет иконки и .debug-файла.
Да и сам Eclipse тяжелее на подъём.

Сборка в ZXP

Последний этап — собрать результат в ZXP-файл и подписать его.
За неимением под рукой Windows, расскажу как это делается в OS X.
Для этого скачиваем CC Extensions Signing Toolkit

Открываем терминал и получаем сертификат командой

пример
Полсле того, как сертификат получен пакуем наше расширение в ZXP с использованием этого сертификата.

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

Полезные ссылки

HTML Panel Tips by Davide Barranca — несколько полезных статей на тему
Introduction To Photoshop Scripting By Kamil Khadeyev — с чего начать свой первый скрипт для Фотошопа.
USING The Adobe Eextension SDK — подробная инструкция от Adobe
Adobe Photoshop Scripting — документация по написанию скриптов от Adobe

A Short Guide to HTML5 Extensibility — примерно тоже, что я описал в первой части своей статьи
Introducing HTML5 Extensions — пара вводных видео для работы с Eclipse
Adobe Extension Builder 3 — расширение для Eclipse и паковщик в ZXP-файлы
Creative Cloud Extension Builder for Brackets — расширение для Adobe Edge Code CC/Brackets

Читайте также:

  
• Что можно подключить к компьютеру
  
• Активировать movavi video suite 21
  
• Combination файлы для сброса frp на samsung a320f
  
• Не удается открыть источник файл graphics h
  
• Не устанавливается office 2010 osetup dll