Chrome扩展如何获取与控制台相同的运行时环境以访问editor对象？

Chrome扩展的内容脚本运行在独立的隔离上下文，和页面自身的JavaScript环境完全分隔，所以直接在content.js里调用页面的editor对象会触发ReferenceError。要获取和开发者控制台相同的运行时环境，需要通过向页面注入脚本的方式实现：

方法一：直接注入执行代码 #

在content.js中创建script标签，将需要访问editor的代码写入并插入到页面DOM，这段代码会运行在页面上下文里：

// content.js
function runInPageContext() {
  const script = document.createElement('script');
  script.textContent = `
    // 这里直接编写访问editor的逻辑，和控制台执行代码一致
    console.log('页面中的editor对象:', editor);
    // 示例：调用Monaco Editor的方法
    // editor.setValue('通过Chrome扩展修改内容');
  `;
  document.head.appendChild(script);
  script.remove(); // 执行后可移除脚本标签
}

runInPageContext();

方法二：内容脚本与页面上下文通信 #

如果需要在内容脚本和页面上下文之间传递数据，可以通过自定义事件实现双向通信：

1. 注入脚本获取editor数据并发送事件：

// content.js中注入的脚本内容
const script = document.createElement('script');
script.textContent = `
  // 获取editor数据
  const editorContent = editor.getValue();
  // 向内容脚本发送自定义事件
  window.dispatchEvent(new CustomEvent('getEditorContent', { detail: editorContent }));
`;
document.head.appendChild(script);
script.remove();

2. 在content.js中监听事件接收数据：

// content.js
window.addEventListener('getEditorContent', (event) => {
  console.log('从页面拿到的编辑器内容:', event.detail);
  // 这里可以处理拿到的editor数据
});

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