Grammarly/LanguageTool类扩展在Google Docs的实现原理技术问询

核心实现逻辑 #

Google Docs虽以Canvas渲染内容，但页面底层暴露了可被前端脚本调用的内部接口，无需依赖Google App Script即可实现功能：

• 文本内容与选区获取：
  Google Docs会在内存中维护文档的结构化文本数据，可通过逆向工程找到全局对象（如window.google下的文档实例），获取实时文本、光标位置及选区信息。也可监听页面内部的文本变更事件，同步捕获内容更新。

• 错误标记叠加：
  Google Docs为辅助无障碍功能，会在Canvas下方生成对应文本块的隐藏DOM节点。可通过这些节点的位置信息计算Canvas对应坐标，再在页面顶层DOM中注入自定义叠加元素（如红色波浪线、提示弹窗），实现和常规网页一致的标记效果。

• 工具栏自定义项添加：
  Google Docs的工具栏是常规DOM结构，直接通过DOM操作定位工具栏容器，插入匹配原生样式的自定义按钮/菜单元素，绑定点击事件触发扩展功能即可。无需依赖App Script的菜单API。

注意事项 #

• 内部无公开文档的API可能随Google Docs版本更新变动，需定期调试适配。
• 注入的DOM元素需设置合适的z-index，避免遮挡原生控件；同时监听页面动态更新（如文档切换、工具栏重构），及时重新注入元素。
• Chrome扩展需申请https://docs.google.com/*的主机权限，确保脚本能在Google Docs页面运行。

内容的提问来源于stack exchange，提问作者eli chin