如何开发Chrome扩展在Word Online中正确插入/编辑段落？

问题背景 #

开发Chrome扩展时，直接通过HTML DOM操作在OneDrive Word网页版插入/编辑段落，会出现内容点击后消失或无法保存的问题。原代码通过克隆DOM元素实现复制，但未同步到Word内部数据模型。

问题根源 #

Word网页版的编辑器基于自研富文本引擎，DOM仅作为渲染视图层。直接修改DOM元素不会同步到编辑器内部的数据模型，当编辑器重新渲染（如点击其他区域）时，未同步的DOM修改会被覆盖，导致内容丢失。

可行解决方案 #

方案一：使用Office JavaScript API（官方推荐）

微软提供了Office.js用于操作Office网页版文档，这是最稳定、可靠的方式，能直接与Word内部数据模型交互。

1. 动态加载Office.js

function loadOfficeJS() {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = 'https://appsforoffice.microsoft.com/lib/1/hosted/office.js';
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

let officeInitialized = false;

loadOfficeJS().then(() => {
  Office.initialize = function(reason) {
    officeInitialized = true;
    console.log('Office JS 初始化完成');
  };
});

2. 插入段落的核心代码

function insertParagraph(text) {
  return Word.run(function(context) {
    const body = context.document.body;
    // 在文档末尾插入新段落，也可指定其他插入位置（如光标处）
    body.insertParagraph(text, Word.InsertLocation.end);
    return context.sync();
  });
}

3. 修改后的content_script.js

function loadOfficeJS() {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = 'https://appsforoffice.microsoft.com/lib/1/hosted/office.js';
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

let officeInitialized = false;

loadOfficeJS().then(() => {
  Office.initialize = function(reason) {
    officeInitialized = true;
    console.log('Office JS 初始化完成');
  };
});

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  console.log(sender.tab ? `来自内容脚本: ${sender.tab.url}` : '来自扩展');

  if (request.method === "getSelection") {
    sendResponse({data: window.getSelection().toString()});
  } else if (request.method === "insertParagraph") {
    if (!officeInitialized) {
      sendResponse({error: "Office JS 尚未初始化"});
      return;
    }
    insertParagraph('新插入的段落内容')
      .then(() => sendResponse({success: true}))
      .catch(error => {
        console.error(error);
        sendResponse({error: error.message});
      });
    // 标记为异步响应
    return true;
  } else {
    sendResponse({});
  }
});

方案二：模拟用户输入（无依赖备选方案）

若无法依赖Office.js，可通过模拟用户键盘输入让Word编辑器识别为合法输入，自动同步到内部数据模型。

function simulateTextInput(text) {
  // 获取Word网页版的可编辑区域（需根据实际DOM结构调整选择器）
  const editor = document.querySelector('[contenteditable="true"]');
  if (!editor) return;

  editor.focus();

  // 逐字符模拟输入
  text.split('').forEach(char => {
    editor.dispatchEvent(new KeyboardEvent('keydown', { key: char }));
    editor.dispatchEvent(new InputEvent('input', { data: char }));
    editor.dispatchEvent(new KeyboardEvent('keyup', { key: char }));
  });

  // 模拟Enter键插入新段落
  editor.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
  editor.dispatchEvent(new InputEvent('input'));
  editor.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
}

注意事项 #

• Word网页版的DOM结构可能随版本更新变化，需定期验证选择器有效性
• 模拟输入方式仅适合简单文本，复杂格式内容建议使用Office.js
• 使用Office.js需确保文档处于编辑状态，否则API调用会失败

内容的提问来源于stack exchange，提问作者Alvin Tamaarsa