Расширения для браузера мазила. Необходимые приложения для Веб-разработчика. Создание проекта расширения

Это руководство — пошаговая инструкция по созданию простейшего расширения. Мы попробуем добавить в строку состояния еще одну небольшую панельку с фразой «Hello, World!».

Подготовка окружения

Расширения упаковываются и распространяются в виде zip-файлов или пакетов с расширением XPI.

Вот пример типичной внутренней структуры XPI-файла:

ExampleExt.xpi:
/install.rdf
/components/*
/components/cmdline.js
/defaults/
/defaults/preferences/*.js
/plugins/*
/chrome.manifest
/chrome/icons/default/*
/chrome/
/chrome/content/

Нам нужно создать структуру каталогов, похожую на эту. Для начала создайте корневую директорию расширения (например, C:\extensions\my_extension\ или ~/extensions/my_extension/). Внутри этого каталога создайте каталог chrome , в котором создайте каталог content .

Если вам все еще предлагается перезапустить браузер, некоторые из них могут найти объект. Эти данные собираются только для статистических целей, для диагностики любых проблем на наших серверах и для улучшения обслуживания. Давайте посмотрим, что лучше. Они называются по-разному, но в основном они указывают на скрипты или программы, которые могут расширять возможности и возможности. Рекламные заглушки в каждом углу страницы? Это плагин вашей мечты. Устраняет все баннеры, делая просмотр веб-страниц более приятным.

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

В корневом каталоге расширения создайте два пустых текстовых файла с именами chrome.manifest и install.rdf . В итоге должна получиться структура каталогов следующего вида:

\
install.rdf
chrome.manifest
chrome\
content\

Дополнительная информация о настройке окружения находится по этой ссылке .

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

Поскольку невидимая рука действует на рынке, этот плагин действует на электронную коммерцию, сообщая вам, если предмет, который вы собираетесь купить, по более низкой цене на другом сайте электронной коммерции. Это расширение позволяет вам отображать полный размер измененных изображений на веб-странице. Просто перейдите миниатюру с указателем мыши, и игра будет завершена.

Сценарий установки

Откройте файл install.rdf и добавьте в него следующий текст:

Сохраните файл.

Расширение браузера с использованием XUL

Пользовательский интерфейс Firefox написан с использованием XUL и JavaScript. XUL — это подвид XML, позволяющий создавать элементы пользовательского интерфейса, такие как кнопки, меню, панели управления, деревья и т.п. Все действия пользователя обрабатываются с помощью JavaScript.

Чтобы «расширить» браузер, мы изменяем отдельные части интерфейса пользователя Firefox, добавляя или модифицируя виджеты (элементы управления). Мы добавляем виджеты путем добавления новых XUL DOM-элементов в окно браузера и управляем их поведением с помощью скриптов и обработки событий.

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

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

Интерфейс браузера определен в файле browser.xul ($FIREFOX_INSTALL_DIR/chrome/browser.jar содержит content/browser/browser.xul) В browser.xul мы можем найти описание строки состояния, которое выглядит приблизительно так:

Откройте файл chrome.manifest , который был создан в корневом каталоге вашего расширения. Добавьте следующий код:

Content sample chrome/content/

(Не забудьте о закрывающем слеше, «/»! Без него пакет не будет зарегистрирован.)

Благодаря активному сообществу, вы будете уведомлены о репутации ссылки, прежде чем открывать ее. Поэтому, чтобы избежать ошибок. Подпишитесь на нашу рассылку. Вы будете получать последние новости еженедельно. интересный в мире технологий! Расширения браузера - это инструменты, которые могут быть полезны для любого пользователя Интернета. Они могут ускорить любой процесс или повысить производительность пользователя, помогая выполнять различные действия по поиску различных вещей, управлению вкладками или твитингом и совместному использованию в социальных сетях для более конкретных действий, таких как исправление ошибок или редактирование изображений.

Разберем каждый элемент:

  1. тип пакета chrome
  2. название пакета chrome (должно быть написано в нижнем регистре, потому что Firefox/Thunderbird в версии 2 и более ранних не поддерживают названия со смешанным регистром — баг 132183)
  3. размещение файлов пакетов chrome
Это означает, что файлы пакета sample расположены в каталоге chrome/content относительно места расположения файла chrome.manifest .

Обратите внимание, что файлы контента, локализаций и скинов должны находиться внутри каталога content, locale и skin подкаталога chrome соответственно.

Среди таких множественных аддонов есть так называемые «скриншоты», которые делают работу веб-дизайнера более безупречной и эффективной. Вот 11 первоклассных, чтобы сделать скриншоты быстрыми. Этот аддон также появляется в контекстном меню и позволяет делать скриншоты либо всей веб-страницы, либо определенной ее части. Лучше всего, что он позволяет сохранять изображения в файл или в буфер обмена, а также загружать их в Интернет.

Захват экрана с помощью онлайн-загрузки

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

Сохраните файл. Теперь, когда вы запустите Firefox с вашим расширением (как это сделать, будет описано ниже), пакет chrome будет зарегистрирован.

Регистрация слоя

Теперь необходимо связать ваш слой с окном браузера. Для этого добавьте следующие строки в файл chrome.manifest:

Overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul

Эти две строки указывают Firefox’у связать sample.xul и browser.xul во время загрузки browser.xul .

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

Единственный недостаток заключается в том, что он занимает скриншот выбранной области, поэтому вы не сможете захватить весь снимок страницы. Пользователи любят свои возможности просмотра вкладок, но если вы оставите вкладки непроверенными, они могут полностью выйти из-под контроля. Для тех из вас, кто чувствует себя потерянным в море вкладок, существует множество способов управления ими; Здесь представлено более 40 лучших расширений.

Тестирование

Во-первых, мы должны сообщить Firefox о нашем расширении. На стадии разработки для Firefox версии 2 и выше, вы можете указать откуда брать новое расширение, и браузер будет его загружать после каждого перезапуска.
  1. Перейдите в домашний каталог , а после в каталог, содержащий профиль Firefox, с которым вы собираетесь работать (например, Firefox/Profiles/Default/).
  2. Перейдите в каталог extensions/ , если его не существует, то создайте.
  3. Создайте текстовый файл и поместите в него полный путь к каталогу с вашим расширением (например, C:\extensions\my_extension\ или ~/extensions/my_extension/). Пользователи Windows должны помнить о направлении слешей, обязательно добавьте закрывающий слеш и удалите все замыкающие пробелы.
  4. Сохраните файл с id расширения в качестве его имени (например, [email protected]). Без расширения файла.
Теперь все готово к тестированию.

Запустите Firefox. Firefox по текстовой ссылке сам найдет каталог с вашим расширением и установит его. После запуска браузера вы увидите надпись «Hello, World!» в правой части строки состояния.

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


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

Вы можете сделать некоторые изменения в.xul-файле, перезапустить Firefox, и сразу же увидите результат.

Создание пакета

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

Запакуйте архиватором zip содержимое каталога с вашим расширением (не сам каталог расширения) и измените расширение архива с.zip на.xpi.

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

Вкладка «Стиль дерева». Чувствуйте себя более комфортно с иерархической системой дерева для ваших вкладок? Вкладка «Дерево стиля» выполняет только это, помещая вкладки на боковой панели и прикрепляя новые вкладки к каждому дереву, когда вы следуете ссылкам со страницы на страницу. Это отличное дополнение для дизайнеров, которым нужно посмотреть, как структурирован сайт, который они хотят дублировать, или для тех, кто просматривает сайт, который они разработали, чтобы увидеть, как он протекает.

Если вы являетесь счастливым обладателем "Extension Builder"-а, то он может сам сделать за вас всю грязную работу (Tools -> Extension Developer -> Extension Builder). Просто перейдите в каталог с вашим расширением и нажмите кнопку Build Extension. Это расширение имеет очень много инструментов облегчающих разработку.

Теперь загрузите получившийся.xpi-файл на ваш сервер и удостоверьтесь, что его тип установлен в application/x-xpinstall . После этого можно скачать и установить расширение.

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

Дублируемая вкладка. Блоггеры, вероятно, будут любить это расширение, которое позволит вам дублировать вкладку, что идеально подходит, когда вам нужно искать старые сообщения, чтобы вы могли обращать внимание на себя. Вы также можете объединить несколько окон, вывести вкладку в новое окно и многое другое.

Метки: Добавить метки

Этот краткий курс касается построения простейшего расширения для Firefox, которое будет добавлять в строку статуса надпись "Hello, World!" .

Что нужно знать для начала работы

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

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



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

Создание проекта расширения

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

/myExtension: /install.rdf /components/* /defaults/ /defaults/preferences/*.js /plugins/* /chrome.manifest /chrome/icons/default/* /chrome/ /chrome/content/

Впрочем, в вашем расширении необязательно должны быть все эти папки. Сейчас мы создадим схожий каркас для нашего расширения. Для начала создадим папку для его хранения (напр. C:\extensions\my_extension\ для Windows или ~/extensions/my_extension/ для Unix/Linux). Эта папка будет корневой. Создайте в ней подпапку chrome, а в последней - папку content.

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

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

Теперь создайте в корневой папке 2 пустых файла: chrome.manifest и install.rdf.

Итак, сейчас мы имеем такую структуру расширения:

/ install.rdf chrome.manifest chrome/ content/

Для облегчения дальнейшей разработки и тестирования рекомендуем настроить Firefox для разработки расширения .

Создание скрипта ("манифеста") установки

В нашем случае мы добавим новый элемент в строку статуса. В файле browser.xul можно найти узел с id="status-bar" . Это и есть строка статуса. В этом узле есть несколько дочерних узлов. Добавим к ним наш, который будет описывать новую панель. Создайте файл, назовите его, скажем, sample.xul и поместите в папку chrome/content . Внесите туда такой код:

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

Вы можете в любой момент восстановить вкладки в активную область, восстановить до 20 недавно закрытых вкладок, отметить вкладки разных цветов и многое другое.

Автопереключение вкладок - это дополнение добавляет новый выбор в меню «Инструменты», которое позволяет вам установить временной интервал, который ваши вкладки автоматически изменят для вас. Отличная идея для временного заставки.

Здесь с id="status-bar" является "точкой склейки" (merge point), т.е. узлом, который мы намереваемся изменить. - новый виджет, который мы добавляем в .

URI Chrome

XUL-файлы (вроде того, который мы только что создали) загружаются через URI протокола chrome://. Вместо того, чтобы каждый раз определять место установки Firefox"а и загружать файлы через file:// , можно загружать их через chrome:// , не беспокоясь об их истинном положении на диске.

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

URI хрома состоит из нескольких частей:

  • протокол chrome говорит, что необходимо классифицировать и обработать содежимое файла как хром.
  • название пакета (в данном случае, это browser), указывающий на "сверток" (bundle) компонентов интерфейса. Это название уникально для каждого приложения/расширения.
  • тип запрашиваемых данных. Есть три типа: content (XUL, JavaScript, XBL Bindings и др., т.е. компоненты, формирующие вид и поведение интерфейса), locale (DTD, файлы propeties и т.п., производящие локализацию интерфейса) и skin (CSS и изображения для формирования темы интерфейса).
  • файл для загрузки.

Откройте chrome.manifest , созданный нами ранее и добавьте в него следующее:

Content sample chrome/content/

Не забудьте завершающий слеш.

Эта строка объявляет

  1. тип данных в пакете chrome,
  2. название пакета (используйте лишь строчные буквы),
  3. путь к файлам пакета.

Таким образом, здесь мы говорим, что файлы типа content для пакета sample можно найти в chrome/content (путь относительно местоположения chrome.manifest).

Сохраните файл. Позже, при запуске Firefox, пакет chrome вашего расширения будет зарегистрирован с помощью этого файла.

Регистрация оверлея

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

Overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul

Это говорит Firefox"у, что нужно объединить sample.xul и browser.xul

Тестирование

Для начала необходимо уведомить Firefox о нашем расширении. Раньше (еще во времена Firefox 1.0) необходимо было упаковать расширение как en:XPI и установить через интерфейс браузера. Теперь же достаточно просто указать Firefox"у, где находится папка с вашим расширением - и он будет подключать его каждый раз при загрузке.

Итак, ваши действия:

  1. Найдите папку с вашим профилем. Если вы не создавали его специально, браузер использует профиль по умолчанию.
    Как найти папку с профилем.
  2. Откройте папку extensions . Если ее нет, создайте ее.
  3. Создайте новый текстовый файл и поместите в него лишь путь к вашему расширению (напр., C:\extensions\my_extension\ для Windows или ~/extensions/my_extension/ для Unix/Linux). Сохраните файл под именем, одинаковым с id вашего расширения.

Примечания:

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

Теперь вы готовы к тестированию вашего расширения. Запустите Firefox. Он увидит ссылку к вашему расширению и установит его. Если все прошло успешно, вы увидите надпись "Hello, World!" в строке статуса справа. Для внесения изменений достаточно править xul -файлы и перезапустить Firefox.

Упаковка расширения

Теперь можно упаковать расширение для его дальнейшего распространиения и установки.

Создайте zip-архив из содержания корневой папки вашего расширения (но не архивируйте саму папку). Переименуйте файл, чтобы он имел расширение ".xpi" . Вот и все. Для установки достаточно перетащить файл на окно браузера.

Установка с веб-страницы

Есть несколько способов это сделать. Можно разместить прямую ссылку на xpi -файл. Однако предпочтительным является InstallTrigger method , как более удобный для пользователей.

Сайт расширений addons.mozilla.org

Локализация

Для поддержки более чем одного языка необходимо отделить локализуемые строки от основного содержания с помощью сущностей (entities) и "свертков строк" (string bundles). Гораздо проще делать это в течение разработки расширения, чем после.

Информация о локализации хранится в подпапке locale папки chrome (т.е. рядос с папкой content). В этой папке необходимо разместить столько папок, сколько локализаций вы намерены сделать. Обычной практикой является называть папки стандартными названиями локалей: скажем, папку с английской локализацией - en-US , русской - ru-RU и т.п., что, впрочем, не является обязательным. Теперь создайте в каждой из папок файл somename.ent (или anothername.dtd) (имя одинаково во всех папках локализаций ) и заполните его соответствующим образом (показано ниже).

Локализуем наше расширение на русский и английский языки. После создания 2 папок (назовем их ru-RU и en-US), создаем в каждой из них файл (пусть myStatusBar.ent) Поместите в тот файл, который в папке с английской локализацией, следующую строку:

А в тот, который будет локализовать на русский язык, соответственно

Сохраните оба файла. Теперь необходимо зарегистрировать локализации. Для этого добавим в chrome.manifest следующие строки:

Locale sample en-US chrome/locale/en-US/ locale sample ru-RU chrome/locale/ru-RU/

Теперь для использования локализации достаточно добавить в начало (однако после xml -объявления) xul -файла строку

chrome://sample/locale/myStatusBar.ent ">

где window - это названия корневого элемента xul -документа (в нашем случае это overlay).

Для использования сущностей измените ваш xul -файл так, чтобы атрибут label у новой statusbarpanel был равен "&statusbarpanel.label;" .

Была ли эта статья полезной?

Да Нет