在Tauri应用中实现页面跳转后的JavaScript CSS/元素操控

核心原因 #

Tauri的initialization_script仅在初始页面加载时执行一次，跳转至外部网站（如web.whatsapp.com）后，新页面的上下文会完全重置，原有脚本不会自动注入。此外，若Svelte集成webview时未配置正确的权限与注入逻辑，也无法实现跨页面生效。

可行解决方案 #

1. 用WebviewBuilder配置全局脚本注入（推荐） #

在Tauri主进程中，针对目标webview配置inject_js，确保每次页面导航后都自动注入脚本：

use tauri::{Manager, WebviewBuilder};

fn main() {
  tauri::Builder::default()
    .setup(|app| {
      let window = app.get_window("main").unwrap();
      // 创建webview并配置脚本注入规则
      let _webview = WebviewBuilder::new(window)
        // 注入自定义脚本，每次页面加载完成后执行
        .inject_js(include_str!("./inject.js"))
        // 允许导航到目标网站
        .allow_navigation("https://web.whatsapp.com/*")
        .build()?;
      Ok(())
    })
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

对应的inject.js脚本（放在项目src目录下）：

// 监听页面加载完成事件，确保跳转后仍能触发逻辑
document.addEventListener('DOMContentLoaded', () => {
  // 示例：修改WhatsApp页面CSS
  const customStyle = document.createElement('style');
  customStyle.textContent = `
    ._2vbn4 { display: none !important; } /* 隐藏指定元素 */
    body { background-color: #f5f5f5 !important; }
  `;
  document.head.appendChild(customStyle);

  // 示例：操控页面元素
  setTimeout(() => {
    const searchBar = document.querySelector('div[contenteditable="true"]');
    if (searchBar) {
      searchBar.textContent = "自定义搜索内容";
    }
  }, 3000);
});

2. 配置tauri.conf.json实现全局脚本注入 #

在tauri.conf.json中设置webview的权限与初始化脚本，同时开启对应权限：

{
  "tauri": {
    "allowlist": {
      "webview": {
        "all": true
      },
      "window": {
        "all": true
      }
    },
    "webview": {
      "initialization_script": "document.addEventListener('DOMContentLoaded', () => { /* 你的DOM/CSS操控逻辑 */ });",
      "allow_navigation": ["https://web.whatsapp.com/*"],
      "csp": "default-src 'self' https://web.whatsapp.com; script-src 'self' 'unsafe-inline' 'unsafe-eval';"
    }
  }
}

注意：脚本必须通过DOMContentLoaded事件包裹，避免页面未加载完成就执行逻辑。

3. 用IPC通信触发页面操控逻辑 #

通过主进程发送指令，灵活控制页面脚本执行时机：

• 主进程（Rust）：

// 在页面跳转完成后发送指令
window.emit("trigger-dom-manipulation", ()).unwrap();

• 注入脚本（inject.js）：

window.addEventListener('message', (event) => {
  if (event.data.type === 'trigger-dom-manipulation') {
    // 执行DOM/CSS操控
    document.body.style.border = "2px solid #ccc";
  }
});

关键注意事项 #

• 必须配置allow_navigation允许跳转至目标网站，否则Tauri会拦截导航请求。
• 外部网站可能存在CSP限制，需在tauri.conf.json的webview.csp中添加允许脚本注入的规则。
• 避免直接在初始页面的window.onload中写逻辑，跳转后该上下文会被销毁。

内容的提问来源于stack exchange，提问作者Asaf Hekimoğlu