如何在Electron应用中监听URL变化、获取URL并触发自定义模态框？

要实现监听URL变化并在特定URL弹出提示的功能，你可以借助Electron的webContents事件和dialog模块完成，以下是修改后的完整代码：

首先，确保引入dialog模块：

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

然后修改createWindow函数，添加URL监听与检测逻辑：

function createWindow () {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 1030,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加载初始页面
  mainWindow.loadURL('http://localhost:3000');
  mainWindow.setMenuBarVisibility(false);

  // 定义URL检测与提示函数
  const checkAndShowPrompt = () => {
    const currentUrl = mainWindow.webContents.getURL();
    try {
      const urlObj = new URL(currentUrl);
      // 精准匹配域名www.google.com
      if (urlObj.hostname === 'www.google.com') {
        dialog.showMessageBox(mainWindow, {
          type: 'info',
          title: '提示',
          message: '请在此搜索',
          modal: true
        });
      }
    } catch (err) {
      console.error('解析URL失败:', err);
    }
  };

  // 监听页面首次加载完成（检测初始URL）
  mainWindow.webContents.on('did-finish-load', checkAndShowPrompt);

  // 监听页面跳转事件（处理跨页面URL变化）
  mainWindow.webContents.on('did-navigate', checkAndShowPrompt);

  // 监听页面内导航事件（处理SPA路由等JS修改URL的情况）
  mainWindow.webContents.on('did-navigate-in-page', checkAndShowPrompt);
}

// 以下部分保持原代码逻辑不变
app.whenReady().then(() => {
  createWindow()
  
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

关键说明： #

• URL匹配逻辑：通过URL对象解析域名，确保不受HTTP/HTTPS协议前缀影响，精准匹配www.google.com。
• 事件覆盖场景：三个事件分别覆盖页面首次加载、跨页面跳转、页面内URL修改三种场景，确保所有URL变化都能被检测到。
• 模态弹窗：使用dialog.showMessageBox创建的弹窗为模态，用户必须处理提示后才能继续操作应用。

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