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

Введение

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

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

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

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

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

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

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

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

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

Пример: <icon>http://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=http://example.com/default.aspx?sel={selection}&src=IE8>

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

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

Пример: <previewaction="http://example.com/default.aspx?sel={selection}&src=IE8">

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

Переменные

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

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

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

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

<executeaction="http://www.example.com/script.aspx?foo=bar">

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

<execute action="http://www.example.com/script.aspx">
<parameter name="foo" value="bar" />
</execute>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Закодированные символы
  Первая ошибка имеет непосредственное отношение к XML. При прохождении строк запросов, очень часто в составных аргументах используется символ амперсанда. К сожалению, это зарезервированный символ в XML, но используя его в качестве литерала в строке запроса может привести к ошибке. Вместо этого следует заменить его на"&", например, так:

  <executeaction="http://www.microsoft.com/testscript.aspx?foo=test&bar=test">

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

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

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

• Пустое содержимое - что произойдет, если вашей службе будет передано пустое сообщение? Предусмотрено ли у вас для этого подходящее сообщение?
  
• Многострочное содержимое - умеет ли ваша служба обрабатывает переносы строк? Вы должны удостовериться в том, что служба правильно обрабатывает символ возврата каретки ("%0d%0a" в URL) и заменить его на подходящий символ, к примеру, на пробел.
  
• Скрипт - иногда выбранный пользователем фрагмент может быть связан со сценарием JavaScript. Если вы выбрали HTML, ваша служба должна отфильтровать этот сценарий на сервере из соображений безопасности.
  
• Большое выделение - ускорители ограничивают запросы GET 2048 символами. Поэтому если вы желаете, чтобы ваш ускоритель мог работать с большими объемами данных, вам следует обратить свое внимание на использование POST.

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

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

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