如何通过Chrome扩展程序编辑CKEditor 5的内容？

Chrome扩展的内容脚本和页面主脚本作用域隔离，所以直接拿不到CKEditor的editor实例，核心解决思路是向页面注入可访问全局作用域的脚本，再通过消息通信让注入的脚本调用CKEditor的官方API修改内容。

方法一：注入页面脚本+消息通信 #

这是最可靠的方案，利用页面脚本能访问全局CKEditor实例的特性，配合postMessage实现内容脚本和页面脚本的通信：

步骤1：内容脚本中注入页面脚本 #

内容脚本负责创建并注入一个运行在页面主作用域的脚本，该脚本会监听来自内容脚本的编辑指令：

// 内容脚本代码
function injectCKEditorScript() {
  const script = document.createElement('script');
  script.textContent = `
    // 页面脚本：监听编辑指令
    window.addEventListener('message', (event) => {
      if (event.source !== window || event.data.type !== 'UPDATE_CKEDITOR') return;
      
      // 获取CKEditor实例的两种常见方式
      let editor;
      // 方式A：通过编辑器容器的data-editor-id属性（CKEditor 5默认会加这个属性）
      const editorContainer = document.querySelector('.ck-editor[data-editor-id="${event.data.editorId}"]');
      if (editorContainer) {
        editor = CKEDITOR.instances[editorContainer.dataset.editorId];
      }
      // 方式B：如果页面把实例挂载到全局变量（比如部分自定义项目）
      // editor = window.myCKEditorInstance;

      if (editor) {
        // 用setData设置HTML内容，setText设置纯文本，按需选择
        editor.setData(event.data.content);
        // editor.setText(event.data.content);
      }
    });
  `;
  document.head.appendChild(script);
  script.remove(); // 注入后清理DOM
}

// 页面加载时注入脚本
injectCKEditorScript();

步骤2：内容脚本发送编辑指令 #

找到目标CKEditor的容器元素，获取其data-editor-id，再通过postMessage发送内容更新指令：

// 内容脚本：发送更新请求
function updateCKEditor(editorSelector, newContent) {
  const editorContainer = document.querySelector(editorSelector);
  if (!editorContainer) return;
  
  const editorId = editorContainer.dataset.editorId;
  window.postMessage({
    type: 'UPDATE_CKEDITOR',
    editorId: editorId,
    content: newContent
  }, '*');
}

// 示例：替换页面中第一个CKEditor的内容
updateCKEditor('.ck-editor:first-of-type', '修正拼写错误后的内容');

注意事项 #

• 确保CKEditor已初始化：可以通过轮询检查CKEDITOR.instances是否存在目标实例，或者监听页面自定义的ckeditor-ready事件（部分项目会触发）。
• 适配不同CKEditor配置：有些项目会自定义实例存储方式，需要根据目标页面的实际情况调整获取editor实例的代码。
• 扩展权限：在manifest.json中确保已配置目标网站的匹配规则，比如"matches": ["https://目标网站/*"]。

内容的提问来源于stack exchange，提问作者Vincent Erb