[BUG] 顶级窗口改变存储值，iframe窗口会存在获取不到变更后值的情况

[xFeny]

问题描述

在 https://nkvod.me/play/132836-5-1.html 网站上刷新(F5)页面后，顶级窗口GM_setValue后，iframe 使用 GM_getValue 会发生获取不到变更后的值的情况。

重现步骤

// ==UserScript==
// @name         iframe窗口获取变更后的存储值
// @namespace    https://docs.scriptcat.org/
// @version      0.1.0
// @description  顶级窗口改变存储值，iframe窗口会获取不到变更后的值
// @author       You
// @grant        GM_addValueChangeListener
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_log
// @match        *://*/*
// @run-at       document-end
// ==/UserScript==

(function () {
    'use strict';

    const KEY = "TEST_VALUE_CHANGE";
    const isTopWin = () => window.top === window.self;

    // iframe 获取改变后的值，正常应该全部次数都弹，实际只会弹3-4次
    GM_addValueChangeListener(KEY, (_, oldValue, newValue) => {
        if (!isTopWin()) alert('iframe 窗口：' + JSON.stringify({ oldValue, newValue, host: location.host }))
    });

    // 顶级窗口改变值
    if (isTopWin()) {
        for (let i = 1; i < 10; i++) {
            setTimeout(() => GM_setValue(KEY, `测试数据${Date.now()}`), i * 1000)
        }
    }

})();

脚本猫版本

v1.2.0

操作系统以及浏览器信息

Win10 Chrome 142.0.7444.176

补充信息 (选填)

No response

[CodFrm]

又是一个怪问题，不知道干了什么，储存脚本记录的数据在一次报错后没了，换成Object存储，Object变成了{}

我弄错了，看起来是后面的chang没有到达inject，后面打的是content环境的日志，不知道为什么后续inject收不到valueChange

[cyfung1031]

@CodFrm 我的环境测试不到 nkvod.me
你看看用 #950 的代码跑会否解决问题

还有 如果不用 alert, 改为 console.log, 会否不一样？

[CodFrm]

@CodFrm 我的环境测试不到 nkvod.me 你看看用 #950 的代码跑会否解决问题

还有 如果不用 alert, 改为 console.log, 会否不一样？

是其它的问题，消息到了 content 后，没有转发到inject，还在看什么原因

scriptcat/src/app/service/content/content.ts

Line 36 in 95fd247

