如何通过Chrome扩展内容脚本在Google Docs中实时实现快捷词替换？

嘿，我来帮你搞定这个在Google Docs里实时替换快捷词的需求！你已经注意到Google Docs用了特殊的iframe来处理输入事件，这确实是关键——普通内容脚本没法直接监听主页面的输入，得先把脚本注入到那个docs-texteventtarget-iframe里才行。下面是具体的实现思路和步骤：

1. 配置扩展Manifest，让脚本进入目标iframe #

首先在你的manifest.json里，要确保内容脚本能覆盖Google Docs的iframe。把content_scripts配置成这样：

{
  "content_scripts": [
    {
      "matches": ["https://docs.google.com/document/*"],
      "js": ["docs-shortcut-replacer.js"],
      "all_frames": true,
      "run_at": "document_idle"
    }
  ]
}

all_frames: true是核心，它会让脚本注入到页面的所有iframe里，包括那个处理输入的docs-texteventtarget-iframe。

2. 在iframe里监听输入事件 #

进入iframe后，你需要监听输入相关的事件。Google Docs的输入处理比较特殊，input事件或者keyup事件都可以，但input事件更适合实时触发。不过要注意不要监听太频繁，避免性能问题：

// docs-shortcut-replacer.js
document.addEventListener('input', handleInput, { passive: true });

function handleInput() {
  // 这里写检测和替换逻辑
}

3. 检测当前输入的快捷词 #

接下来要获取光标附近的文本，判断是否匹配你的快捷词（比如..n1）。因为Google Docs是富文本编辑器，不能直接用普通input的value，得用选区API来获取当前位置的文本：

function getCurrentWord() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return '';
  
  const range = selection.getRangeAt(0);
  // 扩展选区到当前单词/快捷词的范围
  const startRange = range.cloneRange();
  startRange.collapse(true);
  // 向前查找，直到遇到非字符（比如空格、标点）
  while (startRange.startOffset > 0) {
    const prevChar = startRange.startContainer.textContent[startRange.startOffset - 1];
    if (!prevChar.match(/[\w\.]/)) break; // 这里根据你的快捷词规则调整匹配正则
    startRange.setStart(startRange.startContainer, startRange.startOffset - 1);
  }
  
  return startRange.toString();
}

然后在handleInput里调用这个函数，判断是否匹配你的快捷词：

const shortcuts = {
  '..n1': '你的替换内容1',
  '..n2': '你的替换内容2'
};

function handleInput() {
  const currentWord = getCurrentWord();
  if (shortcuts[currentWord]) {
    replaceShortcut(currentWord, shortcuts[currentWord]);
  }
}

4. 执行文本替换并调整光标位置 #

替换的时候，要用Google Docs兼容的方式，比如document.execCommand('insertText')，这样能确保替换后的内容格式正确，光标位置也正常：

function replaceShortcut(shortcut, replacement) {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  
  const range = selection.getRangeAt(0);
  // 选中整个快捷词
  const startOffset = range.startOffset - shortcut.length;
  range.setStart(range.startContainer, startOffset);
  range.deleteContents();
  
  // 插入替换内容
  document.execCommand('insertText', false, replacement);
  
  // 调整光标到替换内容的末尾
  const newRange = document.createRange();
  newRange.setStart(range.startContainer, startOffset + replacement.length);
  newRange.collapse(true);
  selection.removeAllRanges();
  selection.addRange(newRange);
}

5. 避免和Google Docs的内部API冲突 #

你提到的那些自动保存和辅助写作API，其实不用太担心——只要我们用标准的DOM操作和execCommand，Google Docs会把这次替换当成正常的用户输入，触发正常的保存流程，不会有冲突。不过如果遇到频繁触发的问题，可以加个防抖函数：

const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

// 把handleInput换成防抖后的版本
document.addEventListener('input', debounce(handleInput, 100), { passive: true });

最后要注意，Google Docs的DOM结构可能会更新，如果发现脚本突然失效，记得检查iframe的类名或者选择器有没有变化，及时调整脚本逻辑。

备注：内容来源于stack exchange，提问作者Adnan Saleem