Руководство по созданию ускорителя для 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}&src=IE8»>
7. Окна предварительного просмотра – отличный способ вывода результата работы ускорителя пользователю, также это отличный способ перейти на домашнюю страницу службы.
Вы можете добавить окно предварительного просмотра через элемент <preview>. Я написал фрагмент кода окна с предварительным просмотром ниже.
Пример: <previewaction=«https://example.com/default.aspx?sel={selection}&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.
Если попытка запуска прошла успешно, вы увидите диалог установки ускорителя. В обратном случае вы увидите примерно следующее:
Независимо от того, когда я вижу данный диалог, есть несколько ошибок, которые могут вызвать его появление.
Закодированные символы
Первая ошибка имеет непосредственное отношение к XML. При прохождении строк запросов, очень часто в составных аргументах используется символ амперсанда. К сожалению, это зарезервированный символ в XML, но использование его в качестве литерала в строке запроса может привести к ошибке. Его следует заменить на«&», например, так:
<executeaction=«https://www.microsoft.com/testscript.aspx?foo=test&bar=test»>
Соответствие доменному требованию
Вторая ошибка связана с тегом <homepageUrl>. Чтобы должным образом определить службу, требуется, чтобы ссылки, определенные в <homepageUrl>, атрибут действия <execute>, и атрибут действия <preview> – все находились в одном и том же домене. Если это не происходит, появляется ошибка.
Тестовые случаи
После того, как вы установили ускоритель, есть несколько сценариев, в которых желательно протестировать ускоритель, поскольку они часто являются причиной сбоев в работе существующих ускорителей:
· Пустое содержимое – что произойдет, если вашей службе будет передано пустое сообщение? Предусмотрено ли у вас для этого подходящее сообщение?
· Многострочное содержимое – умеет ли ваша служба обрабатывает переносы строк? Вы должны удостовериться в том, что служба правильно обрабатывает символ возврата каретки ("%0d%0a» в URL) и заменить его на подходящий символ, к примеру, на пробел.
· Скрипт – иногда выбранный пользователем фрагмент может быть связан со сценарием JavaScript. Если вы выбрали HTML, ваша служба должна отфильтровать этот сценарий на сервере из соображений безопасности.
· Большое выделение – ускорители ограничивают запросы GET 2048 символами. Поэтому если вы желаете, чтобы ваш ускоритель мог работать с большими объемами данных, вам следует обратить свое внимание на использование POST.
Последующие шаги и заключение
Как только вы создали классный ускоритель, вы можете загрузить его в галерею дополнений IE. Это отличный способ продемонстрировать свои успехи и привлечь внимание общественности к ускорителю.
Я надеюсь, что данная статья поможет вам в создании ускорителей. Если у вас есть какие-нибудь вопросы по статье или мысли об ускорителях вообще, оставляйте свои комментарии.
Джон Сейтел (Jon Seitel),
программный менеджер IE