Electron WebView调用executeJavaScript报错：对象无法克隆

报错原因 #

1. 跨进程序列化限制：Electron的webview.executeJavaScript在访客进程和主渲染进程间传递数据时，使用的是结构化克隆算法——这个算法比JSON严格得多，不仅DOM对象、函数无法传递，就连带特殊编码的大字符串、带隐藏属性的普通对象都可能触发克隆失败。
2. 代码逻辑的致命问题：你原代码里在then回调中创建的Document是Obsidian插件进程的DOM对象，这类对象完全不在结构化克隆的支持范围内，哪怕前面的executeJavaScript返回数据正常，后续返回这个DOM对象也会导致报错。
3. 函数转字符串的潜在坑：用箭头函数的toString()生成执行代码，在部分Electron版本中可能生成不符合预期的语法，导致执行返回的结果异常。

可行解决办法 #

方案一：在webview内完成所有DOM处理（推荐） #

既然DOM对象无法跨进程传递，索性把readability的解析逻辑直接放在webview里执行，只返回纯文本/JSON数据：

export default class BrowserView extends ItemView {
    private webview: WebviewTag;

    private async convertWebpageToNote() {
        // 直接在webview内执行DOM解析和readability处理
        const noteData = await this.webview.executeJavaScript(`
            // 确保readability已在webview环境中可用（可通过preload注入）
            const article = new Readability(window.document).parse();
            // 只返回纯序列化数据
            return {
                title: article.title,
                content: article.content,
                text: article.textContent,
                excerpt: article.excerpt
            };
        `);

        // 这里拿到的是纯JSON对象，直接在Obsidian里做笔记处理
        console.log(noteData);
        // 后续：将内容插入Obsidian笔记
    }
}

方案二：用JSON序列化绕过克隆限制 #

如果必须在主进程处理DOM，先把webview里的数据转成JSON字符串传递，主进程再解析：

private async convertWebpageToNote() {
    // 在webview内把数据转成JSON字符串
    const rawJson = await this.webview.executeJavaScript(`
        const pageData = {
            title: window.document.title,
            source: window.document.querySelector(":root")?.outerHTML || ""
        };
        return JSON.stringify(pageData);
    `);

    // 主进程解析字符串为对象
    const { title, source } = JSON.parse(rawJson);

    // 在主进程创建DOM并处理
    const doc = window.document.implementation.createHTMLDocument(title);
    // 注意：replaceWith需要节点，这里用innerHTML赋值更稳妥
    doc.documentElement.innerHTML = source;

    // 用readability解析这个本地DOM
    const article = new Readability(doc).parse();
    // 后续笔记处理逻辑
}

额外注意事项 #

• 不要用函数toString()生成executeJavaScript的执行代码，直接写字符串形式的JS，避免语法意外。
• 如果webview里没有readability，可以通过preload脚本提前注入，或者在执行代码里动态加载库（比如通过fetch获取脚本后执行）。

内容的提问来源于stack exchange，提问作者J-Cake