Документы Google - доступ к текстовым изменениям в реальном времени

Цель

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

Наше решение

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

Это работает

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

Проблема

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

Боковая панель опроса каждые x миллисекунд наш скрипт Google Apps работает в облаке Google
Наш скрипт Google Apps, запущенный в облаке Google, затем обращается к синхронизированному документу в облаке
Если он найдет какие-либо изменения, он отправит их обратно на боковую панель
Боковая панель воспроизводит аудио, используя тег HTML5 Audio и наш текст в речь.

Требуется секунда или больше с момента ввода пользователем текста в документах Google до момента, когда изменение синхронизируется в облаке Google Docs.

Мы приурочили различные шаги. Текст в речь быстро, и звук HTML5 тоже не проблема.

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

Вопрос

Можем ли мы быстрее получить доступ к тексту в Документах Google? Может быть, вместо того, чтобы проходить через облако Google?

UPDATE 2017-02-15 Похоже, что в настоящее время это невозможно. Возможно сделать это с помощью расширения Chrome, он анализирует главную страницу Документов Google и извлекает текст из HTML + JS. Это довольно сложно, но... возможно.

Ответ 1

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

// This div contains all of the page content and not much else, in my rudimentary testing.
var pageRoot = document.getElementsByClassName('kix-appview-editor')[0].firstChild;

var observer = new MutationObserver(handleNewChanges);
observer.observe(pageRoot, {
  subtree: true,
  childList: true,
  attributes: false,
});

// Later, you can stop observing
observer.disconnect();

Функция handleNewChanges будет вызываться в любое время, когда изменяется содержимое DOM, со списком изменений. Изменения довольно грязные, но

несущественные изменения (например, пользователь, выбирающий какой-либо текст) могут быть отфильтрованы, просмотрев добавленные и удаленные узлы,
вы можете подойти к дереву DOM, чтобы найти местоположение изменений в документе, и
вы можете использовать someNode.innerText чтобы получить фактический контент.

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

Это кажется хорошим подспорьем для вашего случая использования, потому что

Никаких удаленных серверов не требуется. Поток данных будет больше похож на это полностью на вкладке браузера:
```
---------------                   ----------        
| Google Docs | <=  fetch doc  <= |  Your  |
|  Document   | => DOM changes => | Module |
---------------                   ----------
```
Обновления синхронизируются с визуально обновляемым документом, который кажется естественным, чтобы вызвать это.
Объем бухгалтерского учета, который необходимо выполнить для анализа каждого изменения DOM, вероятно, может быть постоянным (то есть без перебора содержимого документа). Это будет означать, что накладные расходы, которые добавляет наблюдатель, являются постоянными, поэтому он должен масштабироваться до любого размера документа.

Ответ 2

Как вы поняли, расширение для браузера является хорошим решением, и это может быть проще, чем вы думаете: API расширений Chrome хорошо документирован, а создание расширения очень похоже на создание веб-страницы с HTML и Javascript.

Там даже API расширения для TTS, который может интегрироваться с пользовательскими двигателями TTS:

Используйте API-интерфейс chrome.ttsEngine для реализации движка Text-to-speech (TTS) с использованием расширения. Если ваше расширение регистрируется с использованием этого API, оно получит события, содержащие высказывание, которое будет произноситься, и другие параметры, если какое-либо расширение или приложение Chrome использует API tts для генерации речи. Затем ваше расширение может использовать любую доступную веб-технологию для синтеза и вывода речи и отправки событий обратно вызывающей функции, чтобы сообщить о статусе.