Материал: Браузерное расширение для визуализации грамматики

Для удобства привязки URL аудиофайлов, учитывая эту особенность, был использован механизм AngularJS, называемый фильтрами. Фильтры позволяют форматировать значение привязываемого выражения в шаблонах, контроллерах и сервисах. Был разработан фильтр, который явно указывает SCE, что URL аудио безопасен для привязки в данном контексте (рис. 34).

Рис. 34. Фильтр URL аудио и его использование в HTML шаблоне.

Скрипт фоновой страницы

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

Исходный код скрипта поделен на 4 “сервиса” - класса, отвечающих за различные задачи, стоящие перед данным компонентом. Схема связей между этими классами показана на рис. 35.- отвечает за вызов серверных методов AWS Lambda;- отвечает за различные функции, связанные со списками слов;- отвечает за задачи по авторизации пользователя;- занимается задачами, связанными с отображением важных слов на странице.

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

Скрипт фоновой страницы так же отслеживает три вида событий, происходящих в ходе работы браузера:- отслеживает сообщения, присылаемыми скрипту другими компонентами расширения (интерфейсом и скриптом содержимого страницы) и при необходимости, отправляет ответ;- используется в авторизации для инициализации процесса: слушатель вызывает процесс авторизации при появлении у одной из вкладок ссылки вида ...facebook.com/connect/login_success.html, что свидетельствует об успешном получении кода авторизации от социальной сети Facebook;- отслеживает событие клика по пункту “подсветить важные слова” контекстного меню на просматриваемой странице и вызывает соответствующий метод сервиса importantSvc.

С помощью API Message Passing скриптом фоновой страницы отслеживаются сообщения следующей структуры JSON: в ключе intent содержится требуемое действие, в ключе word - слово, с которым требуется произвести это действие. Далее следует перечисление типов действий, отслеживаемых скриптом:- принимает от скрипта содержимого страницы слово, получает от сервера перевод слова и дополнительные данные, добавляет слово в список просмотренных вызывая метод сервиса wordSvc и отправляет данные обратно в скрипт содержимого страницы для отображения;- вызывает соответствующий метод сервиса wordSvc, добавляя слово в список добавленных на изучение слов.

Доступ к истории просмотренных пользователем страниц сервисом importantSvc для отправки этой истории для дальнейшей обработки на сервер осуществляется с помощью API History [46] браузера Google Chrome. Метод chrome.history.search, принимая на вход текстовую строку для поиска по истории (в нашем случае - пустую строку для получения всей истории), возвращает страницы, просмотренные пользователем (рис. 36).

Рис. 36.Получение истории просмотренных страниц и отправка их на сервер.

Одним из основных процессов, осуществляемых скриптом фоновой страницы, является процесс авторизации. За организацию процесса авторизации отвечает сервис authSvc. При получении кода пользователя от Facebook сервис получает токен пользователя от Facebook, получает токен разработчика от getDeveloperIdentityToken и сохраняет его в localStorage для дальнейшего использования.

Так как AWS Cognito не сохраняет данные пользователя при перезапуске расширения, необходимо каждый раз проводить инициализацию. Для этого токен, сохраненный на предыдущем шаге, отправляется функции getIdentityInfo, чтобы получить IdentityId и OpenId токен Cognito. Далее эти данные передаются SDK Cognito путем установки объекта AWS.config.credentials, после чего вызывается метод refresh этого объекта для получения соответствующих прав доступа (рис. 37). [33]

Рис. 37. Получение данных от getIdentityInfo и передача данных Cognito.

При вызове данного процесса в момент первичной авторизации пользователя, по завершению процесса происходит вызов метода teachTfIdf сервиса importantSvc для передачи истории просмотренных страниц пользователя на сервер, а так же метода getAddedWords сервиса wordSvc для получения с сервера истории просмотренных пользователем слов.

Общая схема процесса авторизации организованного на клиенте выглядит следующим образом (рис. 38):

Рис. 38. Общая схема процесса авторизации.

Тестирование разработанного программного обеспечения

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

Просмотр перевода и дополнительной информации о слове по двойному клику на слово (рис. 39);

