Chrome扩展修改Facebook Marketplace字段值时dispatchEvent报错排查

我正在开发一款Chrome扩展，用于修改Facebook Marketplace的字段值。使用如下代码：

function changeValue(el, value) {
    return new Promise(async (resolve) => {
        const input = el;
        if (!input) {
            return;
        }

        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;  // change value to files
        nativeInputValueSetter.call.bind(input, value);

        const ev2 = new Event('input', {
            bubbles: true
        });
        input.dispatchEvent(ev2);

        input.value = value;
        input.dispatchEvent(new Event('change'));
        resolve();
    });
}

该代码在网页控制台中可成功修改字段值，但在扩展中运行时，在input.dispatchEvent处抛出错误：Uncaught (in promise) TypeError: input.dispatchEvent is not a function。我不清楚这是权限问题还是版本问题，参数el为目标字段，value为要设置的新值，希望排查问题原因。

这个错误的核心原因是Chrome扩展的隔离环境导致DOM元素被包装——扩展的内容脚本运行在独立的上下文（isolated world）中，你获取到的el是网页上下文DOM元素的"包装对象"，这个对象没有原生的dispatchEvent方法，因此触发报错。

以下是具体修复方案：

方案1：注入脚本到网页主上下文执行 #

内容脚本无法直接操作网页原生DOM对象的方法，需要把修改逻辑注入到网页的主上下文（main world）中运行：

// 内容脚本中执行：将修改函数注入到网页上下文
function injectChangeLogic() {
    const script = document.createElement('script');
    script.textContent = `
        // 定义网页上下文可调用的修改函数
        window.marketplaceFieldChange = function(elSelector, value) {
            return new Promise((resolve) => {
                const el = document.querySelector(elSelector);
                if (!el) {
                    resolve();
                    return;
                }

                // 调用原生value setter
                const nativeSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
                nativeSetter.call(el, value);

                // 触发原生事件
                el.dispatchEvent(new Event('input', { bubbles: true }));
                el.dispatchEvent(new Event('change'));
                resolve();
            });
        };

        // 监听来自内容脚本的消息
        window.addEventListener('message', (e) => {
            if (e.data.type === 'SET_MARKETPLACE_FIELD') {
                window.marketplaceFieldChange(e.data.selector, e.data.value);
            }
        });
    `;
    document.head.appendChild(script);
    script.remove();
}

// 初始化注入
injectChangeLogic();

// 内容脚本中触发修改的示例
function setFieldValue(selector, value) {
    window.postMessage({
        type: 'SET_MARKETPLACE_FIELD',
        selector: selector,
        value: value
    }, '*');
}

// 调用示例：修改某个输入框
// setFieldValue('#some-input-id', '新的字段值');

方案2：修正原生setter调用（辅助优化） #

你当前代码中nativeInputValueSetter.call.bind(input, value)这一行存在语法错误——bind不会立即执行函数，正确调用应为nativeInputValueSetter.call(input, value)。但即使修正这一点，仍会遇到dispatchEvent的上下文隔离问题，因此优先推荐方案1。

额外配置注意 #

确保扩展的manifest.json正确配置了内容脚本的匹配规则：

"content_scripts": [
    {
        "matches": ["https://www.facebook.com/marketplace/*"],
        "js": ["content.js"],
        "run_at": "document_idle"
    }
]

内容的提问来源于stack exchange，提问作者Towsif Ahamed Labib