获取选定的文本

Question

我正在为 Google Docs 构建 Chrome 扩展，并且我正在尝试从当前正在编辑的文档中获取所选文本：

但是，当我尝试运行此代码时，它返回一个空字符串 ' ':

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

Answer 1

最直接的方法是使用 Google 附加脚本。

您将进入 Google App Scripts 界面，该界面使您可以访问 Google Doc 的画布 API，从而使您能够准确地完成当前正在努力完成的事情。

您面临的挑战可能是协调 Google 扩展商店/市场是与 Google 附加组件/工作空间市场不同的实体这一事实。

就我个人而言，我认为你应该全力以赴地编写 Google 插件。让生活比编写 Chrome 扩展更简单。

Answer 2

我在上面提到的线程的帮助下并通过研究一些开源代码弄清楚了如何完成它。我不确定是否允许我在这里发布开源代码，为了避免许可冲突，我将在这里发布我发现的一般步骤：

1. 启用屏幕阅读器功能/SVG 阅读。 Google 将向

   ".kix-canvas-tile-selection"

   添加 svg 和 rect 元素，其中包含输入的文本。请参阅 this thread 的后半部分，了解启用此功能的不同解决方案。

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(); 
   

注意：从函数名称可以看出，这只能获取文件中的整个选定行。它无法获取行内选定的特定文本。

所以在这里，“名字是鲍勃。嗨，我的名字是鲍勃。嗨，我的名字是鲍勃。”将被退回。我一直在努力获得比这更具体的信息，所以如果有人有线索，请随时添加/创建另一个答案。