Manifest V3 Chrome扩展jQuery不生效 按钮点击无响应问题排查

核心问题点 #

• options.js存在致命语法错误：声明变量时错把var/let写成了val，直接导致整个脚本文件解析失败，预算限额保存、总消费重置功能完全失效，已存储的限额也无法正常读取。
• 所有HTML页面的脚本标签都放在<head>节点内，虽然代码中写了jQuery DOM就绪监听，但Manifest V3默认内容安全策略对脚本执行时机有严格限制，这种写法极易出现DOM元素未挂载完成就执行事件绑定的问题，直接导致Spend按钮点击事件绑定失败，点击无任何响应。
• 两个页面加载的jQuery版本不一致（popup页用3.0.6、选项页用3.6.0），虽不是致命错误，但容易触发版本兼容类的API异常。
• 原代码中chrome.storage.sync.set操作没有结果回调，存储写入失败时不会有任何提示，问题排查难度高。

修复后完整代码 #

所有页面统一将脚本标签移到</body>闭合标签前，保证脚本执行时所有DOM元素已经渲染完成，统一使用jQuery 3.6.0版本。

1. popup.html #

<!DOCTYPE html>
<html>
<head>
    <title>Budget Manager</title>
</head>
<body>
    <h1>Budget Manager</h1>
    <h2>Total Spend: <span id="total">0</span></h2>
    <h2>Limit: <span id="limit"></span></h2>
    <h3>Enter Amount</h3>
    <input type="text" id="amount">
    <input type="submit" id="spendAmount" value="Spend">
    <!-- 脚本移至body末尾 -->
    <script src="jquery-3.6.0.min.js"></script>
    <script src="popup.js"></script>
</body>
</html>

2. popup.js #

补全空值、非法值校验，增加存储写入成功回调，保证UI和存储数据一致：

$(function(){
    // 初始化读取存储的总消费和限额
    chrome.storage.sync.get(['total', 'limit'], function(budget){
        $('#total').text(budget.total || 0);
        $('#limit').text(budget.limit || '未设置');
    })

    $('#spendAmount').click(function(){
        chrome.storage.sync.get('total', function(budget){
            let newTotal = 0;
            if (budget.total){
                newTotal += parseInt(budget.total);
            }

            const amount = $('#amount').val().trim();
            if(amount && !isNaN(parseInt(amount))){
                newTotal += parseInt(amount);
            } else {
                alert('请输入有效金额数值');
                return;
            }

            chrome.storage.sync.set({'total': newTotal}, function(){
                // 存储写入成功后再更新UI
                $('#total').text(newTotal);
                $('#amount').val('');
            });
        });
    });
});

3. options.html #

同样将脚本移至body末尾，统一jQuery版本：

<!DOCTYPE html>
<html>
<head>
    <title>Budget Manager Options</title>
</head>
<body>
    <h1>Budget Manager Options</h1>
    <h2>Limit: <input type="text" id="limit"></h2>
    <input type="submit" id="saveLimit" value="Save Limit">
    <input type="submit" id="resetTotal" value="Reset Total">
    <!-- 脚本移至body末尾 -->
    <script src="jquery-3.6.0.min.js"></script>
    <script src="options.js"></script>
</body>
</html>

4. options.js #

修复变量声明语法错误，补全校验和操作反馈：

$(function(){
    chrome.storage.sync.get('limit', function(budget){
        $('#limit').val(budget.limit || '');
    })

    $('#saveLimit').click(function(){
        // 修复语法错误：val -> let
        let limit = $('#limit').val().trim();
        if(limit && !isNaN(parseInt(limit))){
            chrome.storage.sync.set({'limit': limit}, function(){
                alert('预算限额保存成功');
                window.close();
            });
        } else {
            alert('请输入有效的限额数值');
        }
    });

    $('#resetTotal').click(function(){
        chrome.storage.sync.set({'total': 0}, function(){
            alert('总消费已重置为0');
        })
    })
});

5. manifest.json #

原有配置基本符合MV3规范，修正原描述中的单词拼写错误即可，注意确认所有图标文件路径正确：

{
    "manifest_version": 3,
    "name": "Budget Manager",
    "version": "1.0",
    "description": "This extension tracks your overall spendings.",
    "icons": {
        "128": "icon128.png",
        "48": "icon48.png",
        "16": "icon16.png"
    },
    "action": {
        "default_icon": "icon16.png",
        "default_popup": "popup.html"
    },
    "options_page": "options.html",
    "permissions": [
        "storage"
    ]
}

验证步骤 #

• 替换所有修改后的文件，打开浏览器扩展管理页，点击对应扩展的刷新按钮
• 右键扩展图标打开选项页，设置预算限额保存，确认存储功能正常
• 回到弹窗页输入金额点击Spend，确认总消费正常累加，输入非数值会弹出提示
• 在选项页点击重置按钮，确认总消费可以正常归零

内容的提问来源于stack exchange，提问作者niloofar