javascript - 在给定开始和结束索引的情况下突出显示 Google Doc（画布渲染）上的文本

Question

我正在开发一个适用于 Google Docs 的 chrome 扩展。

Google Doc 上的每个字符都与一个索引相关联（从 0 开始）。

我需要能够突出显示 Google Doc 上的文本 - 给定开始索引和结束索引。例如 - 开始：10，结束：25 - 突出显示索引 10 到 25 中的文本。

谷歌目前正在使用基于 HTML 的渲染 - 并为此实施了解决方案。每个 div、span 标签都被解析了——我能够构建索引和 DOM 节点的映射——我用来突出显示特定的 DOM 节点。

现在，谷歌正在转向基于 Canvas 的渲染。整个可编辑的“页面”是一个元素。 https://workspaceupdates.googleblog.com/2021/05/Google-Docs-Canvas-Based-Rendering-Update.html

我想为画布呈现的 Google Doc 实现相同的功能。

尝试的方法：

1. 我可以获得 CanvasRenderingContext 的句柄 - 并在画布上绘制“矩形”。这需要非常准确的 x、y、高度和宽度信息。我无法准确计算 x、y、高度和宽度——因为这依赖于太多因素，如线宽、字体大小等。

有没有更好的方法来解决这个问题/或解决这个问题？非常感谢任何帮助或输入，谢谢。

注意：我知道 Google 提供 App Script 服务和 Google docs update API，使用它们我基本上可以实现这一点。但这会在 Google 文档上创建“修订”，这对用户来说是不可接受的。

标签： javascriptgoogle-chrome-extensiongoogle-docs