Как получить выделенный текст в Документах Google с помощью JavaScript?

Я создаю расширение Chrome для Документов Google и пытаюсь получить выделенный текст из текущего редактируемого документа:

Однако, когда я пытаюсь запустить этот код, он возвращает пустую строку ' ':

const docsFrame = document.getElementsByClassName('docs-texteventtarget-iframe')[0]
docsFrame.contentDocument.getSelection().toString()

Была библиотека под названием Google Docs Utils, которая раньше могла это делать, но с тех пор, как Docs перешли на рендеринг на основе Canvas, библиотека больше не работает.

Обновлено:

Вот пример Google Docs для проверки

РЕДАКТИРОВАТЬ № 2:

Сделал некоторый прогресс, нашел эту тему с множеством потенциальных решений: https://github.com/Amaimersion/google-docs-utils/issues/10

Дайте ссылку с документом и текстом для выбора и получения.

oleedd 05.01.2023 15:27

@oleedd docs.google.com/document/d/…

Tejas Sharma 05.01.2023 15:58

О, кажется, только в <canvas>. Это не текст, а графика. getSelection() работает только для текстовых узлов (что вы можете найти с помощью ctrl+f в консоли). Изучите методы холста.

oleedd 05.01.2023 16:19

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

Tejas Sharma 05.01.2023 16:59
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
94
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Самый простой способ сделать это — использовать скрипт надстройки Google.

Вы попадете в интерфейс Google App Scripts, который дает вам доступ к API-интерфейсам холста Google Doc, позволяя вам делать именно то, что вы в настоящее время изо всех сил пытаетесь сделать.

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

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

Спасибо, посмотрю. Я создаю проект, который должен работать на нескольких сайтах, а не только в Документах Google, но, поскольку Документы являются основной платформой, я хотел бы, чтобы мое расширение работало и здесь. Grammarly и Wordtune каким-то образом это делают, поэтому должен быть способ

Tejas Sharma 05.01.2023 16:59

Это справедливое замечание. Я давно не писал расширения для Google, поэтому мне нужно будет посмотреть, какая литература преобладает для использования API-интерфейсов холста документов Google внутри расширения.

egremont of yorke 05.01.2023 21:56

Да, я пытаюсь найти способы соединить их, а также ищу способ сделать это без надстройки (и добился определенного прогресса).

Tejas Sharma 05.01.2023 23:09
Ответ принят как подходящий

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

  1. Включить функцию чтения с экрана / чтение SVG. Google добавит элементы svg и rect в ".kix-canvas-tile-selection", которые содержат введенный текст. Посмотрите вторую половину этой темы, чтобы найти различные решения для включения этого.

  2. Используйте $(".kix-page-paginated").get(), чтобы получить текущую страницу в Документах Google. Затем используйте вычисления $(window).height(), чтобы выяснить, на какой странице в данный момент находится пользователь.

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

     function getSelectedLineOfText(page) {
       const overlaps = (a, b) => a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top
       const selectionRects = $(".kix-canvas-tile-selection > svg > rect", page).get()
         .map(el => el.getBoundingClientRect())
       // Using text elements on that page and the selection rects, find the actual selected line of text.
       const textElements $("svg > g[role=paragraph] > rect", page).get(); 
    

Примечание: как видно из имени функции, это может получить только всю выделенную строку в файле. Он не может выделить конкретный текст в строке.

Итак, здесь: «Меня зовут Боб. Привет, меня зовут Боб. Привет, меня зовут Боб». будет возвращен. Я изо всех сил пытался получить более конкретную информацию, поэтому, если у кого-то есть подсказка, не стесняйтесь добавлять/создавать еще один ответ.

Другие вопросы по теме