Chrome扩展中使用jQuery更新表单输入值失效问题求助

数据老陈

2026-10-10

问题根因

当前页面表单使用了受控组件逻辑（多为React/Vue等前端框架实现），表单值由框架内部状态统一管理：

直接调用jQuery val()仅修改了DOM节点的表面值，未同步更新框架内部状态
失焦、提交等操作触发状态同步时，框架会用原始空状态覆盖你修改的DOM值
手动输入可正常保留，是因为键盘输入会自动触发框架监听的值变更事件，同步更新内部状态

先修正代码低级错误

你代码中除第一个选择器外，其余address-form前均丢失了类选择器前缀.，导致后续输入框根本未被选中，填充逻辑无效。

最终修复方案

按照真实用户输入的事件流触发对应事件，让框架感知到值变更并同步内部状态，修正后代码如下：

$(function(){
    chrome.storage.sync.get(['fname','fstreetaddress','fcity','fstate','fpostalcode'],function(address){
        // 通用填充方法，统一处理事件触发逻辑
        const fillInput = (selector, value) => {
            const $input = $(selector);
            if (!$input.length) return;
            // 模拟真实输入的完整事件流
            $input.trigger('focus');
            $input.val(value);
            // 触发原生input事件，适配所有前端框架的受控组件监听逻辑
            $input[0].dispatchEvent(new Event('input', { bubbles: true }));
            $input.trigger('change');
            $input.trigger('blur');
        }

        // 修正选择器，增加类前缀.
        fillInput(".address-form input[name='name']", address.fname);
        fillInput(".address-form input[name='addressLineOne']", address.fstreetaddress);
        fillInput(".address-form input[name='City']", address.fcity);
        fillInput(".address-form input[name='State']", address.fstate);
        fillInput(".address-form input[name='postalCode']", address.fpostalcode);
    });
});