如何使用 JavaScript 獲取 Google Docs 中的選定文本？

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 的 canvas API，從而使您能夠准確地完成您目前正在努力做的事情。

那么您的挑戰可能是調和這樣一個事實，即 Google Extension 商店/市場是與 Google 附加組件/Workspace 市場不同的實體。

就個人而言，我認為您應該全力以赴編寫 Google 附加組件 go。 讓生活比編寫 Chrome 擴展程序更簡單。

Answer 2

我想出了如何在我上面提到的線程的幫助下並通過研究一些開源代碼來完成它。 我不確定我是否可以在這里發布開源代碼並避免許可沖突，我將在這里發布我發現的一般步驟：

1. 啟用屏幕閱讀器功能/SVG 閱讀。 Google 將向".kix-canvas-tile-selection"添加 svg 和 rect 元素，其中包含輸入的文本。查看此線程的后半部分以獲取啟用此功能的不同解決方案。

2. 使用$(".kix-page-paginated").get()獲取 Google Docs 上的當前頁面。 然后使用 $(window).height() 計算找出用戶當前所在的頁面。

3. 完成以上兩項后，您可以像下面這樣使用 function 來獲取文本行

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

注意：從 function 名稱可以看出，這只能獲取文件中的整個選定行。 它無法獲取一行中選定的特定文本。

所以在這里，“我叫鮑勃。嗨，我叫鮑勃。嗨，我叫鮑勃。” 將被退回。 我一直在努力獲得比這更具體的信息，所以如果有人有線索，請隨時添加/創建另一個答案。