Share via


Руководство по созданию ускорителя для IE8

Введение

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

Я работал над функцией ускорителей некоторое время назад, поэтому у меня скопился ряд полезных советов и рекомендаций, которые помогли бы более эффективно создавать ускорители. Есть также несколько ошибок, которые я видел (и с которыми сталкивался!) много раз, поэтому расскажу о них с целью сделать процесс создания ускорителя проще.

Создание ускорителя

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

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

Вот, что необходимо предпринять:

1. Для начала выберите <homepageUrl> для вашего ускорителя. Это важное поле – все другие URL в манифесте должны соответствовать этому домену. Вообще говоря, для этой цели лучше выбрать домен верхнего уровня.

Пример: <homepageUrl>https://www.example.com</homepageUrl>

2. Введите абсолютный путь к значку favicon внутри поля <icon>. Здесь есть маленькая хитрость: щелкните правой кнопкой мыши на странице службы, выберите пункт «Просмотреть исходный код» и найдите файл с расширением .ico.

Пример: <icon>https://www.example.com/favicon.ico</icon>

3. Под полем <display> введите в поле <name> описание службы в пределах 50 символов. Мы рекомендуем, чтобы в описание была включена категория ускорителя, вслед за которым идет имя провайдера службы.

<display>

<name>Act with Example.com</name>

</display>

4. Выберите атрибут «category» для поля <activity>. Категориям посвящена отдельная статья, но в данном случае мы рекомендуем выбирать из следующих категорий:

  • Blog – служба блогов, позволяющая создавать новое сообщение в блоге на базе ссылки или выбранного фрагмента текста
  • Bookmark – служба, добавляющая ссылку в список избранного
  • Define – служба, дающая определения выделенным на странице словам
  • Email – служба, позволяющая создать новое электронное сообщение
  • Find – служба, осуществляющая поиск связанного контента в пределах сайта
  • Map – служба, выводящая местонахождение на карте на базе выделенного пользователем адреса
  • Send – служба, конвертирующая веб-данные в данные приложения
  • Share – служба, позволяющая открыть общий доступ к ссылке (с дополнительными комментариями) сообществу или целой сети
  • Translate – служба для перевода текущей страницы или выделенного фрагмента текста с одного языка на другой

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

5. Выберите, с какими значениями должен оперировать ускоритель – «selection», «link», и/или «document» – и затем добавьте их в качестве атрибутов к одному или многим элементам <ActivityAction>.

К примеру: <activityAction context=«selection»> … </activityAction>

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

6. Далее заполните атрибут «action» элемента <execute> URL-адресом службы, которую вы хотите использовать. Для того, чтобы передать данные вашей службе, смотрите раздел про переменные.

Пример: <execute action=«https://example.com/default.aspx?sel={selection}&amp;src=IE8»>

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

Вы можете добавить окно предварительного просмотра через элемент <preview>. Я написал фрагмент кода окна с предварительным просмотром ниже.

Пример: <previewaction=«https://example.com/default.aspx?sel={selection}&amp;src=IE8»>

В последующих разделах приведена более подробная информация вышесказанного.

Переменные

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

  • {selection} – выделение пользователем внутри страницы. Доступен только в контесте выделенного фрагмента.
  • {documentUrl} – URL веб-страницы, откуда вызывается ускоритель
  • {documentTitle} – представляет заголовок веб-страницы, откуда вызывается ускоритель
  • {link} – URL страницы, выбранной пользователем
  • {linkText} – текст выбранной пользователем URL-страницы.

С полным списком переменных можно ознакомиться здесь.

Существует два метода передачи этих переменных службе через ускоритель. Первый метод осуществляется через строку запроса:

<executeaction=«https://www.example.com/script.aspx?foo=bar»>

Второй – через один или более тегов <parameter>:

<execute action=«https://www.example.com/script.aspx»>

<parameter name=«foo» value=«bar» />

</execute>

Обратите внимание, что использование элемента <parameter> является единственным способом вставить данные в тело HTTP-запроса. Также можно использовать POST с параметрами в строке запроса, но любые параметры, которые вы передаете, отобразятся в URL. Вы можете определить GET или POST-запрос через атрибут «method» элемента <activityAction>.

Добавление функции предварительного просмотра

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

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

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

К примеру, ускоритель BingMaps отображает местоположение выбранного адреса с помощью собственного UI, масштабируемого до размера 320x240:

<preview method=«get» action=«https://www.bing.com/maps/geotager.aspx»>

<parameter name=«b» value="{selection}" />

<parameter name=«clean» value=«true» />

<parameter name=«w» value=«320» />

<parameter name=«h» value=«240» />

<parameter name=«client» value=«ie» />

<parameter name=«format» value=«full» />

</preview>

 

Обратите внимание, что вы можете передать переменные окну предварительного просмотра тем же самым путем, что и при запуске. Так, например, ускоритель выше использует параметр {selection}.

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

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

Тестирование ускорителя

Как только вы завершили создание ускорителя, самое время его протестировать. Для этой цели есть Javascript API. Нижеприведенный код создаст ссылку, вызывающую диалог установки ускорителя:

Код:

<a href=«javascript:window.external.addService(‘myAccelerator.xml’)">Install me</a>

Чтобы все это заработало, вам понадобится рабочий веб-сервер, иначе попытка открыть ссылку со страницы на вашем жестком диске приведет к ошибке. Можно использовать любой локальный сервер, например сервер ASP.NET из Visual Studio.

Если попытка запуска прошла успешно, вы увидите диалог установки ускорителя. В обратном случае вы увидите примерно следующее:

clip_image001

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

Закодированные символы

Первая ошибка имеет непосредственное отношение к XML. При прохождении строк запросов, очень часто в составных аргументах используется символ амперсанда. К сожалению, это зарезервированный символ в XML, но использование его в качестве литерала в строке запроса может привести к ошибке. Его следует заменить на«&amp;», например, так:

<executeaction=«https://www.microsoft.com/testscript.aspx?foo=test&amp;bar=test»>

Соответствие доменному требованию

Вторая ошибка связана с тегом <homepageUrl>. Чтобы должным образом определить службу, требуется, чтобы ссылки, определенные в <homepageUrl>, атрибут действия <execute>, и атрибут действия <preview> – все находились в одном и том же домене. Если это не происходит, появляется ошибка.

Тестовые случаи

После того, как вы установили ускоритель, есть несколько сценариев, в которых желательно протестировать ускоритель, поскольку они часто являются причиной сбоев в работе существующих ускорителей:

· Пустое содержимое – что произойдет, если вашей службе будет передано пустое сообщение? Предусмотрено ли у вас для этого подходящее сообщение?

· Многострочное содержимое – умеет ли ваша служба обрабатывает переносы строк? Вы должны удостовериться в том, что служба правильно обрабатывает символ возврата каретки ("%0d%0a» в URL) и заменить его на подходящий символ, к примеру, на пробел.

· Скрипт – иногда выбранный пользователем фрагмент может быть связан со сценарием JavaScript. Если вы выбрали HTML, ваша служба должна отфильтровать этот сценарий на сервере из соображений безопасности.

· Большое выделение – ускорители ограничивают запросы GET 2048 символами. Поэтому если вы желаете, чтобы ваш ускоритель мог работать с большими объемами данных, вам следует обратить свое внимание на использование POST.

Последующие шаги и заключение

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

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

Джон Сейтел (Jon Seitel),

программный менеджер IE