this.extServer.on("runtime/valueUpdate", (data) => {

[CodFrm]

@CodFrm 我的环境测试不到 nkvod.me 你看看用 #950 的代码跑会否解决问题

还有 如果不用 alert, 改为 console.log, 会否不一样？

在这个iframe里的网站运行也有问题，😭研究半天了，还是没有头绪，他这有代码混淆

https://gg.xn--it-if7c19g5s4bps5c.com/nkvod2.php?url=nanke_bVk4MzRuMEdNVW1CN1hxb2Znd1RWZFNHZ21sQUxLaDgrN2pORGxTeXcyRE9WeWRmTjFUZ2JCUTJGSkxWWHIyTw==&next=https://nkvod.me/play/132836-5-2.html&title=%E7%94%B5%E8%A7%86%E5%89%A7%E3%80%8A%E6%8A%98%E8%85%B0%E3%80%8B%E7%AC%AC1%E9%9B%86%E5%9C%A8%E7%BA%BF%E8%A7%82%E7%9C%8B

// ==UserScript==
// @name         iframe窗口获取变更后的存储值
// @namespace    https://docs.scriptcat.org/
// @version      0.1.0
// @description  顶级窗口改变存储值，iframe窗口会获取不到变更后的值
// @author       You
// @grant        GM_addValueChangeListener
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_log
// @match        *://*/*
// @run-at       document-end
// ==/UserScript==

(function () {
    'use strict';

    const KEY = "TEST_VALUE_CHANGE";

    GM_log("script start");
    console.log('123');
    // iframe 获取改变后的值，正常应该全部次数都弹，实际只会弹3-4次
    GM_addValueChangeListener(KEY, (_, oldValue, newValue) => {
        GM_log('value change', "info", { oldValue, newValue, host: location.host });
    });

    for (let i = 1; i < 1000; i++) {
        setTimeout(() => {
            GM_log("set value");
            GM_setValue(KEY, `测试数据 ${Date.now()} i=${i}`)
        }, i * 1000)
    }
})();

[cyfung1031]

@CodFrm 我的环境测试不到 nkvod.me 你看看用 #950 的代码跑会否解决问题
还有 如果不用 alert, 改为 console.log, 会否不一样？

在这个iframe里的网站运行也有问题，😭研究半天了，还是没有头绪，他这有代码混淆

https://gg.xn--it-if7c19g5s4bps5c.com/nkvod2.php?url=nanke_bVk4MzRuMEdNVW1CN1hxb2Znd1RWZFNHZ21sQUxLaDgrN2pORGxTeXcyRE9WeWRmTjFUZ2JCUTJGSkxWWHIyTw==&next=https://nkvod.me/play/132836-5-2.html&title=%E7%94%B5%E8%A7%86%E5%89%A7%E3%80%8A%E6%8A%98%E8%85%B0%E3%80%8B%E7%AC%AC1%E9%9B%86%E5%9C%A8%E7%BA%BF%E8%A7%82%E7%9C%8B

// ==UserScript==
// @name iframe窗口获取变更后的存储值
// @namespace https://docs.scriptcat.org/
// @Version 0.1.0
// @description 顶级窗口改变存储值，iframe窗口会获取不到变更后的值
// @author You
// @grant GM_addValueChangeListener
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_log
// @match :///*
// @run-at document-end
// ==/UserScript==

(function () {
'use strict';

const KEY = "TEST_VALUE_CHANGE";

GM_log("script start");
console.log('123');
// iframe 获取改变后的值，正常应该全部次数都弹，实际只会弹3-4次
GM_addValueChangeListener(KEY, (_, oldValue, newValue) => {
    GM_log('value change', "info", { oldValue, newValue, host: location.host });
});

for (let i = 1; i < 1000; i++) {
    setTimeout(() => {
        GM_log("set value");
        GM_setValue(KEY, `测试数据 ${Date.now()} i=${i}`)
    }, i * 1000)
}

})();

只有在特定网站发生？

[CodFrm]

@CodFrm 我的环境测试不到 nkvod.me 你看看用 #950 的代码跑会否解决问题
还有 如果不用 alert, 改为 console.log, 会否不一样？

在这个iframe里的网站运行也有问题，😭研究半天了，还是没有头绪，他这有代码混淆
https://gg.xn--it-if7c19g5s4bps5c.com/nkvod2.php?url=nanke_bVk4MzRuMEdNVW1CN1hxb2Znd1RWZFNHZ21sQUxLaDgrN2pORGxTeXcyRE9WeWRmTjFUZ2JCUTJGSkxWWHIyTw==&next=https://nkvod.me/play/132836-5-2.html&title=%E7%94%B5%E8%A7%86%E5%89%A7%E3%80%8A%E6%8A%98%E8%85%B0%E3%80%8B%E7%AC%AC1%E9%9B%86%E5%9C%A8%E7%BA%BF%E8%A7%82%E7%9C%8B
// ==UserScript==
// @name iframe窗口获取变更后的存储值
// @namespace https://docs.scriptcat.org/
// @Version 0.1.0
// @description 顶级窗口改变存储值，iframe窗口会获取不到变更后的值
// @author You
// @grant GM_addValueChangeListener
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_log
// @match :///*
// @run-at document-end
// ==/UserScript==
(function () {
'use strict';

const KEY = "TEST_VALUE_CHANGE";

GM_log("script start");
console.log('123');
// iframe 获取改变后的值，正常应该全部次数都弹，实际只会弹3-4次
GM_addValueChangeListener(KEY, (_, oldValue, newValue) => {
    GM_log('value change', "info", { oldValue, newValue, host: location.host });
});

for (let i = 1; i < 1000; i++) {
    setTimeout(() => {
        GM_log("set value");
        GM_setValue(KEY, `测试数据 ${Date.now()} i=${i}`)
    }, i * 1000)
}

})();

只有在特定网站发生？

是的，目前只发现在这个网站上有问题，表现形式为 window.addEventListener 监听的事件没了，可以重新监听又恢复

[cyfung1031]

@CodFrm 我的环境测试不到 nkvod.me 你看看用 #950 的代码跑会否解决问题
还有 如果不用 alert, 改为 console.log, 会否不一样？

在这个iframe里的网站运行也有问题，😭研究半天了，还是没有头绪，他这有代码混淆
https://gg.xn--it-if7c19g5s4bps5c.com/nkvod2.php?url=nanke_bVk4MzRuMEdNVW1CN1hxb2Znd1RWZFNHZ21sQUxLaDgrN2pORGxTeXcyRE9WeWRmTjFUZ2JCUTJGSkxWWHIyTw==&next=https://nkvod.me/play/132836-5-2.html&title=%E7%94%B5%E8%A7%86%E5%89%A7%E3%80%8A%E6%8A%98%E8%85%B0%E3%80%8B%E7%AC%AC1%E9%9B%86%E5%9C%A8%E7%BA%BF%E8%A7%82%E7%9C%8B
// ==UserScript==
// @name iframe窗口获取变更后的存储值
// @namespace https://docs.scriptcat.org/
// @Version 0.1.0
// @description 顶级窗口改变存储值，iframe窗口会获取不到变更后的值
// @author You
// @grant GM_addValueChangeListener
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_log
// @match :///*
// @run-at document-end
// ==/UserScript==
(function () {
'use strict';

const KEY = "TEST_VALUE_CHANGE";

GM_log("script start");
console.log('123');
// iframe 获取改变后的值，正常应该全部次数都弹，实际只会弹3-4次
GM_addValueChangeListener(KEY, (_, oldValue, newValue) => {
    GM_log('value change', "info", { oldValue, newValue, host: location.host });
});

for (let i = 1; i < 1000; i++) {
    setTimeout(() => {
        GM_log("set value");
        GM_setValue(KEY, `测试数据 ${Date.now()} i=${i}`)
    }, i * 1000)
}

})();

只有在特定网站发生？

是的，目前只发现在这个网站上有问题，表现形式为 window.addEventListener 监听的事件没了，可以重新监听又恢复

要不要改用 document.addEventListener ?

[CodFrm]

document.addEventListener 我记得是有问题的，之前有段时间用的 document.addEventListener

---

刚刚换了 document.addEventListener 一样的不行

[CodFrm]

一个可直接复现的脚本，在下面这个网站上 window.addEventListener 监听的事件没了，重新监听又可以恢复：

https://gg.xn--it-if7c19g5s4bps5c.com/nkvod2.php?url=nanke_bVk4MzRuMEdNVW1CN1hxb2Znd1RWZFNHZ21sQUxLaDgrN2pORGxTeXcyRE9WeWRmTjFUZ2JCUTJGSkxWWHIyTw==&next=https://nkvod.me/play/132836-5-2.html&title=%E7%94%B5%E8%A7%86%E5%89%A7%E3%80%8A%E6%8A%98%E8%85%B0%E3%80%8B%E7%AC%AC1%E9%9B%86%E5%9C%A8%E7%BA%BF%E8%A7%82%E7%9C%8B

// ==UserScript==
// @name         iframe窗口获取变更后的存储值
// @namespace    https://docs.scriptcat.org/
// @version      0.1.0
// @description  顶级窗口改变存储值，iframe窗口会获取不到变更后的值
// @author       You
// @grant        GM_addValueChangeListener
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_log
// @match        *://*/*
// @run-at       document-start
// ==/UserScript==

(function () {
    'use strict';

    let logger = console.log.bind(console)
    logger("script start");

    window.addEventListener("test-event", () => {
        logger('test-event');
    });

    for (let i = 1; i < 1000; i++) {
        setTimeout(() => {
            logger("set value");
            window.dispatchEvent(new CustomEvent('test-event', {
                detail: { obj: 123 },
            }));
        }, i * 1000);
    }

})();

[cyfung1031]

document.addEventListener 我记得是有问题的，之前有段时间用的 document.addEventListener

刚刚换了 document.addEventListener 一样的不行

改用 document.addEventListener(eventType, callback, {capture: true}) 看看？

[CodFrm]

document.addEventListener 我记得是有问题的，之前有段时间用的 document.addEventListener
刚刚换了 document.addEventListener 一样的不行

改用 document.addEventListener(eventType, callback, {capture: true}) 看看？

一样的 logger('test-event'); 在这个网站，依旧没有打印，relisten 后可以

// ==UserScript==
// @name         iframe窗口获取变更后的存储值
// @namespace    https://docs.scriptcat.org/
// @version      0.1.0
// @description  顶级窗口改变存储值，iframe窗口会获取不到变更后的值
// @author       You
// @grant        GM_addValueChangeListener
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_log
// @match        *://*/*
// @run-at       document-start
// @grant        unsafeWindow
// ==/UserScript==

(function () {
    'use strict';

    let logger = console.log.bind(console)
    logger("script start");

    document.addEventListener("test-event", () => {
        logger('test-event');
    });

    for (let i = 1; i < 1000; i++) {
        setTimeout(() => {
            logger("set value");
            document.dispatchEvent(new CustomEvent('test-event', {
                detail: { obj: 123 },
            }), { capture: true });
        }, i * 1000);
    }

    unsafeWindow.relisten = () => {
        document.addEventListener("test-event", () => {
            logger('test-event');
        });
    }

})();

[CodFrm]

我发现了一个方式，使用 document.write() / document.open() 后会导致这个问题

---

PS：验证了一下，这个网站确实是因为调用了 document.open 和 document.write 导致的这个问题

[CodFrm]

使用 MutationObserver 监听判断 html被删除来实现重新监听，不知道有没有更好的方案：

// ==UserScript==
// @name         iframe窗口获取变更后的存储值
// @namespace    https://docs.scriptcat.org/
// @version      0.1.0
// @description  顶级窗口改变存储值，iframe窗口会获取不到变更后的值
// @author       You
// @match        *://*/*
// @run-at       document-start
// @early-start
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    let logger = console.log.bind(console)
    logger("script start", window.addEventListener, window.removeEventListener);
    let lastDocumentElement = document.documentElement;
    const observer = new MutationObserver((mutations) => {
        logger(document.readyState,)
        mutations.forEach((mutation) => {
            mutation.removedNodes.forEach(node => {
                if (node === lastDocumentElement) {
                    logger('html被删除', node, lastDocumentElement, document.documentElement);
                    window.relisten();
                    lastDocumentElement = document.documentElement;
                }
            })
        });
    });

    observer.observe(document, {
        childList: true,      // 监听子节点变化
    });

    window.addEventListener("test-event", () => {
        logger('test-event');
    });

    for (let i = 1; i < 1000; i++) {
        setTimeout(() => {
            logger("set value");
            window.dispatchEvent(new CustomEvent('test-event', {
                detail: { obj: 123 },
            }));
        }, i * 1000);
    }

    window.relisten = () => {
        window.addEventListener("test-event", () => {
            logger('test-event');
        });
    }

})();