Chrome扩展点击事件报错Uncaught ReferenceError: btn未定义求助

你遇到的Uncaught ReferenceError: btn is not defined错误，核心原因是上下文隔离：

chrome.scripting.executeScript中指定的function会在当前活跃标签页的页面上下文中执行，而不是popup的上下文。标签页的环境里根本不存在popup中的btn DOM元素，自然会报错。另外，DOM对象本身无法跨上下文序列化传递，就算你把btn作为参数传进去也无法在目标上下文使用。

解决方法 #

根据你的需求，分两种情况处理：

情况1：需要传递按钮的部分属性（比如value、id） #

使用chrome.scripting.executeScript的args参数，传递可序列化的属性值（字符串、数字、普通对象等），注入的函数会接收这些参数作为入参：

修改后的popup.js：

function handleClick(btn) {
    chrome.tabs.query({active: true}, function(tabs) {
        chrome.scripting.executeScript({
            target: {tabId: tabs[0].id},
            args: [btn.value], // 传递按钮的value属性（可序列化）
            function: (buttonValue) => {
                console.log(buttonValue); // 这里能正常拿到值
            }
        });
    })
}

function start(){
    const btn = document.querySelector('#request-btn');
    btn.addEventListener('click', function() {
        handleClick(btn);
    });
}
window.onload = start;

情况2：不需要按钮的任何信息 #

直接移除对btn的引用，简化代码：

修改后的popup.js：

function handleClick() {
    chrome.tabs.query({active: true}, function(tabs) {
        chrome.scripting.executeScript({
            target: {tabId: tabs[0].id},
            function: () => {
                console.log("按钮已触发点击");
            }
        });
    })
}

function start(){
    const btn = document.querySelector('#request-btn');
    btn.addEventListener('click', handleClick); // 直接绑定函数
}
window.onload = start;

关键提示 #

Chrome扩展Manifest V3中，注入到标签页的脚本与popup/background脚本处于完全隔离的上下文，只能通过args传递可JSON序列化的数据，DOM元素、函数这类无法序列化的对象不能直接跨上下文传递。

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