修复document.write导致消息监听重置的问题 by CodFrm · Pull Request #1055 · scriptscat/scriptcat

CodFrm · 2025-12-05T06:45:19Z

概述 Descriptions

变更内容 Changes

截图 Screenshots

Copilot

Pull request overview

此 PR 修复了 document.write 导致消息监听器被重置的问题（#1049）。当页面调用 document.write 时，整个文档会被替换，导致所有通过 window.addEventListener 注册的事件监听器丢失。

主要变更：

新增 DocumentReloadObserver 类，监听 document.documentElement 的变化，在文档重新加载时自动重新注册事件监听器
修复了 ExtensionContentMessageSend 中的逻辑错误（|| 改为 &&）
改进了 inject 环境的日志处理，通过 content 环境统一输出

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/message/custom_event_message.ts	新增 `DocumentReloadObserver` 类来监听文档重载；修改 `CustomEventMessage` 构造函数以支持文档重载时重新注册监听器
src/inject.ts	创建并使用 `DocumentReloadObserver`；配置日志通过 content 环境输出（`consoleLevel: "none"`）
src/content.ts	创建并共享 `DocumentReloadObserver` 给所有消息通道；新增日志转发处理器
src/app/service/content/content.ts	新增 `logger` 消息处理器，将 inject 环境的日志转发到 content 环境输出
packages/message/server.test.ts	更新测试代码以使用 `DocumentReloadObserver`
packages/message/extension_message.ts	修复逻辑错误：将 `
src/app/service/service_worker/value.ts	添加空行以改进代码格式

Copilot · 2025-12-05T06:56:17Z

packages/message/custom_event_message.ts

+export class DocumentReloadObserver {
+  callbacks = new Set<() => void>();
+
+  constructor() {
+    let lastDocumentElement = document.documentElement;
+    const observer = new MutationObserver(() => {
+      if (lastDocumentElement !== document.documentElement) {
+        lastDocumentElement = document.documentElement;
+        this.callbacks.forEach((cb) => cb());
+      }
+    });
+
+    observer.observe(document, {
+      childList: true, // 监听子节点变化
+    });
+  }
+
+  on(callback: () => void): void {
+    this.callbacks.add(callback);
+  }
+
+  off(callback: () => void): void {
+    this.callbacks.delete(callback);
+  }
+}


新增的 DocumentReloadObserver 类缺少单元测试覆盖。这是一个核心功能，用于解决 document.write 导致的监听器重置问题，应该添加测试来验证：

当 document.documentElement 改变时，回调是否被正确触发

多个回调是否都能被调用

on/off 方法是否正常工作

建议在 packages/message/ 目录下创建 custom_event_message.test.ts。

Copilot · 2025-12-05T06:56:18Z

packages/message/custom_event_message.ts

+    const observer = new MutationObserver(() => {
+      if (lastDocumentElement !== document.documentElement) {
+        lastDocumentElement = document.documentElement;
+        this.callbacks.forEach((cb) => cb());


回调执行时缺少错误处理。如果某个回调函数抛出异常，可能会阻止其他回调的执行。

建议添加 try-catch 保护：

this.callbacks.forEach((cb) => { try { cb(); } catch (e) { console.error("DocumentReloadObserver callback error:", e); } });

Suggested change

this.callbacks.forEach((cb) => cb());

this.callbacks.forEach((cb) => {

try {

cb();

} catch (e) {

console.error("DocumentReloadObserver callback error:", e);

}

});

Copilot · 2025-12-05T06:56:18Z

packages/message/custom_event_message.ts

+  constructor() {
+    let lastDocumentElement = document.documentElement;
+    const observer = new MutationObserver(() => {
+      if (lastDocumentElement !== document.documentElement) {
+        lastDocumentElement = document.documentElement;
+        this.callbacks.forEach((cb) => cb());
+      }
+    });
+
+    observer.observe(document, {
+      childList: true, // 监听子节点变化
+    });
+  }
+


DocumentReloadObserver 的 MutationObserver 没有提供清理机制。当不再需要观察时，observer 应该被断开连接以避免潜在的内存泄漏。

建议添加一个 disconnect() 方法：

export class DocumentReloadObserver { callbacks = new Set<() => void>(); private observer: MutationObserver; constructor() { let lastDocumentElement = document.documentElement; this.observer = new MutationObserver(() => { if (lastDocumentElement !== document.documentElement) { lastDocumentElement = document.documentElement; this.callbacks.forEach((cb) => cb()); } }); this.observer.observe(document, { childList: true, }); } disconnect(): void { this.observer.disconnect(); } // ... 其他方法 }

Suggested change

constructor() {

let lastDocumentElement = document.documentElement;

const observer = new MutationObserver(() => {

if (lastDocumentElement !== document.documentElement) {

lastDocumentElement = document.documentElement;

this.callbacks.forEach((cb) => cb());

}

});

observer.observe(document, {

childList: true, // 监听子节点变化

});

}

private observer: MutationObserver;

constructor() {

let lastDocumentElement = document.documentElement;

this.observer = new MutationObserver(() => {

if (lastDocumentElement !== document.documentElement) {

lastDocumentElement = document.documentElement;

this.callbacks.forEach((cb) => cb());

}

});

this.observer.observe(document, {

childList: true, // 监听子节点变化

});

}

disconnect(): void {

this.observer.disconnect();

}

cyfung1031 · 2025-12-05T07:59:06Z

还没细看
为什么 content.ts 跟 inject.ts 都有 documentReloadObserver的实例？

CodFrm · 2025-12-05T08:33:31Z

还没细看为什么 content.ts 跟 inject.ts 都有 documentReloadObserver的实例？

content环境的 window.addEventListener 也会因为 document.write 被清除

cyfung1031 · 2025-12-05T08:34:56Z

@CodFrm 我发现了 navigation.addEventListener 不会被 document.write 清除
你要不要研究看看？

類似的還有 performance.addEventListener

CodFrm · 2025-12-05T08:44:51Z

@CodFrm 我发现了 navigation.addEventListener 不会被 document.write 清除你要不要研究看看？

類似的還有 performance.addEventListener

确实，他们都可以，performance的兼容性更好，但是不知道有什么差异

cyfung1031 · 2025-12-05T08:46:39Z

@CodFrm 在我这边用 navigation 代替 window 后，实际用脚本测试，document.write 也没被清除

// ==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";

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

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

cyfung1031 · 2025-12-05T08:49:27Z

@CodFrm 我发现了 navigation.addEventListener 不会被 document.write 清除你要不要研究看看？
類似的還有 performance.addEventListener

确实，他们都可以，performance的兼容性更好，但是不知道有什么差异

同样顺利执行

cyfung1031 · 2025-12-05T08:50:42Z

你测试看看吧。要不就改用 performance 吧
这样就不用搞什么 relisten

CodFrm · 2025-12-05T08:51:43Z

你测试看看吧。要不就改用 performance 吧这样就不用搞什么 relisten

测试确实可以，传递element也没问题

// ==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
// @inject-into  content
// @grant        GM_addElement
// ==/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)
    }
    let el = GM_addElement(document.body, "a", {
        textContent: "hahahahah"
    })
    console.log(el)
})();

cyfung1031 · 2025-12-05T08:53:53Z

https://developer.mozilla.org/en-US/docs/Web/API/Performance/resourcetimingbufferfull_event

我看它做成 EventTarget 就是为了这个 event
这个 event 2015 年时已经支持了
所以不会有兼容问题
我也看不到有什么原因会导致 performance 这个东西的 event listening 像document.write 那么会被失效

cyfung1031 · 2025-12-05T09:01:09Z

checkEarlyStartScript里面的也改用 performance.addEventListener 吧

compilePreInjectScript里面的也改用 performance.addEventListener 吧

CodFrm · 2025-12-05T09:16:20Z

checkEarlyStartScript里面的也改用 `performance.addEventListener` 吧

是需要，不过我改了后，单测有问题

不过不改理论上也没问题，这代码的执行应该是优先于网页代码的执行的

cyfung1031 · 2025-12-05T09:18:52Z

你大概改一下我再改吧。

cyfung1031 · 2025-12-05T09:38:20Z

packages/message/extension_message.ts

  sendMessage<T = any>(data: TMessage): Promise<T> {
    return new Promise((resolve) => {
-      if (!this.options?.documentId || this.options?.frameId) {
+      if (!this.options?.documentId && !this.options?.frameId) {


这些改动不知从哪来的

呀。是 14b5209

我在排查这个问题的时候发现，顺手改的，这里有个逻辑错误

包括 95fd247 你看看还有没有需要吧

这个也是排查的时候发现的问题，一起改的，可以一起，没问题

Co-Authored-By: 王一之 <yz@ggnb.top>

CodFrm requested a review from cyfung1031 December 5, 2025 06:45

CodFrm added P0 🚑 需要紧急处理的内容 hotfix 需要尽快更新到扩展商店 labels Dec 5, 2025

CodFrm linked an issue Dec 5, 2025 that may be closed by this pull request

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

Closed

CodFrm requested a review from Copilot December 5, 2025 06:49

Copilot started reviewing on behalf of CodFrm December 5, 2025 06:50 View session

Copilot finished reviewing on behalf of CodFrm December 5, 2025 06:55

Copilot AI reviewed Dec 5, 2025

View reviewed changes

CodFrm force-pushed the fix/1049 branch from c832d8b to 715924b Compare December 5, 2025 09:21

cyfung1031 reviewed Dec 5, 2025

View reviewed changes

使用 performance 传递消息

0c0cb5b

Co-Authored-By: 王一之 <yz@ggnb.top>

cyfung1031 force-pushed the fix/1049 branch from 9a87d4a to 0c0cb5b Compare December 5, 2025 23:54

CodFrm merged commit 1f3a3ec into main Dec 6, 2025
3 checks passed

CodFrm deleted the fix/1049 branch December 19, 2025 02:12

-        this.callbacks.forEach((cb) => cb());
+        this.callbacks.forEach((cb) => {
+          try {
+            cb();
+          } catch (e) {
+            console.error("DocumentReloadObserver callback error:", e);
+          }
+        });

Conversation

CodFrm commented Dec 5, 2025

概述 Descriptions

变更内容 Changes

截图 Screenshots

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

cyfung1031 commented Dec 5, 2025

Uh oh!

CodFrm commented Dec 5, 2025

Uh oh!

cyfung1031 commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CodFrm commented Dec 5, 2025

Uh oh!

cyfung1031 commented Dec 5, 2025

Uh oh!

cyfung1031 commented Dec 5, 2025

Uh oh!

cyfung1031 commented Dec 5, 2025

Uh oh!

CodFrm commented Dec 5, 2025

Uh oh!

cyfung1031 commented Dec 5, 2025

Uh oh!

cyfung1031 commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CodFrm commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cyfung1031 commented Dec 5, 2025

Uh oh!

cyfung1031 Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

cyfung1031 Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

CodFrm Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

cyfung1031 Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

CodFrm Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cyfung1031 commented Dec 5, 2025 •

edited

Loading

cyfung1031 commented Dec 5, 2025 •

edited

Loading

CodFrm commented Dec 5, 2025 •

edited

Loading