Electron中监听页面内容变化应使用何种事件？

你遇到的问题是因为web-contents-created仅在新的WebContents实例创建时触发（比如窗口初始化、打开新窗口/开发者工具），同一个窗口内的页面跳转不会生成新的WebContents，所以不会触发该事件。针对不同的场景，你需要使用以下对应的事件：

1. 监听跨页面导航（跳转到新网页） #

使用WebContents的did-navigate事件，当窗口完成导航到新页面（包括点击链接跳转）时触发：

const { app, BrowserWindow } = require('electron');

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow();
  mainWindow.loadURL('https://example.com');

  mainWindow.webContents.on('did-navigate', (event, url) => {
    console.log(`已导航到新页面：${url}`);
    // 此处处理页面跳转后的内容逻辑
  });
});

2. 监听页面内导航（如Hash变化） #

如果是单页应用内的路由切换（不刷新页面），使用did-navigate-in-page事件：

mainWindow.webContents.on('did-navigate-in-page', (event, url, isMainFrame) => {
  if (isMainFrame) {
    console.log(`页面内导航到：${url}`);
  }
});

3. 监听页面DOM加载完成（内容就绪） #

若需要在页面DOM完全加载后执行逻辑，使用dom-ready事件，每次页面（包括跳转后的页面）加载完成都会触发：

mainWindow.webContents.on('dom-ready', () => {
  console.log('当前页面DOM已加载完成');
  // 可在此注入脚本或操作页面内容
});

4. 监听页面内容动态变化（如单页应用内容更新） #

如果是页面DOM元素动态增减/修改（无导航行为），Electron主进程没有直接对应的事件，需要在渲染进程中使用MutationObserver监听DOM变化：

// 渲染进程代码
const target = document.body;
const observerConfig = { 
  attributes: true, 
  childList: true, 
  subtree: true // 监听所有子节点变化
};

const mutationCallback = (mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      console.log('页面内容有元素新增/移除');
    } else if (mutation.type === 'attributes') {
      console.log(`元素属性${mutation.attributeName}发生变化`);
    }
  });
};

const observer = new MutationObserver(mutationCallback);
observer.observe(target, observerConfig);

// 停止监听时调用：observer.disconnect();

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