Рис. 39. Просмотр информации о слове на странице.

Добавление слова на изучение;

Проверка наличия добавленного слова в списках просмотренных и добавленных слов (рис. 40);

Рис. 40. История просмотренных слов.

Авторизация пользователя через Facebook (рис. 41);

Рис. 41. Совпадение идентификатора авторизованного пользователя в расширении с идентификатором этого же пользователя в базе данных.

Восстановление истории просмотренных пользователем слов;

Подсветка важных слов на странице (рис. 42).

Рис. 42. Подсветка важных слов на странице

По результатам ручного тестирования приложение показало полную и корректную работоспособность всего заявленного функционала.

Заключение

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

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

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

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

В качестве направлений дальнейшей работы можно выделить следующие:

Увеличение скорости работы системы;

Покрытие системы автоматическим тестированием для улучшения стабильности работы;

Улучшение качества перевода слов и предоставляемого контента;

Усовершенствование алгоритма выделения важных слов на странице путем улучшения качества собираемого по истории просмотренных страниц пользователя референсного корпуса, а так же использования и совмещения других метрик странности слова;

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

Список использованной литературы

Lingualeo - английский язык онлайн. URL: <https://lingualeo.com/ru/browserapps> (дата обращения 20.05.2016)

Лео-переводчик. URL: <https://lingualeo.com/ru/browserapps> (дата обращения 18.05.2016)

Azab, M., Hokamp, C., Mihalcea, R. Using Word Semantics To Assist English as a Second Language Learners. // Proceedings of NAACL-HLT. 2015. С. 116-120

Trusty, A., Truong, K. N. Augmenting the web for second language vocabulary learning. // Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. 2014. С. 3179-3188

Kovacs, G. Multimedia for language learning.Massachusetts Institute of Technology, 2013

Client/Server Architecture. URL: <https://docs.oracle.com/cd/A57673_01/DOC/server/doc/SCN73/ch20.htm> (датаобращения14.05.2016)M, Powell J. Single Page Web Applications. Manning publications, 2013.

Cloud Computing. URL: <https://en.wikipedia.org/wiki/Cloud_computing> (дата обращения 15.05.2016)

Monolithic Architecture pattern. URL: <#"896481.files/image046.jpg">

Рис. 43. Листинг файла manifest.json (часть 1)

Рис. 40. Рис. 44. Листинг файла manifest.json (часть 2).

Приложение 2. Листинги файлов с исходным кодом, реализующим браузерное расширение

Рис. 45. Листинг файла background.js (часть 1).

Рис. 46. Листинг файла background.js (часть 2).

          Рис. 47. Листинг файла background.js (часть 3).

Рис. 48. Листинг файла background.js (часть 4).

Рис. 49. Листинг файла background.js (часть 5).

Рис. 50. Листинг файла background.js (часть 6).

Рис. 51. Листинг файла background.js (часть 7).

Рис. 52. Листинг файла background.js (часть 8).

Рис. 53. Листинг файла contenscript.js (часть 1).

Рис. 54. Листинг файла contenscript.js (часть 2).

Рис. 55. Листинг файла popup.js.

Рис. 56. Листинг файлаcontext.html.

Рис. 57. Листинг файлаpopup.html (часть 1).

Рис. 58. Листинг файлаpopup.html (часть 2).

Рис. 59. Листинг файлаmain.css (часть 1).

Рис. 60. Листинг файлаmain.css (часть 2).

Рис. 61. Листинг файлаmain.css (часть 3).

Приложение 3. Листинги файлов с исходным кодом, реализующим серверную часть

Рис. 62. Листинг функцииaddWord (часть 1).

Рис. 63. Листинг функции addWord (часть 2).

Рис. 64. Листинг функции get Added Words (часть 1).

Рис. 65. Листинг функции get AddedWords (часть 2).

Рис. 66. Листинг функции get ImportantWords (часть 1).

Рис. 67. Листинг функции get Important Words (часть 2).

Рис. 68. Листинг функции teach TfIdf (часть 1).

Рис. 69. Листинг функции teach TfIdf (часть 2).

Рис. 70. Листинг функции teach TfIdf (часть 3).