Chrome扩展中出现Bootstrap JavaScript非法调用错误的原因求助

核心错误原因 #

你遇到的Illegal invocation错误，主要由三个问题导致：

• HTML属性误用：插入模态框时用了React风格的className，但原生HTML标准属性是class，这会导致Bootstrap无法识别模态框的结构类，触发DOM查询异常。
• 事件绑定时机错误：$(document).ready里绑定.btn-sm的hover事件时，按钮还未插入DOM，事件根本没绑定到目标元素上。
• 模态框位置错误：$("body").after把模态框放在了<body>标签外部，Bootstrap模态框必须放在<body>内部才能正常工作。

修正后的代码 #

content-script.js 修正版

$(document).ready(function(){
    // 先插入按钮到目标位置
    $("#result-stats nobr").after(" <button type='button' class='btn btn-warning btn-sm'>BUTTON</button>");
    
    // 把模态框插入到body内部，同时将className替换为标准class属性
    $("body").append(`<div id='exampleModalToggle' class='modal fade'>
        <div class='modal-dialog'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <h5 class='modal-title'>Modal Title</h5>
                    <button type='button' class='close' data-bs-dismiss='modal'>&times;</button>
                </div>
                <div class='modal-body'>
                    <p>这是一个简单的Bootstrap模态框。点击'叉号图标'或'深灰区域'即可关闭模态框。</p>
                </div>
            </div>
        </div>
    </div>`);

    // 用事件委托绑定hover事件，确保动态添加的按钮能触发
    $(document).on("mouseenter", ".btn-sm", function(){
        $("#exampleModalToggle").modal("show");
    });
});

额外注意事项 #

• 如果你使用的是Bootstrap 5，关闭模态框的属性是data-bs-dismiss='modal'，而非旧版的data-dismiss='modal'，不修改的话关闭功能会失效。
• 用模板字符串（反引号`）代替字符串拼接，代码可读性更高，也能避免引号转义的麻烦。
• 事件委托$(document).on()可以确保后续动态添加的元素也能触发事件，比直接绑定更可靠。

验证步骤 #

1. 替换content-script.js的代码
2. 重新加载Chrome扩展
3. 打开谷歌搜索页面，悬停按钮，模态框应正常显示且控制台无错误

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